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

.kbq-navbar-item.kbq-vertical {
    height: 41px;

    & .kbq-navbar-item__container {
        gap: var(--kbq-size-m);
    }

    padding-right: var(--kbq-size-xl);
    padding-left: var(--kbq-size-xl);

    &:after {
        top: 0;
        right: var(--kbq-size-s);
        bottom: 1px;
        left: var(--kbq-size-s);
    }

    &.kbq-navbar-bento {
        display: flex;

        justify-content: start;
        align-items: center;

        height: var(--kbq-size-5xl);

        padding-top: var(--kbq-size-s);

        &:after {
            top: var(--kbq-size-s);
            bottom: 0;
        }

        & + .kbq-navbar-brand.kbq-vertical {
            padding: var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-m);

            &:after {
                top: 0;
            }
        }
    }

    &.kbq-expanded {
        align-items: center;

        gap: var(--kbq-size-m);

        &.kbq-navbar-item_has-nested {
            align-items: center;

            padding: 0 var(--kbq-size-m);
        }

        &.kbq-navbar-bento .kbq-navbar-item__title {
            margin-left: -8px;
            opacity: 0;
        }

        &.kbq-navbar-bento:hover,
        &.kbq-navbar-bento.cdk-keyboard-focused {
            & .kbq-navbar-item__title {
                margin-left: 0;
                opacity: 1;

                transition:
                    opacity 150ms ease-out,
                    margin-left 150ms ease-out;
            }
        }
    }

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

        justify-content: center;

        & .kbq-badge {
            position: absolute;

            z-index: 1;

            top: calc(-1 * var(--kbq-size-3xs));
            right: var(--kbq-size-xs);
        }

        & .kbq-navbar-item__container {
            display: none;
        }
    }

    & > .kbq-icon {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

button.kbq-navbar-item.kbq-vertical {
    width: 100%;
}