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

.input {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    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");

    > .separator {
        display: block;
        align-self: stretch;
        width: 1px;
        background-color: T.variant(
            "input",
            "border",
            T.variant("base", "separator")
        );
        margin: 0 T.gap("micro");
    }

    > .gutter {
        display: block;
        box-sizing: border-box;
        flex: 0 0 auto;
        width: T.gap("micro") * 2;
    }

    input {
        @include T.control();
        display: block;
        flex: 1 1 0;
        border-radius: 0;

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

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

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

    @each $name, $gap in T.gaps(T.var("input", "gaps", ())) {
        &.is-#{$name}-gaped {
            > .separator {
                margin: 0 math.div($gap, 2);
            }

            > .gutter {
                width: $gap;
            }
        }
    }

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

            @include T.selection($name);
        }
    }

    fieldset[disabled] &,
    &.is-disabled {
        @include T.disabled();
    }

    > * {
        line-height: 1em !important;
    }
}