@use '~flux/components/css/mixin';

.menu {
    display: flex;
    flex-flow: column;
}

.menuNormal {
    composes: menu;

    gap: 6px;
}

.menuLarge {
    composes: menu;

    gap: 9px;
}

.menuGroup {
    counter-reset: menu-group;
}

.menuGroupHorizontal {
    composes: menuGroup;

    display: flex;
    gap: 3px;
}

.menuGroupVertical {
    composes: menuGroup;

    display: flex;
    flex-flow: column;
    gap: 1px;
}

.menuPane {
    display: flex;
    flex-flow: column;
    gap: 9px;
    padding: 9px;
}

.menuItem {
    composes: button from './base/Button.module.scss';

    height: unset;
    min-height: 42px;
    gap: 15px;
    justify-content: flex-start;
    border: 0;
    box-shadow: none;
    color: var(--foreground);
    text-align: left;
    transition-duration: 0s;

    @include mixin.hover {
        background: var(--gray-100);
    }

    &:active {
        background: var(--gray-200);
    }

    :local(.badge):last-child {
        margin-right: -6px;
    }
}

.menuItemIcon {
    composes: buttonIcon from './base/Button.module.scss';
}

.menuItemLabel {
    composes: buttonLabel from './base/Button.module.scss';

    flex-grow: 1;
    font-weight: 400;
    text-align: left;

    &:only-child {
        margin-left: 0;
        margin-right: 0;
        min-width: unset;
    }
}

.menuItemActive {
    background: var(--primary-600);
    color: var(--primary-50);

    .menuItemIcon {
        color: var(--primary-25);
    }

    @include mixin.hover {
        background: var(--primary-600);
    }

    &:active {
        background: var(--primary-600);
    }
}

.menuItemDestructive {
    .menuItemIcon {
        color: var(--danger-700);
    }

    .menuItemLabel {
        color: var(--danger-700);
    }
}

.menuItemHighlighted {
    background: var(--primary-100);
    color: var(--primary-600);

    .menuItemIcon {
        color: var(--primary-700);
    }

    @include mixin.hover {
        background: var(--primary-100);
    }

    &:active {
        background: var(--primary-100);
    }

    :local(.badge) {
        --surface-stroke: var(--primary-200);
    }
}

.menuItemIndented {
    margin-left: 33px;
}

.menuConeActive .menuItem {
    pointer-events: none;
}

.menuCollapsible {
    display: flex;
    flex-flow: column;
}

.menuCollapsibleOpened {
    composes: menuCollapsible;
}

.menuCollapsibleBody {
    position: relative;
    min-height: 0;
    transition: height 300ms var(--swift-out), opacity 200ms var(--swift-out);

    &::before {
        content: '';
        position: absolute;
        top: 3px;
        bottom: 3px;
        left: 21px;
        width: 2px;
        background: var(--surface-stroke);
    }

    &:global(.v-enter-from),
    &:global(.v-leave-to) {
        opacity: 0;
    }

    &:global(.v-enter-to),
    &:global(.v-leave-from) {
        opacity: 1;
    }

    &:global(.v-enter-active),
    &:global(.v-leave-active) {
        overflow: hidden;
    }
}

.menuCollapsibleContent {
    display: flex;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 35px;
    flex-flow: column;
    gap: 3px;
}

.menuItemSelectableIcon {
    composes: buttonIcon from './base/Button.module.scss';
}

.menuItemSelected .menuItemSelectableIcon {
    color: var(--primary-600);
}

.menuItemCommand {
    @include mixin.text(small);

    margin-top: 1px;
    margin-left: auto;
    padding-left: 6px;
    color: var(--foreground-secondary);
    font-family: inherit;
    white-space: nowrap;
}

.menuItemCommandIcon {
    margin-right: -6px;
    color: var(--foreground-secondary);

    &.icon {
        font-size: 16px;
    }
}

.menuItemCommand + .menuItemCommandIcon {
    margin-left: -9px;
}

.menuItemActive .menuItemCommand,
.menuItemActive .menuItemCommandIcon {
    color: var(--primary-300);
}

.menuItemImage {
    margin-left: -2px;
    margin-right: -2px;
    height: 24px;
    width: 24px;
    border-radius: 3px;
}

.menuItem :local(.avatar) {
    margin: -3px;
    font-size: 24px;
}

.menuGroupHorizontal .menuItem {
    flex-basis: 0;
    flex-grow: 1;

    &:has(.menuItemIcon:only-child) {
        justify-content: center;
    }
}

.menuTitle {
    @include mixin.text(xlarge);

    padding: 0 12px;
    color: var(--foreground-prominent);
    font-weight: 700;
}

.menuSubHeader {
    position: sticky;
    display: flex;
    top: 0;
    margin-top: -9px;
    margin-bottom: -3px;
    padding: 12px 12px 6px;
    align-items: center;
    gap: 9px;
    background: linear-gradient(to bottom, var(--surface) 75%, transparent);
    pointer-events: none;
    z-index: 1;
}

.menuSubHeaderIcon,
.menuSubHeaderLabel {
    color: var(--foreground-secondary);
}

.menuSubHeaderIcon {
    font-size: 16px;
}

.menuSubHeaderLabel {
    @include mixin.text(small);

    flex-grow: 1;
}

.menuItem + .menuSubHeader {
    margin-top: 9px;
}

.menuLarge .menuItem {
    position: relative;
    padding-left: 15px;
    padding-right: 15px;

    &::after {
        position: absolute;
        display: block;
        top: 12px;
        right: 12px;
        bottom: 12px;
        width: 4px;
        content: '';
        background: var(--primary-600);
        border-radius: var(--radius-full);
        opacity: 0;
        transition: opacity var(--transition-default);
    }
}

.menuLarge .menuItem:not(.menuItemIndented) {
    min-height: 48px;

    &::after {
        background: var(--primary-25);
    }
}

.menuLarge .menuItemActive {
    &::after {
        opacity: 1;
    }

    &.menuItemIndented {
        background: var(--gray-100);

        .menuItemIcon,
        .menuItemLabel {
            color: var(--foreground-prominent);
        }
    }
}

.basePane > .menu {
    margin-left: 9px;
    margin-right: 9px;

    &:first-child {
        margin-top: 9px;
    }

    &:last-child {
        margin-bottom: 9px;
    }

    > :where(.divider, .separator) {
        margin: 3px -9px;
    }
}

.expandableBody > .menu {
    margin-left: 9px;
    margin-right: 9px;

    &:last-child {
        margin-bottom: 9px;
    }

    > :where(.divider, .separator) {
        margin-left: 18px;
        margin-right: 18px;
    }
}