/*
 * NV-07 Dropdown menu — app/components/ui/dropdown_menu_component.rb
 *
 * CN-06 popover shell (open/flip/dismiss visuals live in popover.css via
 * the shared .ui-popover-style open/flip states — this component drives
 * its own instead since it isn't a Ui::PopoverComponent, just built on
 * the same popover_controller.js). 40px items at --radius-md, hairline
 * group separators, destructive items in --color-danger-ink. Token vars
 * only — enforced by test/lint/css_token_lint_test.rb.
 */

.ui-dropdown-menu {
  display: inline-flex;
  position: relative;
}

/* Entrance (opacity/transform/transition) is shared — see popover.css. */
.ui-dropdown-menu__panel {
  position: fixed;
  z-index: var(--z-popover);
  min-width: 200px;
  background: var(--color-surface-solid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-1);
}

.ui-dropdown-menu.is-open .ui-dropdown-menu__panel {
  opacity: 1;
  transform: translateY(0);
}

.ui-dropdown-menu.is-flipped .ui-dropdown-menu__panel {
  transform: translateY(4px);
}

.ui-dropdown-menu.is-open.is-flipped .ui-dropdown-menu__panel {
  transform: translateY(0);
}

.ui-dropdown-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: var(--space-10);
  padding-inline: var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ui-dropdown-menu__item:hover,
.ui-dropdown-menu__item:focus-visible {
  background: var(--color-surface-inset);
}

.ui-dropdown-menu__item:focus-visible {
  outline: none;
  box-shadow: var(--focus-halo);
}

/* NV-07 specifies 40px; §4.3 requires a 44px touch-target floor — resolved
   via any-pointer media query. Desktop pointer contexts keep the 40px
   item height above; coarse (touch) pointers get the --tap-min floor. */
@media (any-pointer: coarse) {
  .ui-dropdown-menu__item {
    min-height: var(--tap-min);
  }
}

.ui-dropdown-menu__item--destructive {
  color: var(--color-danger-ink);
}

.ui-dropdown-menu__item--disabled {
  color: var(--color-ink-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.ui-dropdown-menu__icon {
  flex-shrink: 0;
}

.ui-dropdown-menu__label {
  flex: 1;
  min-width: 0;
}

.ui-dropdown-menu__separator {
  height: 1px;
  margin-block: var(--space-1);
  background: var(--color-border);
}