@use '../../variables' as *;

$b: '.input';

#{$b} {
    appearance: none;
    background-color: $input-bg;
    border: $input-border-width solid $input-filled-border-color;
    border-radius: $input-radius;
    color: $input-color;
    display: block;
    height: $input-height;
    padding: $input-padding-y $input-padding-x;
    transition-duration: var(--duration-micro-s);
    transition-property: background-color, border-color, color;
    transition-timing-function: var(--easing-standard);
    width: 100%;

    @include font($input-font);

    &:placeholder-shown {
        border-color: $input-border-color;
    }

    &[type='number'] {
        @media (--tablet-landscape-up) {
            appearance: textfield;
        }

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
            @media (--tablet-landscape-up) {
                appearance: none;
            }
        }
    }

    &::placeholder {
        color: $input-placeholder-color;
    }

    &:disabled {
        background-color: $input-disabled-bg;
        border-color: $input-disabled-border-color;
        color: $input-disabled-color;

        &::placeholder {
            color: $input-disabled-placeholder-color;
        }
    }

    &:focus-visible {
        background-color: $input-active-bg;
        border-color: $input-active-border-color;
        color: $input-active-color;
        outline: $input-border-width solid $input-active-outline-color;
    }

    &_small {
        height: $input-small-height;
        padding: $input-small-padding-y $input-small-padding-x;

        @include font($input-small-font);
    }

    &_textarea {
        min-height: $input-textarea-min-height;
        resize: vertical;

        @include font($input-textarea-font);

        &#{$b}_small {
            min-height: $input-textarea-small-min-height;
        }
    }

    &_error {
        background-color: $input-error-bg;
        border-color: $input-error-border-color;
        color: $input-error-color;

        &:placeholder-shown,
        &:focus-visible {
            border-color: $input-error-border-color;
        }
    }
}