/* Group Pill Selector - Compact tag-style selector for meals and dishes */

@utility group-pills-container {
  @layer components {
    @apply space-y-3;
  }
}

@utility group-pills-row {
  @layer components {
    @apply flex flex-col gap-2;
  }
}

@utility group-pills-row__label {
  @layer components {
    @apply text-sm font-medium text-gray-700;
  }
}

@utility group-pills-row__pills {
  @layer components {
    @apply flex flex-wrap gap-2;
  }
}

/* Pill base styles */
@utility group-pill {
  @layer components {
    @apply inline-flex items-center gap-1.5 px-3 py-2 rounded-full text-sm font-medium cursor-pointer transition-all duration-200 border-2;
  }
}

/* Meal pills - Blue theme */
@utility group-pill--meal {
  @layer components {
    @apply border-blue-300 text-blue-700 bg-white hover:bg-blue-50;
  }
}

@utility group-pill--meal-active {
  @layer components {
    @apply border-blue-500 bg-blue-500 text-white hover:bg-blue-600;
  }
}

/* Dish pills - Green theme */
@utility group-pill--dish {
  @layer components {
    @apply border-green-300 text-green-700 bg-white hover:bg-green-50;
  }
}

@utility group-pill--dish-active {
  @layer components {
    @apply border-green-500 bg-green-500 text-white hover:bg-green-600;
  }
}

/* New pill - Dashed border */
@utility group-pill--new {
  @layer components {
    @apply border-dashed border-gray-400 text-gray-600 bg-white hover:bg-gray-50;
  }
}

/* Uncreated pill - Reduced opacity */
@utility group-pill--uncreated {
  @layer components {
    @apply opacity-60 hover:opacity-80;
  }
}

/* Close button on active pills */
@utility group-pill__close {
  @layer components {
    @apply ml-1 -mr-1 rounded-full hover:bg-white/20 p-0.5 transition-colors;
  }
}

/* Pill flash animation for auto-linking */
@keyframes pill-flash {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

@utility group-pill--flash {
  @layer components {
    animation: pill-flash 0.4s ease-in-out 2;
  }
}

/* Inline form for new group creation */
@utility group-pills-new-form {
  @layer components {
    @apply mt-3 p-4 bg-gray-50 rounded-lg border border-gray-200 space-y-3;
  }
}

@utility group-pills-new-form--hidden {
  @layer components {
    @apply hidden;
  }
}

@utility group-pills-new-form__actions {
  @layer components {
    @apply flex gap-2;
  }
}