/* ==========================================================================
   Base menu item styles
   ========================================================================== */

.menu-item {
  @apply relative flex min-h-9 w-full items-center justify-start gap-3 rounded-2xl px-2 py-1.5 outline-none no-highlight;

  /**
   * Transitions
   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
   */
  transition:
    transform 250ms var(--ease-out-quart),
    box-shadow 150ms var(--ease-out);

  @apply will-change-transform motion-reduce:transition-none;

  /* Cursor */
  cursor: var(--cursor-interactive);

  [data-slot="label"] {
    @apply pointer-events-none w-fit select-none;
  }

  [data-slot="description"] {
    @apply pointer-events-none text-wrap select-none;
  }

  [data-slot="submenu-indicator"] svg {
    @apply size-3.5;
  }

  /* Add inline-start padding when indicator is present */
  &:has(.menu-item__indicator) {
    @apply ps-7;
  }

  /* Add inline-end padding when indicator is present and has submenu */
  &[data-has-submenu="true"]:has(.menu-item__indicator) {
    @apply ps-2 pe-7;
  }

  /* Focus visible state (keyboard focus only) */
  &:focus-visible:not(:focus),
  &[data-focus-visible="true"] {
    @apply status-focused;
  }

  /* Focus state */
  &:focus,
  &[data-focus="true"] {
  }

  /* Pressed state */
  &:active,
  &[data-pressed="true"] {
    transform: scale(0.98);
  }

  /* Hover state */
  @media (hover: hover) {
    &:hover,
    &[data-hovered="true"] {
      @apply bg-default;
    }
  }

  /* Selected state */
  &[aria-checked="true"],
  &[aria-selected="true"],
  &[data-selected="true"] {
    [data-slot="menu-item-indicator--checkmark"] {
      /**
     * Transitions
     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
     */
      transition: stroke-dashoffset 100ms linear;
      @apply motion-reduce:transition-none;
    }

    [data-slot="menu-item-indicator--dot"] {
      /**
       * Selected state: visible and scaled up
       */
      @apply scale-100 opacity-100;
    }
  }

  /* Disabled state */
  &[data-disabled="true"] {
    @apply status-disabled;
  }
}

/* ==========================================================================
   Menu item indicator
   ========================================================================== */

.menu-item__indicator {
  @apply absolute start-2 top-1/2 flex size-4 shrink-0 -translate-y-1/2 items-center justify-center text-muted;

  /**
   * Transitions
   */
  @apply transition duration-250 motion-reduce:transition-none;

  /* Position on the inline-end when menu item has submenu */
  .menu-item[data-has-submenu="true"] & {
    @apply start-auto end-2;
  }

  /* Checkmark SVG indicator */
  [data-slot="menu-item-indicator--checkmark"] {
    @apply size-2.5;

    .menu-item[data-selection-mode="multiple"] & {
      /**
       * Transitions
       */
      @apply transition-all duration-300 motion-reduce:transition-none;
    }
  }

  /* Dot SVG indicator */
  [data-slot="menu-item-indicator--dot"] {
    @apply size-2;

    .menu-item[data-selection-mode="multiple"] & {
      /**
     * Transitions
     */
      @apply transition-all duration-250 motion-reduce:transition-none;
    }
    /**
     * Default state: hidden and scaled down
     */
    @apply scale-70 opacity-0;
  }
}

/* Submenu indicator (chevron-right) */
.menu-item__indicator--submenu {
  @apply text-muted;

  svg {
    @apply size-3;
  }
}

/* Default variant */
.menu-item--default {
}

/* Danger variant */
.menu-item--danger {
  .menu-item__indicator {
    @apply text-danger;
  }

  [data-slot="label"] {
    @apply text-danger;
  }
}