@use '../core/forms/forms';
@use './form-field-theme' as theme;

@mixin kbq-form-field-hint-geometry {
    display: flex;
    flex-direction: column;
    gap: var(--kbq-form-field-hint-size-gap);
    margin-top: var(--kbq-form-field-hint-size-margin-top);

    &:has(.kbq-reactive-password-hint, .kbq-password-hint) {
        --kbq-form-field-hint-size-gap: var(--kbq-size-s);
    }

    &:has(:is(.kbq-reactive-password-hint, .kbq-password-hint):first-child) {
        --kbq-form-field-hint-size-margin-top: var(--kbq-size-m);
    }
}

.kbq-form-field {
    --kbq-form-field-label-margin-bottom: var(--kbq-size-xs);

    position: relative;
    display: inline-block;
    width: 100%;

    &.kbq-form-field_horizontal {
        display: flex;
        flex-direction: row;
        align-items: flex-start;

        .kbq-form-field__label {
            --kbq-form-field-label-margin-bottom: 0;

            padding: var(--kbq-size-xs) var(--kbq-size-l) 0 0;
        }
    }

    .kbq-form-field__content {
        flex: 1;
    }

    .kbq-form-field__label {
        box-sizing: border-box;
        display: flex;
        margin-bottom: var(--kbq-form-field-label-margin-bottom);
    }

    // We should override suffix spacing for select type, because it has custom suffix
    &.kbq-form-field-type-select .kbq-form-field__suffix {
        margin-right: 0;
    }

    .kbq-form-field__container {
        box-sizing: border-box;

        display: flex;
        justify-content: space-between;
        align-items: center;

        border-width: var(--kbq-form-field-size-border-width);
        border-style: solid;
        border-color: transparent;
        border-radius: var(--kbq-form-field-size-border-radius);

        padding-left: var(--kbq-form-field-size-container-left-padding);
        padding-right: var(--kbq-form-field-size-container-right-padding);

        &:has(.kbq-textarea) {
            --kbq-form-field-size-container-left-padding: 0;
            --kbq-form-field-size-container-right-padding: 0;
        }
    }

    .kbq-form-field:not(.kbq-form-field-type-textarea) {
        height: var(--kbq-form-field-size-height);
    }

    .kbq-form-field__infix {
        box-sizing: border-box;

        width: 100%;
        flex-grow: 1;

        padding-left: var(--kbq-form-field-size-infix-left-padding);

        &:has(.kbq-select_multiple, .kbq-select_multiline):not(:has(.kbq-select__trigger_empty)),
        &:has(.kbq-tag-list),
        &:has(.kbq-textarea) {
            padding-left: 0;

            max-width: 100%;
        }

        & .kbq-input,
        & .kbq-tag-input {
            padding-right: var(--kbq-form-field-size-infix-right-padding);
        }
    }

    &,
    .kbq-textarea {
        border-radius: var(--kbq-form-field-size-border-radius);
    }

    &:hover {
        z-index: 1;
    }

    &.cdk-focused,
    &.kbq-focused {
        z-index: 3;

        .kbq-input {
            &:-webkit-autofill,
            &:-webkit-autofill:hover,
            &:-webkit-autofill:focus {
                min-height: calc(
                    var(--kbq-form-field-size-height) - var(--kbq-form-field-size-border-width) *
                        2 - var(--kbq-form-field-size-focus-outline-width) * 2
                );

                --kbq-input-size-padding-vertical: calc(
                    var(--kbq-size-xs) - var(--kbq-form-field-size-border-width) - var(
                            --kbq-form-field-size-focus-outline-width
                        )
                );

                margin: var(--kbq-form-field-size-border-width) 0;
            }
        }
    }

    &.kbq-form-field_without-borders .kbq-form-field__container,
    &.kbq-form-field_no-borders .kbq-form-field__container {
        border-color: transparent !important;
        box-shadow: none !important;
    }

    &.kbq-form-field_in-overlay .kbq-form-field__container {
        background-color: var(--kbq-background-card) !important;
    }

    & + .kbq-password-hint {
        margin-top: var(--kbq-size-m);
    }

    .kbq-form-field__prefix,
    .kbq-form-field__suffix {
        display: flex;
        justify-content: center;
        align-items: center;

        & .kbq-prefix,
        & .kbq-suffix {
            min-width: var(--kbq-form-field-size-addon-width);
            text-align: center;
        }
    }

    .kbq-form-field__prefix {
        & + .kbq-form-field__infix {
            padding-left: 0;
        }
    }

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

@include theme.kbq-form-field-theme();
@include theme.kbq-form-field-typography();