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

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

.kbq-navbar-item.kbq-horizontal {
    position: relative;

    flex-direction: row;

    box-sizing: border-box;

    outline: none;
    -webkit-tap-highlight-color: transparent;

    min-height: var(--kbq-size-3xl);
    min-width: var(--kbq-size-3xl);

    margin: var(--kbq-size-s);

    justify-content: center;

    &:before {
        top: calc(-1 * #{var(--kbq-size-s)});
        left: calc(-1 * #{var(--kbq-size-s)});
        right: calc(-1 * #{var(--kbq-size-s)});
        bottom: calc(-1 * #{var(--kbq-size-s)});
    }

    &:after {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    & .kbq-navbar-item__title {
        padding-left: var(--kbq-size-xxs);
        padding-right: var(--kbq-size-xxs);
    }

    & .kbq-navbar-item__arrow-icon {
        padding-left: var(--kbq-size-xxs);
    }

    &.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed) {
        margin-left: 0;
        margin-right: 0;
        padding-right: var(--kbq-size-m);
        padding-left: var(--kbq-size-m);

        &:before {
            left: 0;
            right: 0;
        }

        & > .kbq-icon {
            align-self: center;

            padding-right: var(--kbq-size-xxs);
        }
    }

    &.kbq-navbar-bento {
        justify-content: center;

        margin-right: var(--kbq-size-xxs);

        &:before {
            right: calc(-1 * #{var(--kbq-size-xxs)});
        }
    }

    &.kbq-navbar-item_collapsed {
        justify-content: center;

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

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

    .kbq-badge {
        position: absolute;

        z-index: 1;

        top: -2px;
        right: -2px;
    }

    &.kbq-navbar-item_has-nested {
        margin-left: var(--kbq-size-m);
        margin-right: var(--kbq-size-m);

        &:before {
            left: calc(-1 * #{var(--kbq-size-m)});
            right: calc(-1 * #{var(--kbq-size-m)});
        }
    }
}