<commit_before>// Styles written by YOURNAME @ YOURCOMPANY

/* ------------------------------------------------------------------------ *\
 * Input
\* ------------------------------------------------------------------------ */
.input {
    &,
    & > .input_inner,
    &.-checkbox + .text.-checkbox:before,
    &.-radiobutton + .text.-radiobutton:before {
        background: $background;
        border: remify(1) solid darken($background_alt, 10);
        color: $foreground;
        display: block;
        font-family: $body-font;
        font-size: remify(16, 16);
        font-weight: 400;
        line-height: remify(24, 16);
        margin: remify(0 0 24, 16);
        outline: 0;
        padding: remify(8 12, 16);
        transition: border-color 0.15s, color 0.15s;
        width: 100%;
    }

    &:focus,
    &:hover,
    & > .input_inner:focus,
    & > .input_inner:hover,
    &.-checkbox:focus + .text.-checkbox:before,
    &.-checkbox + .text.-checkbox:hover:before,
    &.-radiobutton:focus + .text.-radiobutton:before,
    &.-radiobutton + .text.-radiobutton:hover:before {
        border-color: $accent;
    }
}

// select variant

.input.-select {
    & {
        background: none;
        border: 0;
        padding: 0;
        position: relative;
    }

    .input_inner {
        margin-bottom: 0;
        position: relative;
        z-index: 1;
        // remove Firefox default styles & arrow
        text-indent: 0.01px;
        text-overflow: "";
        -moz-appearance: none;
        // remove Chrome/Safari default styles & arrow
        -webkit-appearance: none;
        // remove IE default styles & arrow
        &::-ms-expand {display: none;}
    }

    &.-arrow .input_inner {
        padding-right: remify(48, 16);
    }

    .input_inner:focus,
    .input_inner:hover {
        border-color: $accent;
    }

    .input_arrow {
        color: inherit;
        font-size: remify(16, 16);
        pointer-events: none;
        position: absolute;
        right: remify(16, 16);
        transform: translateY(-50%);
        transition: color 0.15s;
        top: 50%;
        z-index: 2;
    }

    .input_inner:focus + .input_arrow,
    .input_inner:hover + .input_arrow {
        color: $accent;
    }
}

// checkbox & radiobutton variants

.input.-checkbox,
.input.-radiobutton {
    & {
        left: -999em;
        position: absolute;
    }

    + .text.-label.-checkbox,
    + .text.-label.-radiobutton {
        padding-left: remify(32, 16);
        position: relative;
    }

    + .text.-label.-checkbox:before,
    + .text.-label.-radiobutton:before {
        content: "\0020";
        font-size: remify(8, 16);
        height: remify(16, 8);
        left: 0;<commit_msg>Some minor tweaks to input styles<commit_after>// Styles written by YOURNAME @ YOURCOMPANY

/* ------------------------------------------------------------------------ *\
 * Input
\* ------------------------------------------------------------------------ */

.input {
    &,
    & > .input_inner,
    &.-checkbox + .text.-checkbox:before,
    &.-radiobutton + .text.-radiobutton:before {
        background: $background;
        border: remify(1) solid darken($background_alt, 10);
        color: $foreground;
        display: block;
        font-family: $body-font;
        font-size: remify(16, 16);
        font-weight: 400;
        line-height: remify(24, 16);
        margin: remify(0 0 24, 16);
        outline: 0;
        padding: remify(8 12, 16);
        transition: border-color 0.15s, color 0.15s;
        width: 100%;
    }

    &:focus,
    &:hover,
    & > .input_inner:focus,
    & > .input_inner:hover,
    &.-checkbox:focus + .text.-checkbox:before,
    &.-checkbox + .text.-checkbox:hover:before,
    &.-radiobutton:focus + .text.-radiobutton:before,
    &.-radiobutton + .text.-radiobutton:hover:before {
        border-color: $accent;
    }
}

// select variant

.input.-select {
    & {
        background: none;
        border: 0;
        padding: 0;
        position: relative;
    }

    .input_inner {
        margin-bottom: 0;
        padding: remify(8 12 13, 16);
        position: relative;
        z-index: 1;
        // remove Firefox default styles & arrow
        text-indent: 0.01px;
        text-overflow: "";
        -moz-appearance: none;
        // remove Chrome/Safari default styles & arrow
        -webkit-appearance: none;
        // remove IE default styles & arrow
        &::-ms-expand {display: none;}
    }

    &.-arrow .input_inner {
        padding-right: remify(48, 16);
    }

    .input_inner:focus,
    .input_inner:hover {
        border-color: $accent;
    }

    &:after {
        @include icon("sort");
        color: inherit;
        display: block;
        font-size: remify(16, 16);
        pointer-events: none;
        position: absolute;
        right: remify(16, 16);
        transform: translateY(-50%);
        transition: color 0.15s;
        top: 50%;
        z-index: 2;
    }

    // doesn't work, sadly

    .input_inner:focus + &:after,
    .input_inner:hover + &:after {
        color: $accent;
    }
}

// checkbox & radiobutton variants

.input.-checkbox,
.input.-radiobutton {
    & {
        left: -999em;
        position: absolute;
    }

    + .text.-label.-checkbox,
    + .text.-label.-radiobutton {
        padding-left: remify(32, 16);
        position: relative;
    }

    + .text.-label.-checkbox:before,
    + .text.-label.-radiobutton:before {
        content: "\0020";
        font-size: remify(8, 16);
        height: remify(16, 8);
        left: 0;
{'fraction_non_alphanumeric': 0.19045904590459045, 'fraction_numerical': 0.030063006300630062, 'mean_word_length': 1.5865921787709498, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1070541', 'n_tokens_mistral': 1884, 'n_tokens_neox': 1726, 'n_words': 364}