<commit_before>@import "mixins/utils";
@import "mixins/inputs";
@import "mixins/select";

input[type="text"], input[type="tel"], input[type="number"], input[type="email"], textarea, select, custom-dropdown {
    &.sc-input {
        @include input(M);
        font-family: inherit;
        border-radius: $form-border-radius;
        border: 1px solid #959595; // TODO: color: correct?
        color: $black-100;
        width: 100%;
        line-height: 1.5;
        transition: all 0.1s ease-in;
        outline: none;
        cursor: pointer;

        &.sc-input-l {
            @include input(L);
        }

        &.error {
            border-color: $color-error;
            background-color: $color-error-message;
        }

        &.success {
            border-color: $color-success;
            background-color: $color-success-message;
        }

        &.info {
            border-color: $color-info;
            background-color: $color-info-message;
        }

        &:disabled {
            background-color: $white;
            border-color: $black-40;
            color: $black-40;
            cursor: not-allowed;
        }

        &:hover:enabled {
            border-color: $black-100;
        }

        &:focus:enabled {
            box-shadow: 0 0 1px 0 $blue-80 ;
            border-color: $blue-80;
        }

        &:invalid {
            box-shadow: none;
        }

        &::-webkit-input-placeholder {
            color: #939393;
        }
        // CHECK: color correct?
        &:-moz-placeholder {
            color: #939393;
        }
        &::-moz-placeholder {
            color: #939393;
        }
        &:-ms-input-placeholder {
            color: #939393;
        }

        &:focus::-webkit-input-placeholder {
            color: transparent;
        }
        &:focus:-moz-placeholder {
            color: transparent;
        }
        &:focus::-moz-placeholder {
            color: transparent;
        }
        &:focus:-ms-input-placeholder {
            color: transparent;
        }
    }
}

textarea.sc-input {
    height: auto !important;
}

// TODO: check that original radio box is hidden on all devices and in all browsers
input[type="radio"], input[type="checkbox"] {
    &.sc-input {
        display: block;
        opacity: 0;
        position: absolute;

        &.block + label {
            display: block;
        }

        & + label {
            @include avoid-selection();
            line-height: 1.5rem;
            display: inline-block;
            position: relative;
            margin-right: 16px;
            cursor: pointer;
            transition: color 0.1s ease-in;

            &:before {
                content: '';
                display: block;
                background-size: cover;
                position: absolute;
                left: 0;
                top: 2px;
                border: 1px solid #939393;
            }
        }

        &:disabled + label:before {
            opacity: 0.45;
        }

        &:disabled + label {
            cursor: not-allowed;
            color: $black-40;
        }

        &:enabled + label:hover:before {
            border-color: $black-100;
        }

        &:focus:enabled + label:before {
            border-color: $blue-80;
        }<commit_msg>AS24-11378 transition for all kinds of input fields<commit_after>@import "mixins/utils";
@import "mixins/inputs";
@import "mixins/select";

input[type="text"], input[type="tel"], input[type="number"], input[type="email"], textarea, select, custom-dropdown {
    &.sc-input {
        @include input(M);
        font-family: inherit;
        border-radius: $form-border-radius;
        border: 1px solid #959595; // TODO: color: correct?
        color: $black-100;
        width: 100%;
        line-height: 1.5;
        transition: all 0.2s ease-in;
        outline: none;
        cursor: pointer;

        &.sc-input-l {
            @include input(L);
        }

        &.error {
            border-color: $color-error;
            background-color: $color-error-message;
        }

        &.success {
            border-color: $color-success;
            background-color: $color-success-message;
        }

        &.info {
            border-color: $color-info;
            background-color: $color-info-message;
        }

        &:disabled {
            background-color: $white;
            border-color: $black-40;
            color: $black-40;
            cursor: not-allowed;
        }

        &:hover:enabled {
            border-color: $black-100;
        }

        &:focus:enabled {
            box-shadow: 0 0 1px 0 $blue-80 ;
            border-color: $blue-80;
        }

        &:invalid {
            box-shadow: none;
        }

        &::-webkit-input-placeholder {
            color: #939393;
        }
        // CHECK: color correct?
        &:-moz-placeholder {
            color: #939393;
        }
        &::-moz-placeholder {
            color: #939393;
        }
        &:-ms-input-placeholder {
            color: #939393;
        }

        &:focus::-webkit-input-placeholder {
            color: transparent;
        }
        &:focus:-moz-placeholder {
            color: transparent;
        }
        &:focus::-moz-placeholder {
            color: transparent;
        }
        &:focus:-ms-input-placeholder {
            color: transparent;
        }
    }
}

textarea.sc-input {
    height: auto !important;
}

// TODO: check that original radio box is hidden on all devices and in all browsers
input[type="radio"], input[type="checkbox"] {
    &.sc-input {
        display: block;
        opacity: 0;
        position: absolute;

        &.block + label {
            display: block;
        }

        & + label {
            @include avoid-selection();
            line-height: 1.5rem;
            display: inline-block;
            position: relative;
            margin-right: 16px;
            cursor: pointer;

            &:before {
                content: '';
                display: block;
                background-size: cover;
                position: absolute;
                left: 0;
                top: 2px;
                border: 1px solid #939393;
                transition: all 0.1s ease-in;
            }

            &:after {
                transition: all 0.1s ease-in;
            }
        }

        &:disabled + label:before {
            opacity: 0.45;
        }

        &:disabled + label {
            cursor: not-allowed;
            color: $black-40;
        }

        &:enabled + label:hover:before {
            border-color: $black-100;
        }

        &:focus:enabled + label:before {
            border-color: $blue-80;
        }
{'fraction_non_alphanumeric': 0.12509296445039417, 'fraction_numerical': 0.025732559869106053, 'mean_word_length': 1.316224595246297, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '5157669', 'n_tokens_mistral': 2044, 'n_tokens_neox': 1880, 'n_words': 398}