@use '../core/styles/common/tokens';

@mixin kbq-form-field-hint-theme {
    > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
        color: var(--kbq-form-field-hint-text);
    }
}

@mixin kbq-form-field-hint-typography {
    > .kbq-hint:not(.kbq-password-hint, .kbq-reactive-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning)
        .kbq-hint__text {
        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
    }
}

@mixin _kbq-form-field-state($state-name) {
    .kbq-form-field__container {
        border-color: var(--kbq-form-field-#{$state-name}-border-color);
        background-color: var(--kbq-form-field-#{$state-name}-background);
    }

    .kbq-input,
    .kbq-tag-input,
    .kbq-textarea {
        color: var(--kbq-form-field-#{$state-name}-text);

        &::placeholder {
            color: var(--kbq-form-field-#{$state-name}-placeholder);
        }

        &::-ms-input-placeholder {
            color: var(--kbq-form-field-#{$state-name}-placeholder);
        }

        &::-webkit-input-placeholder {
            color: var(--kbq-form-field-#{$state-name}-placeholder);
        }
    }
}

@mixin kbq-form-field-theme() {
    .kbq-form-field {
        @include _kbq-form-field-state(default);

        & .kbq-input,
        & .kbq-tag-input {
            //https://css-tricks.com/almanac/selectors/a/autofill/
            &:-webkit-autofill,
            &:-webkit-autofill:hover,
            &:-webkit-autofill:focus {
                // set as transparent to not override container background-color;
                --kbq-form-field-states-autofill-background: var(--kbq-background-transparent);
                -webkit-box-shadow: inset 0 0 0 40rem var(--kbq-form-field-states-autofill-background);
                -webkit-text-fill-color: var(--kbq-form-field-states-autofill-text);
                caret-color: var(--kbq-form-field-states-autofill-text);

                /* hide browser default autofill background, no matter what background color set */
                transition: background-color 5000s ease-in-out;
                background-color: var(--kbq-background-transparent) !important;
            }
        }

        // Invalid by control `ErrorStateMatcher`
        &.kbq-form-field_invalid,
        // Invalid by `KbqValidateDirective`
        &.kbq-form-field_has-validate-directive.ng-invalid {
            @include _kbq-form-field-state(states-error);
        }

        &.kbq-form-field-type-input,
        &.kbq-form-field-type-textarea,
        &.kbq-form-field-type-timepicker,
        &.kbq-form-field-type-datepicker,
        &.kbq-form-field-type-input-password,
        &.kbq-form-field-type-tag-list,
        &.kbq-form-field-type-select {
            &:not(:has(.cdk-keyboard-focused, .kbq-focused)) {
                &.cdk-focused {
                    @include _kbq-form-field-state(states-focused);

                    & .kbq-form-field__container {
                        box-shadow: inset 0 0 0.1px var(--kbq-form-field-size-focus-outline-width)
                            var(--kbq-form-field-states-focused-focus-outline);
                    }
                }

                // Invalid by control `ErrorStateMatcher`
                &.kbq-form-field_invalid,
                // Invalid by `KbqValidateDirective`
                &.kbq-form-field_has-validate-directive.ng-invalid {
                    @include _kbq-form-field-state(states-error);

                    &.cdk-focused .kbq-form-field__container {
                        box-shadow: inset 0 0 0.1px var(--kbq-form-field-size-focus-outline-width)
                            var(--kbq-form-field-states-error-focused-focus-outline);
                    }

                    & .kbq-icon.kbq-empty {
                        color: var(--kbq-form-field-states-error-text);
                        -webkit-text-fill-color: var(--kbq-form-field-states-error-text);
                    }
                }
            }
        }

        .kbq-form-field__label {
            color: var(--kbq-form-field-label-color);
        }

        // todo quick fix for bug DS-4060. Technical debt DS-4096
        & .kbq-form-field__container:has(:is(.kbq-input, .kbq-tag-input):-webkit-autofill),
        & .kbq-form-field__container:has(:is(.kbq-input, .kbq-tag-input):-webkit-autofill:hover),
        & .kbq-form-field__container:has(:is(.kbq-input, .kbq-tag-input):-webkit-autofill:focus) {
            background-color: var(--kbq-form-field-states-autofill-background) !important;
        }

        &.kbq-disabled {
            @include _kbq-form-field-state(states-disabled);

            .kbq-icon.kbq-empty {
                color: var(--kbq-form-field-states-disabled-text);
                -webkit-text-fill-color: var(--kbq-form-field-states-disabled-text);
            }
        }

        .kbq-form-field__prefix,
        .kbq-form-field__suffix {
            .kbq-icon.kbq-empty {
                color: var(--kbq-icon-contrast-fade);
            }
        }

        .kbq-form-field__hint {
            @include kbq-form-field-hint-theme();
        }
    }
}

@mixin kbq-form-field-typography() {
    .kbq-form-field {
        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);

        .kbq-form-field__hint {
            @include kbq-form-field-hint-typography();
        }
    }
}