@use '../variables/colors' as colors;
@use '../variables/fonts' as fonts;
@use './texts' as texts;
@use './paddings' as paddings;
@use './shadows' as shadows;
@use './buttons' as buttons;

@mixin cui-clear-input() {
    padding: 0;
    outline: none;
    margin: 0;
    border-width: 0;
    appearance: none;
    caret-color: currentColor;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;

    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 200px var(--cui-input-autofill-bg) inset;
        -webkit-text-fill-color: var(--cui-input-autofill-color);
        caret-color: var(--cui-input-autofill-color);
    }
}

@mixin cui-default-input() {
    :host {
        --cui-input-autofill-bg: #{colors.$cui-input};
        --cui-input-autofill-color: #{colors.$cui-base-900};
        $border-width: 1px;

        @include paddings.cui-padding(horizontal, 1.75, $border-width);
        @include texts.cui-text-sm-regular();

        display: flex;
        align-items: center;
        gap: 8px;
        border: $border-width solid colors.$cui-base-200;
        border-radius: 8px;
        cursor: text;
        background: colors.$cui-input;
        color: colors.$cui-base-900;
        font-family: fonts.$cui-main-font;

        &:hover {
            border-color: colors.$cui-base-300;
        }

        &:focus-within {
            @include shadows.cui-shadow-focused();

            border-color: colors.$cui-info;
        }

        &[data-size='sm'] {
            @include paddings.cui-padding(vertical, 1, $border-width);
        }

        &[data-size='md'] {
            @include paddings.cui-padding(vertical, 1.125, $border-width);
        }

        &._disabled {
            cursor: not-allowed;
            opacity: 0.5;
            background: colors.$cui-base-50;
            border-color: colors.$cui-base-200;
        }

        &._with-error {
            border-color: colors.$cui-danger;

            &:focus-within {
                @include shadows.cui-shadow-error-focused();
            }
        }
    }

    .c-input {
        @include cui-clear-input();

        width: 100%;

        &:disabled {
            cursor: not-allowed;
        }

        &::placeholder {
            color: colors.$cui-base-400;
        }
    }

    .c-button {
        @include buttons.cui-clear-button();

        display: flex;
    }
}