/* Menubar mapping. ui-viz has no Menubar spec, so these are current HM values built from the HM Semantic tokens. A desktop menu bar:
   a bordered bar of text triggers whose open / focused trigger is highlighted, and menu content with the same item states as
   other Radix menus. Radix state attributes (data-highlighted, data-disabled, data-state) drive the states; no HM state attributes.
   No --hm-dropdown-menu-* token is referenced. */
:root, [data-hm-theme] {
  /* Bar */
  --hm-menubar-background: var(--hm-sem-bg-surface);
  --hm-menubar-text: var(--hm-sem-fg-primary);
  --hm-menubar-border-width: 1px;
  --hm-menubar-border-color: var(--hm-sem-stroke-input-default);
  --hm-menubar-radius: var(--hm-radius-container);
  --hm-menubar-height: 38px;
  --hm-menubar-padding: 2px;
  --hm-menubar-gap: 2px;

  /* Top-level trigger */
  --hm-menubar-trigger-padding-x: 12px;
  --hm-menubar-trigger-radius: 2px;
  --hm-menubar-trigger-font-size: 14px;
  --hm-menubar-trigger-line-height: 20px;
  --hm-menubar-trigger-font-weight: 500;

  /* Content */
  --hm-menubar-content-background: var(--hm-sem-floating-background);
  --hm-menubar-content-border-width: var(--hm-sem-floating-border-width);
  --hm-menubar-content-border-color: var(--hm-sem-floating-border-color);
  --hm-menubar-content-radius: var(--hm-sem-floating-radius);
  --hm-menubar-content-shadow: var(--hm-sem-floating-shadow);
  --hm-menubar-content-padding: 4px;

  --hm-menubar-item-height: 36px;
  --hm-menubar-item-padding-x: 12px;
  --hm-menubar-item-gap: 8px;
  --hm-menubar-item-radius: 2px;
  --hm-menubar-font-size: 14px;
  --hm-menubar-line-height: 20px;

  --hm-menubar-highlight-background: var(--hm-sem-surface-highlight);
  /* Top-level trigger highlight/open keeps the full accent; keyboard focus adds a separate ring. */
  --hm-menubar-trigger-highlight-background: var(--accent);
  --hm-menubar-highlight-text: var(--accent-foreground);
  --hm-menubar-destructive-text: var(--hm-sem-action-destructive);
  --hm-menubar-destructive-highlight-background: var(--hm-color-action-destructive-hover);

  --hm-menubar-label-color: var(--hm-sem-fg-secondary);
  --hm-menubar-label-font-size: 12px;
  --hm-menubar-label-line-height: 18px;
  --hm-menubar-label-font-weight: 500;
  --hm-menubar-shortcut-color: var(--hm-sem-fg-secondary);
  --hm-menubar-shortcut-font-size: 12px;
  --hm-menubar-separator-color: var(--hm-sem-stroke-input-default);
  --hm-menubar-indicator-size: 16px;
  --hm-menubar-radio-dot-size: 8px;
}

[data-slot="menubar"] {
  box-sizing: border-box;
  width: fit-content;
  height: var(--hm-menubar-height);
  gap: var(--hm-menubar-gap);
  padding: var(--hm-menubar-padding);
  border: var(--hm-menubar-border-width) solid var(--hm-menubar-border-color);
  border-radius: var(--hm-menubar-radius);
  background: var(--hm-menubar-background);
  color: var(--hm-menubar-text);
}
[data-slot="menubar-trigger"] {
  box-sizing: border-box;
  height: 100%;
  padding: 0 var(--hm-menubar-trigger-padding-x);
  border-radius: var(--hm-menubar-trigger-radius);
  font-size: var(--hm-menubar-trigger-font-size);
  line-height: var(--hm-menubar-trigger-line-height);
  font-weight: var(--hm-menubar-trigger-font-weight);
  cursor: default;
}
/* Radix sets data-highlighted on the focused top-level trigger and data-state="open" on the open one. */
[data-slot="menubar-trigger"][data-highlighted],
[data-slot="menubar-trigger"][data-state="open"] {
  background: var(--hm-menubar-trigger-highlight-background);
  color: var(--hm-menubar-highlight-text);
}
[data-slot="menubar-trigger"]:focus-visible:not([data-disabled]) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}
[data-slot="menubar-trigger"][data-disabled] {
  opacity: 0.6;
}

[data-slot="menubar-content"],
[data-slot="menubar-sub-content"] {
  box-sizing: border-box;
  padding: var(--hm-menubar-content-padding);
  border: var(--hm-menubar-content-border-width) solid var(--hm-menubar-content-border-color);
  border-radius: var(--hm-menubar-content-radius);
  background: var(--hm-menubar-content-background);
  color: var(--hm-menubar-text);
  box-shadow: var(--hm-menubar-content-shadow);
  font-size: var(--hm-menubar-font-size);
  line-height: var(--hm-menubar-line-height);
  font-weight: 400;
}

[data-slot="menubar-item"],
[data-slot="menubar-checkbox-item"],
[data-slot="menubar-radio-item"],
[data-slot="menubar-sub-trigger"] {
  box-sizing: border-box;
  min-height: var(--hm-menubar-item-height);
  gap: var(--hm-menubar-item-gap);
  padding: 0 var(--hm-menubar-item-padding-x);
  border-radius: var(--hm-menubar-item-radius);
}
[data-slot="menubar-checkbox-item"],
[data-slot="menubar-radio-item"],
[data-slot="menubar-item"][data-inset],
[data-slot="menubar-sub-trigger"][data-inset] {
  padding-left: calc(var(--hm-menubar-item-padding-x) + var(--hm-menubar-indicator-size) + var(--hm-menubar-item-gap));
}
[data-slot="menubar-item-indicator"] {
  left: var(--hm-menubar-item-padding-x);
  width: var(--hm-menubar-indicator-size);
  height: var(--hm-menubar-indicator-size);
}
[data-slot="menubar-radio-dot"] {
  width: var(--hm-menubar-radio-dot-size);
  height: var(--hm-menubar-radio-dot-size);
}

[data-slot="menubar-item"][data-highlighted],
[data-slot="menubar-checkbox-item"][data-highlighted],
[data-slot="menubar-radio-item"][data-highlighted],
[data-slot="menubar-sub-trigger"][data-highlighted],
[data-slot="menubar-sub-trigger"][data-state="open"] {
  background: var(--hm-menubar-highlight-background);
  color: var(--hm-menubar-highlight-text);
}
[data-slot="menubar-item"][data-variant="destructive"] {
  color: var(--hm-menubar-destructive-text);
}
[data-slot="menubar-item"][data-variant="destructive"][data-highlighted] {
  background: var(--hm-menubar-destructive-highlight-background);
  color: var(--hm-menubar-destructive-text);
}

[data-slot="menubar-label"] {
  padding: 6px var(--hm-menubar-item-padding-x);
  color: var(--hm-menubar-label-color);
  font-size: var(--hm-menubar-label-font-size);
  line-height: var(--hm-menubar-label-line-height);
  font-weight: var(--hm-menubar-label-font-weight);
}
[data-slot="menubar-label"][data-inset] {
  padding-left: calc(var(--hm-menubar-item-padding-x) + var(--hm-menubar-indicator-size) + var(--hm-menubar-item-gap));
}
[data-slot="menubar-separator"] {
  margin: var(--hm-menubar-content-padding) calc(-1 * var(--hm-menubar-content-padding));
  background: var(--hm-menubar-separator-color);
}
[data-slot="menubar-shortcut"] {
  color: var(--hm-menubar-shortcut-color);
  font-size: var(--hm-menubar-shortcut-font-size);
  letter-spacing: 0.05em;
}
[data-slot="menubar-item"][data-highlighted] [data-slot="menubar-shortcut"],
[data-slot="menubar-checkbox-item"][data-highlighted] [data-slot="menubar-shortcut"],
[data-slot="menubar-radio-item"][data-highlighted] [data-slot="menubar-shortcut"] {
  color: inherit;
}