/*
  A menu in the new design: frosted panel, 30px rows, the row under the pointer or the focus filled
  blue. Drawn from the `--ds-*` tokens, which every page has, so a menu looks the same on a
  redesigned page, an old one or the canvas. The font is the page's.

  The panel is placed by the logic with `position: fixed`, in the top layer where popovers exist.
  Hidden unless the element is `[open]`: a popover's own hiding is the browser's lowest-priority
  rule, and any `display` here would otherwise show a closed one.
*/

atomics-menu {
  position: relative;
  display: inline-flex;
}

atomics-menu [role='menu'] {
  display: none;
}

atomics-menu[open] [role='menu'] {
  position: fixed;
  inset: auto;
  z-index: 10003;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-sizing: border-box;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 16px));
  margin: 0;
  padding: 5px;
  overflow: auto;
  border: 0;
  border-radius: var(--ds-r-menu, 12px);
  background: var(--ds-popover, rgba(255, 255, 255, 0.96));
  color: var(--ds-ink, #1d1d1f);
  box-shadow: var(--ds-shadow-pop, 0 18px 40px rgba(0, 0, 0, 0.18));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  font-size: 13.5px;
  line-height: 1.3;
  animation: atomics-menu-in 140ms var(--ds-ease-pop, ease) both;
}

atomics-menu[open] [role='menu'][above] {
  animation-name: atomics-menu-in-above;
}

@keyframes atomics-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

@keyframes atomics-menu-in-above {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
}

/* Every property, because app.css styles bare buttons and a menu row is one. */
atomics-menu [role='menu'] [role^='menuitem'] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: 30px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 500;
  letter-spacing: normal;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: none;
  outline: none;
}

atomics-menu [role='menu'] [role^='menuitem']:is(:hover, :focus-visible) {
  background: var(--ds-accent, #2f6bff);
  color: var(--ds-on-accent, #ffffff);
}

atomics-menu [role='menu'] [role^='menuitem'][danger] {
  color: var(--ds-danger, #e2453a);
}

atomics-menu [role='menu'] [role^='menuitem'][danger]:is(:hover, :focus-visible) {
  background: var(--ds-danger, #e2453a);
  color: #ffffff;
}

atomics-menu [role='menu'] [role^='menuitem']:is([disabled], [aria-disabled='true']) {
  opacity: 0.4;
  background: transparent;
  color: inherit;
  cursor: default;
}

atomics-menu [role='menu'] [role^='menuitem'][aria-checked='true']::after {
  content: '';
  width: 14px;
  height: 14px;
  margin-left: auto;
  background: currentColor;
  -webkit-mask: url('/assets/svg/ds-check.svg') center / contain no-repeat;
  mask: url('/assets/svg/ds-check.svg') center / contain no-repeat;
}

/* A shortcut, or anything else set to the right of the label. */
atomics-menu [role='menu'] [role^='menuitem'] :is(kbd, [aside]) {
  margin-left: auto;
  padding-left: 16px;
  font-family: inherit;
  font-size: 12px;
  opacity: 0.6;
}

atomics-menu [role='menu'] :is(hr, [role='separator']) {
  flex: 0 0 auto;
  height: 1px;
  margin: 4px 6px;
  border: 0;
  background: var(--ds-line, rgba(0, 0, 0, 0.09));
}

atomics-menu [role='menu'] [menu-label] {
  padding: 6px 10px 4px;
  color: var(--ds-mute, #6e6e73);
  font-size: 12px;
  font-weight: 600;
}