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

@mixin kbq-navbar-item($state-name) {
    &:not(.kbq-navbar-item_has-nested) {
        &:after {
            display: block;
            background: var(--kbq-navbar-item-#{$state-name}-content-background);
        }
    }

    .kbq-navbar-title {
        color: var(--kbq-navbar-item-#{$state-name}-content-text);
    }

    & > .kbq-icon.kbq-empty {
        color: var(--kbq-navbar-item-#{$state-name}-content-icon-left) !important;
    }
}

button {
    &.kbq-navbar-item,
    &.kbq-navbar-brand {
        background: transparent;
        border: none;
    }
}

@mixin kbq-navbar-theme() {
    .kbq-navbar {
        background-color: var(--kbq-navbar-background);
    }

    .kbq-vertical-navbar .kbq-vertical-navbar__container {
        background-color: var(--kbq-navbar-vertical-background);
        border-right: 1px solid var(--kbq-navbar-border);
    }

    .kbq-navbar-item {
        cursor: pointer;

        @include kbq-navbar-item(default);

        &.kbq-hovered:not(.kbq-disabled),
        &:hover:not(.kbq-disabled) {
            @include kbq-navbar-item(states-hover);
        }

        &.cdk-focused.cdk-keyboard-focused {
            outline: none;

            &:after {
                display: block;
                box-shadow: inset 0 0 0 2px var(--kbq-states-line-focus-theme);
            }
        }

        &:active:not(.kbq-disabled),
        &.kbq-active:not(.kbq-disabled) {
            @include kbq-navbar-item(states-selected);
        }

        &.kbq-navbar-focusable-item {
            outline: none;
        }

        &.kbq-disabled {
            @include kbq-navbar-item(states-disabled);

            pointer-events: none;
            cursor: default;
        }
    }

    .kbq-navbar-divider {
        background: var(--kbq-line-contrast-less);
    }
}

@mixin kbq-navbar-typography() {
    .kbq-navbar-title {
        @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
    }
}