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

// Targets the layout container: either the root or custom view if present.
@mixin _kbq-username-content-wrapper {
    &:not(:has(> .kbq-username__custom-view)),
    & > .kbq-username__custom-view {
        @content;
    }
}

@mixin _kbq-username-theme() {
    & {
        color: var(--kbq-username-primary-color);

        .kbq-username__secondary,
        .kbq-username__secondary-hint {
            color: var(--kbq-username-secondary-color);
        }
    }

    &.kbq-username_default {
        .kbq-username__secondary-hint,
        .kbq-username__primary + .kbq-username__secondary {
            --kbq-username-secondary-color: var(--kbq-foreground-contrast-secondary);
        }
    }

    &.kbq-username_error {
        --kbq-username-primary-color: var(--kbq-foreground-error);
        --kbq-username-secondary-color: var(--kbq-foreground-error);
    }

    &.kbq-username_accented {
        --kbq-username-primary-color: var(--kbq-foreground-contrast);
        --kbq-username-secondary-color: var(--kbq-foreground-contrast);
    }

    &.kbq-username_inherit {
        --kbq-username-primary-color: inherit;
        --kbq-username-secondary-color: inherit;
    }
}

@mixin _kbq-username-typography() {
    & {
        @include tokens.kbq-typography-level-to-styles_css-variables(typography, text-normal);
    }

    &.kbq-username_accented {
        .kbq-username__primary {
            @include tokens.kbq-typography-level-to-styles_css-variables(typography, text-normal-strong);
        }
    }
}

.kbq-username {
    @include _kbq-username-theme();
    @include _kbq-username-typography();

    &.kbq-username_stacked {
        @include _kbq-username-content-wrapper {
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
            align-items: normal;

            gap: var(--kbq-username-vertical-gap);
        }
    }

    &.kbq-username_inline:not(.kbq-username_inherit) {
        @include _kbq-username-content-wrapper {
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: baseline;

            .kbq-username__primary + .kbq-username__secondary {
                @include common.rtl-prop(margin-left, margin-right, var(--kbq-username-horizontal-gap), 0);
            }
        }
    }

    &.kbq-username_text {
        @include _kbq-username-content-wrapper {
            display: inline;
        }
    }

    &.kbq-username_stacked,
    &.kbq-username_inline {
        @include _kbq-username-content-wrapper {
            .kbq-username__primary,
            .kbq-username__secondary {
                @include common.kbq-truncate-line();
            }
        }
    }

    &.kbq-username_inherit {
        @include _kbq-username-content-wrapper {
            font: inherit;
            display: inherit;
        }
    }
}