packages/ui/src/v2/components/menu-v2.css

/* Above modal dialogs (z-index 50); matches select-v2-content. */
[data-popper-positioner]:has([data-component="menu-v2-content"]) {
  z-index: 60;
}

[data-component="menu-v2-content"] {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2px;
  min-width: 160px;
  z-index: 60;
  pointer-events: auto;

  background: var(--v2-background-bg-layer-01);
  border-radius: 6px;
  box-shadow: var(--v2-elevation-floating);

  outline: none;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;

  transform-origin: var(--kb-menu-content-transform-origin);
  animation: menu-v2-in 120ms ease-out;

  &:focus-visible {
    outline: none;
  }
}

[data-component="menu-v2-item"] {
  --menu-v2-fg: var(--v2-text-text-base);
  --menu-v2-fg-muted: var(--v2-text-text-faint);
  --menu-v2-fg-subtle: var(--v2-text-text-muted);
  --menu-v2-icon: var(--v2-icon-icon-base);
  --menu-v2-accent: var(--v2-text-text-accent);
  --menu-v2-badge-bg: var(--v2-background-bg-layer-02);
  --menu-v2-badge-border: var(--v2-border-border-base);
  --menu-v2-hover: var(--v2-overlay-simple-overlay-hover);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;

  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  background: transparent;
  border-radius: 4px;
  outline: none;
  cursor: default;
  user-select: none;

  font-variation-settings: "slnt" 0;
  font-variant-numeric: tabular-nums;
  color: var(--menu-v2-fg);

  [data-slot="menu-v2-item-content"] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;

    font-size: 13px;
    font-weight: 440;
    line-height: 100%;
    letter-spacing: -0.04px;
    color: var(--menu-v2-fg);
  }

  [data-slot="menu-v2-item-shortcut"] {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 11px;

    font-size: 11px;
    font-weight: 530;
    line-height: 100%;
    letter-spacing: 0.05px;
    color: var(--menu-v2-fg-muted);
    white-space: nowrap;
  }

  [data-slot="menu-v2-item-badge"] {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: none;
    gap: 4px;
    height: 16px;
    padding: 0 4px;

    background: var(--menu-v2-badge-bg);
    border: 0.5px solid var(--menu-v2-badge-border);
    border-radius: 2px;

    font-size: 11px;
    font-weight: 530;
    line-height: 100%;
    letter-spacing: 0.05px;
    color: var(--menu-v2-fg-subtle);
    white-space: nowrap;
  }

  [data-slot="menu-v2-item-indicator"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--menu-v2-icon);
  }

  [data-slot="menu-v2-item-indicator"]:not([data-checked]) > svg {
    visibility: hidden;
  }

  [data-slot="menu-v2-item-chevron"] {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--menu-v2-fg-muted);
  }

  &[data-highlighted] {
    background: var(--menu-v2-hover);
  }

  &[data-checked] [data-slot="menu-v2-item-content"] {
    font-weight: 530;
    color: var(--menu-v2-accent);
  }

  &[data-checked] [data-slot="menu-v2-item-indicator"] {
    color: var(--menu-v2-accent);
  }

  &[data-disabled] {
    pointer-events: none;
    opacity: 0.5;
  }
}

[data-slot="menu-v2-separator"] {
  height: 1px;
  width: calc(100% + 4px);
  margin: 2px -2px;
  background: var(--v2-border-border-muted);
  border: none;
}

[data-slot="menu-v2-group-label"] {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;

  font-size: 11px;
  font-weight: 530;
  line-height: 100%;
  letter-spacing: 0.05px;
  color: var(--v2-text-text-faint);
  user-select: none;
  font-variant-numeric: tabular-nums;
}

@keyframes menu-v2-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}