/* ========================================
   Select Components
   ======================================== */

 .select-trigger {
  @apply flex items-center justify-between w-full h-9 px-3;
  @apply text-sm bg-surface border border-border rounded-md;
  @apply focus:outline-none focus:ring-2 focus:ring-primary;
}

 .select-content {
  @apply bg-surface border border-border rounded-md shadow-lg z-[--z-popover];
  @apply overflow-hidden;
  animation: selectFadeIn 100ms ease-out;
}

@keyframes selectFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

 .select-item {
  @apply relative flex items-center px-8 py-2 text-sm;
  @apply cursor-pointer select-none;
  @apply hover:bg-surface-secondary;
  @apply focus:bg-surface-secondary focus:outline-none;

  &[data-highlighted] {
    @apply bg-surface-secondary;
  }
}

 .select-item-indicator {
  @apply absolute left-2;
}

 .select-label {
  @apply px-3 py-1.5 text-xs font-semibold text-text-muted uppercase;
}

/* Group label for grouped selects */
.select-group-label {
  @apply px-3 py-1.5 text-xs font-semibold text-text-muted uppercase tracking-wide;
  @apply border-b border-border/50 bg-surface-secondary/30;
}

/* Separator between groups */
.select-separator {
  @apply h-px my-1 bg-border;
}
