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

@use './navbar-theme' as *;

.kbq-vertical-navbar {
    display: flex;
    flex-shrink: 0;

    position: relative;

    min-width: var(--kbq-size-6xl);
    height: 100%;

    &:not(:hover, .kbq-hovered, .cdk-keyboard-focused) .kbq-navbar-toggle {
        display: none;
    }

    & .kbq-navbar-container {
        flex-direction: column;
        align-items: unset;
    }

    & .kbq-navbar-container + .kbq-navbar-container {
        padding-top: var(--kbq-size-xxl);
        padding-bottom: var(--kbq-size-s);
    }

    & .kbq-vertical-navbar__container {
        position: relative;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;

        &.kbq-collapsed {
            width: var(--kbq-size-6xl);
        }

        &.kbq-expanded {
            width: 240px;
        }
    }

    &.kbq-vertical-navbar_open-over .kbq-vertical-navbar__container {
        position: absolute;
        z-index: 998;
    }
}

@include kbq-navbar-theme();
@include kbq-navbar-typography();