@import "~@billogram/color-system/reference";

.foundation-textbox {
    background: $color-white;
    border: 1px solid $color-gray-07;
    border-radius: 4px;
    display: flex;
    height: 44px;
    line-height: 42px;
    width: 100%;

    &:focus-within {
        // TODO: what to do with this?
        outline: -webkit-focus-ring-color auto 5px;
    }

    &:hover:not(&--disabled) {
        border-color: darken($color-gray-07, 10%);
    }

    &:active:not(&--disabled) {
        border-color: $color-blue-09;
    }

    &--disabled {
        border-color: lighten($color-gray-07, 20%);
        background-color: $color-gray-03;
        color: $color-gray-08;
    }

    &--errors {
        border-color: $color-red-09;
    }

    &__field {
        background-color: transparent;
        border: none;
        flex: 1;
        padding: 0 8px;

        &:focus {
            outline: none;
        }
    }

    &__symbol {
        &--visible {
            color: $color-gray-09;
            height: 100%;
            line-height: inherit;
            padding-right: 8px;
        }

        &--disabled {
            color: $color-gray-08;
        }
    }
}