.textfield {
    border: 1px solid #EFEAE4;
    border-radius: 3px;
    height: 40px;
    font-family: 'Comfortaa', cursive;
    font-size: 12px;
    line-height: 13px;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background-color: transparent;
    box-shadow: none;
    &::placeholder {
        color: $choco-light;
    }
    &_search {
        height: 33px;
        padding-right: 90px;
    }
}

.login__input-field,
.input__text-field,
.checkout-field,
.checkout__field {
    position: relative;
    margin: 20px 0;
    text-align: left;
    label {
        font-size: 12px;
        line-height: 13px;
        color: $choco;
        position: absolute;
        top: -15px;
        left: 16px;
        transition: all .3s ease;
        cursor: pointer;
        opacity: 0;
    }
    input:focus+label,
    input:not([value=""])+label,
    input.invalid+label {
        opacity: 1;
        .error {
            font-family: 'Proxima Nova', sans-serif;
            font-size: 12px;
            line-height: 15px;
            color: #FF0000;
            margin-left: -16px;
        }
        .error+.login__label,
        .error+.input__label {
            display: none;
        }
    }
    input::placeholder {
        color: $choco-light;
    }
    input:focus::placeholder {
        opacity: 0;
    }
    input {
        width: 100%;
        height: 40px;
        display: block;
        padding: 13px 15px;
        background: #FFFFFF;
        border: 1px solid $border;
        font-family: Comfortaa, cursive;
        font-size: 12px;
        line-height: 13px;
        color: $choco;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        &.invalid {
            border: 1px solid #FF0000;
        }
    }
}

.filter__input_checkbox,
.input__checkbox,
.input__radio {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    &::after {
        content: '';
        position: relative;
        top: 0;
        margin-left: auto;
        display: flex;
        flex: none;
        width: 17px;
        height: 17px;
        border: 1px solid $choco;
        border-radius: 5px;
        cursor: pointer;
        @media screen and (min-width: $vtablet-width) {
            order: -1;
            margin-left: 0;
            margin-right: 14px;
        }
    }
    input {
        opacity: 0;
        width: 0;
    }
    @media screen and (min-width: $vtablet-width) {
        justify-content: flex-start;
    }
}

.input__radio {
    &::after {
        border: 2px solid #f2f1f1;
        box-shadow: 0 0 0 2px #4e372a;
        background-color: #f2f1f1;
        width: 13px;
        height: 13px;
        left: 2px;
        top: 2px;
        border-radius: 50%;
        cursor: pointer;
    }
    @media screen and (min-width: $vtablet-width) {
        margin-right: 18px;
    }
}

.input__radio.active::after {
    background-color: #4e372a;
}

.attribute-disabled,
.input-disabled {
    color: $text;
    opacity: 0.7;
}

.attribute-checked::after,
.input__checkbox_checked::after {
    background: $choco;
    color: #fff;
    content: "\2713";
    font-family: Arial, sans-serif;
    line-height: 14px;
    font-size: 13px;
    align-items: center;
    justify-content: center;
}

.select:not(.is-multiple) {
    position: relative;
    height: auto;
    select {
        width: 100%;
        height: 40px;
        background: #ffffff;
        border: 1px solid $border;
        box-sizing: border-box;
        border-radius: 3px;
        color: $choco;
        font-size: 14px;
        line-height: 40px;
        vertical-align: middle;
        padding: 0 35px 0 15px;
        font-family: 'Comfortaa', cursive;
        appearance: none;
    }
    &::after {
        content: '';
        width: 30px;
        height: 38px;
        position: absolute;
        top: 1px;
        right: 3px;
        background-color: #ffffff;
        background-image: url(/assets/images/arrow_down.svg);
        background-position: 0 50%;
        background-repeat: no-repeat;
        background-size: 12px;
        pointer-events: none;
        border: none;
        transform: none;
        margin: 0;
    }
}

.select select.is-active,
.select select.is-focused,
.select select:active,
.select select:focus {
    box-shadow: 0 0 0 0.05em rgba(0, 0, 0, .25);
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select:focus,
    textarea:focus,
    input:focus {
        font-size: 16px;
    }
}