/* Dropdown Components
 * An overflow menu for secondary actions. The bar keeps one primary button;
 * everything else lives behind the trigger.
 * Pure BEM: .dropdown > .dropdown__menu > .dropdown__item
 */

@utility dropdown {
  @layer components {
    @apply relative inline-block;
  }
}

/* Anchored to the right edge so the menu never runs off a phone screen. */
@utility dropdown__menu {
  @layer components {
    @apply absolute right-0 top-full mt-2 z-30 min-w-56 rounded-lg bg-white border border-gray-200 shadow-lg py-1;
  }
}

/* py-3 keeps the 44px touch target the design system asks of every tappable row. */
@utility dropdown__item {
  @layer components {
    @apply flex items-center gap-3 w-full text-left px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors duration-200;
  }
}

@utility dropdown__divider {
  @layer components {
    @apply my-1 border-t border-gray-100;
  }
}

@utility dropdown__section {
  @layer components {
    @apply px-4 pt-2 pb-1 text-xs font-semibold uppercase tracking-wide text-gray-400;
  }
}