/*
A26 Web Design System — Menu Surfaces
Version: v1.0.0-alpha.0013-menu-controls
*/

@layer a26.components {
  .a26-menu-anchor { position: relative; display: inline-flex; }

  .a26-menu {
    min-width: var(--a26-menu-min-width);
    max-width: min(320px, calc(100vw - 32px));
    padding: var(--a26-menu-padding-y) 0;
    border-radius: var(--a26-menu-radius);
    background: var(--a26-menu-bg);
    border: 1px solid var(--a26-menu-border);
    box-shadow: var(--a26-menu-shadow);
    backdrop-filter: var(--a26-menu-blur);
    -webkit-backdrop-filter: var(--a26-menu-blur);
    color: var(--a26-text-primary);
    z-index: 40;
  }

  .a26-menu[hidden] { display: none; }

  .a26-menu[data-placement="bottom-start"] {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-start: 0;
  }

  .a26-menu[data-placement="bottom-end"] {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
  }

  .a26-menu__section { padding: 4px 0; }
  .a26-menu__section + .a26-menu__section { border-top: 1px solid var(--a26-menu-separator); }

  .a26-menu__item {
    width: 100%;
    min-height: var(--a26-menu-item-height);
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--a26-space-2);
    padding: 0 var(--a26-menu-item-padding-x);
    border: 0;
    background: transparent;
    color: var(--a26-text-primary);
    text-align: start;
    font: var(--a26-font-callout);
    cursor: pointer;
  }

  .a26-menu__item:hover,
  .a26-menu__item:focus-visible {
    background: var(--a26-menu-item-hover-bg);
    outline: none;
  }

  .a26-menu__item[data-state="active"] {
    background: var(--a26-accent);
    color: #ffffff;
    outline: none;
  }

  .a26-menu__item[data-state="active"] .a26-menu__icon,
  .a26-menu__item[data-state="active"] .a26-menu__check,
  .a26-menu__item[data-state="active"] .a26-menu__shortcut {
    color: #ffffff;
  }

  .a26-menu__item[aria-checked="true"] .a26-menu__check { opacity: 1; }
  .a26-menu__check { opacity: 0; color: var(--a26-accent); }
  .a26-menu__icon { color: var(--a26-text-secondary); }
  .a26-menu__shortcut { color: var(--a26-text-tertiary); font: var(--a26-font-footnote); }
  .a26-menu__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .a26-menu__item[data-role="destructive"] { color: var(--a26-status-danger); }
  .a26-menu__item[data-role="destructive"] .a26-menu__icon,
  .a26-menu__item[data-role="destructive"] .a26-menu__check { color: var(--a26-status-danger); }

  .a26-menu__item[disabled],
  .a26-menu__item[aria-disabled="true"] {
    opacity: .42;
    cursor: default;
    pointer-events: none;
  }

  .a26-menu__title {
    padding: 6px var(--a26-menu-item-padding-x) 4px;
    color: var(--a26-text-secondary);
    font: var(--a26-font-caption-1);
  }
}