@use "sass:math";
@use "../termeh" as T;

select {
    @include T.control();
    display: block;
    max-width: 100%;
    width: 100%;
    padding: T.control-padding();
    background-color: T.color("input");
    border: 1px solid
        T.variant("input", "border", T.variant("base", "separator"));
    border-radius: T.var("radius", "normal");
    accent-color: T.color("primary");

    @include T.placeholder {
        color: T.variant("input", "placeholder", T.variant("shade", "mute"));
    }

    &:focus,
    &.is-focused {
        border-color: T.color("primary");
    }

    &.is-failed,
    &:invalid {
        border-color: T.color("error");
        animation: shake .5s ease;
    }

    @each $name, $color in T.colors(T.var("input", "colors", ())) {
        &.is-#{$name} {
            accent-color: $color;

            &:focus,
            &.is-focused {
                border-color: $color;
            }
            
            @include T.selection($name);
        }
    }

    &[disabled],
    fieldset[disabled] &,
    &.is-disabled {
        @include T.locked();
        background: T.variant("input", "disabled") !important;
        border-color: T.variant("input", "disabled-border") !important;
        color: T.variant("input", "disabled-color") !important;
    }
}