/**
 * @file
 * FlowDrop Pill Component Styles
 *
 * A versatile pill/tag component for status flags, state flags, labels, and tags.
 * Supports multiple styles (filled, outlined, ghost, soft), sizes, and variants.
 */

/* ========================================================================
 * BASE PILL STYLES
 * ======================================================================== */

.fd-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--fd-pill-gap, var(--fd-space-1));
  padding: var(--fd-pill-padding-y) var(--fd-pill-padding-x);
  font-family: var(--fd-font-family-sans);
  font-size: var(--fd-pill-font-size);
  font-weight: var(--fd-pill-font-weight, var(--fd-font-weight-medium));
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: var(--fd-pill-border-width, 1px) solid transparent;
  transition:
    background-color var(--fd-transition-fast),
    border-color var(--fd-transition-fast),
    color var(--fd-transition-fast),
    box-shadow var(--fd-transition-fast);
}

/* Remove default link styles */
a.fd-pill {
  text-decoration: none;
}

/* ========================================================================
 * SHAPE VARIANTS
 * ======================================================================== */

/* Fully rounded pill shape (default) */
.fd-pill--rounded {
  border-radius: var(--fd-radius-full);
}

/* Soft rounded corners */
.fd-pill--soft-corners {
  border-radius: var(--fd-radius-md);
}

/* ========================================================================
 * SIZE VARIANTS
 * ======================================================================== */

/* Extra Small */
.fd-pill--size-xs {
  --fd-pill-padding-x: var(--fd-space-2);
  --fd-pill-padding-y: 0.125rem;
  --fd-pill-font-size: 0.625rem;
  --fd-pill-gap: 0.125rem;
}

/* Small */
.fd-pill--size-sm {
  --fd-pill-padding-x: var(--fd-space-2);
  --fd-pill-padding-y: 0.25rem;
  --fd-pill-font-size: var(--fd-font-size-xs);
  --fd-pill-gap: var(--fd-space-1);
}

/* Medium (default) */
.fd-pill--size-md {
  --fd-pill-padding-x: var(--fd-space-3);
  --fd-pill-padding-y: var(--fd-space-1);
  --fd-pill-font-size: var(--fd-font-size-sm);
  --fd-pill-gap: var(--fd-space-1);
}

/* Large */
.fd-pill--size-lg {
  --fd-pill-padding-x: var(--fd-space-4);
  --fd-pill-padding-y: var(--fd-space-2);
  --fd-pill-font-size: var(--fd-font-size-base);
  --fd-pill-gap: var(--fd-space-2);
}

/* ========================================================================
 * TEXT TRANSFORM
 * ======================================================================== */

.fd-pill--uppercase {
  text-transform: uppercase;
  letter-spacing: var(--fd-letter-spacing-wide);
}

/* ========================================================================
 * INTERACTIVE STATES
 * ======================================================================== */

.fd-pill--interactive {
  cursor: pointer;
}

.fd-pill--interactive:hover {
  filter: brightness(0.95);
}

.fd-pill--interactive:focus-visible {
  outline: 2px solid var(--fd-color-primary-500);
  outline-offset: 2px;
}

.fd-pill--interactive:active {
  filter: brightness(0.9);
}

/* ========================================================================
 * STYLE VARIANTS: SOFT (default - subtle background, darker text)
 * ======================================================================== */

/* Primary - Soft */
.fd-pill--primary.fd-pill--style-soft {
  background-color: var(--fd-color-primary-100);
  color: var(--fd-color-primary-700);
}

/* Secondary - Soft */
.fd-pill--secondary.fd-pill--style-soft {
  background-color: var(--fd-color-gray-100);
  color: var(--fd-color-gray-700);
}

/* Success - Soft */
.fd-pill--success.fd-pill--style-soft {
  background-color: var(--fd-color-success-100);
  color: var(--fd-color-success-700);
}

/* Warning - Soft */
.fd-pill--warning.fd-pill--style-soft {
  background-color: var(--fd-color-warning-100);
  color: var(--fd-color-warning-700);
}

/* Error - Soft */
.fd-pill--error.fd-pill--style-soft {
  background-color: var(--fd-color-error-100);
  color: var(--fd-color-error-700);
}

/* Info - Soft */
.fd-pill--info.fd-pill--style-soft {
  background-color: var(--fd-color-info-100);
  color: var(--fd-color-info-600);
}

/* Neutral - Soft */
.fd-pill--neutral.fd-pill--style-soft {
  background-color: var(--fd-color-gray-100);
  color: var(--fd-color-gray-600);
}

/* ========================================================================
 * STYLE VARIANTS: FILLED (solid background, white text)
 * ======================================================================== */

/* Primary - Filled */
.fd-pill--primary.fd-pill--style-filled {
  background-color: var(--fd-color-primary-500);
  color: #ffffff;
}

/* Secondary - Filled */
.fd-pill--secondary.fd-pill--style-filled {
  background-color: var(--fd-color-gray-500);
  color: #ffffff;
}

/* Success - Filled */
.fd-pill--success.fd-pill--style-filled {
  background-color: var(--fd-color-success-500);
  color: #ffffff;
}

/* Warning - Filled */
.fd-pill--warning.fd-pill--style-filled {
  background-color: var(--fd-color-warning-500);
  color: #ffffff;
}

/* Error - Filled */
.fd-pill--error.fd-pill--style-filled {
  background-color: var(--fd-color-error-500);
  color: #ffffff;
}

/* Info - Filled */
.fd-pill--info.fd-pill--style-filled {
  background-color: var(--fd-color-info-500);
  color: #ffffff;
}

/* Neutral - Filled */
.fd-pill--neutral.fd-pill--style-filled {
  background-color: var(--fd-color-gray-400);
  color: #ffffff;
}

/* ========================================================================
 * STYLE VARIANTS: OUTLINED (border, transparent background)
 * ======================================================================== */

/* Primary - Outlined */
.fd-pill--primary.fd-pill--style-outlined {
  background-color: transparent;
  border-color: var(--fd-color-primary-500);
  color: var(--fd-color-primary-600);
}

/* Secondary - Outlined */
.fd-pill--secondary.fd-pill--style-outlined {
  background-color: transparent;
  border-color: var(--fd-color-gray-300);
  color: var(--fd-color-gray-600);
}

/* Success - Outlined */
.fd-pill--success.fd-pill--style-outlined {
  background-color: transparent;
  border-color: var(--fd-color-success-500);
  color: var(--fd-color-success-600);
}

/* Warning - Outlined */
.fd-pill--warning.fd-pill--style-outlined {
  background-color: transparent;
  border-color: var(--fd-color-warning-500);
  color: var(--fd-color-warning-600);
}

/* Error - Outlined */
.fd-pill--error.fd-pill--style-outlined {
  background-color: transparent;
  border-color: var(--fd-color-error-500);
  color: var(--fd-color-error-600);
}

/* Info - Outlined */
.fd-pill--info.fd-pill--style-outlined {
  background-color: transparent;
  border-color: var(--fd-color-info-500);
  color: var(--fd-color-info-600);
}

/* Neutral - Outlined */
.fd-pill--neutral.fd-pill--style-outlined {
  background-color: transparent;
  border-color: var(--fd-color-gray-300);
  color: var(--fd-color-gray-600);
}

/* ========================================================================
 * STYLE VARIANTS: GHOST (minimal, transparent)
 * ======================================================================== */

/* Primary - Ghost */
.fd-pill--primary.fd-pill--style-ghost {
  background-color: transparent;
  color: var(--fd-color-primary-600);
}

.fd-pill--primary.fd-pill--style-ghost.fd-pill--interactive:hover {
  background-color: var(--fd-color-primary-50);
}

/* Secondary - Ghost */
.fd-pill--secondary.fd-pill--style-ghost {
  background-color: transparent;
  color: var(--fd-color-gray-600);
}

.fd-pill--secondary.fd-pill--style-ghost.fd-pill--interactive:hover {
  background-color: var(--fd-color-gray-100);
}

/* Success - Ghost */
.fd-pill--success.fd-pill--style-ghost {
  background-color: transparent;
  color: var(--fd-color-success-600);
}

.fd-pill--success.fd-pill--style-ghost.fd-pill--interactive:hover {
  background-color: var(--fd-color-success-50);
}

/* Warning - Ghost */
.fd-pill--warning.fd-pill--style-ghost {
  background-color: transparent;
  color: var(--fd-color-warning-600);
}

.fd-pill--warning.fd-pill--style-ghost.fd-pill--interactive:hover {
  background-color: var(--fd-color-warning-50);
}

/* Error - Ghost */
.fd-pill--error.fd-pill--style-ghost {
  background-color: transparent;
  color: var(--fd-color-error-600);
}

.fd-pill--error.fd-pill--style-ghost.fd-pill--interactive:hover {
  background-color: var(--fd-color-error-50);
}

/* Info - Ghost */
.fd-pill--info.fd-pill--style-ghost {
  background-color: transparent;
  color: var(--fd-color-info-600);
}

.fd-pill--info.fd-pill--style-ghost.fd-pill--interactive:hover {
  background-color: var(--fd-color-info-50);
}

/* Neutral - Ghost */
.fd-pill--neutral.fd-pill--style-ghost {
  background-color: transparent;
  color: var(--fd-color-gray-600);
}

.fd-pill--neutral.fd-pill--style-ghost.fd-pill--interactive:hover {
  background-color: var(--fd-color-gray-100);
}

/* ========================================================================
 * BRAND COLOR VARIANTS (from FlowDrop logo)
 * ======================================================================== */

/* Brand Droplet (Blue) - Soft */
.fd-pill--brand-droplet.fd-pill--style-soft {
  background-color: color-mix(in srgb, var(--fd-brand-droplet) 15%, transparent);
  color: var(--fd-brand-droplet);
}

.fd-pill--brand-droplet.fd-pill--style-filled {
  background-color: var(--fd-brand-droplet);
  color: #ffffff;
}

.fd-pill--brand-droplet.fd-pill--style-outlined {
  background-color: transparent;
  border-color: var(--fd-brand-droplet);
  color: var(--fd-brand-droplet);
}

.fd-pill--brand-droplet.fd-pill--style-ghost {
  background-color: transparent;
  color: var(--fd-brand-droplet);
}

/* Brand Red - Soft */
.fd-pill--brand-red.fd-pill--style-soft {
  background-color: color-mix(in srgb, var(--fd-brand-node-red) 15%, transparent);
  color: var(--fd-brand-node-red);
}

.fd-pill--brand-red.fd-pill--style-filled {
  background-color: var(--fd-brand-node-red);
  color: #ffffff;
}

.fd-pill--brand-red.fd-pill--style-outlined {
  background-color: transparent;
  border-color: var(--fd-brand-node-red);
  color: var(--fd-brand-node-red);
}

.fd-pill--brand-red.fd-pill--style-ghost {
  background-color: transparent;
  color: var(--fd-brand-node-red);
}

/* Brand Purple - Soft */
.fd-pill--brand-purple.fd-pill--style-soft {
  background-color: color-mix(in srgb, var(--fd-brand-node-purple) 30%, transparent);
  color: #6b5b95;
}

.fd-pill--brand-purple.fd-pill--style-filled {
  background-color: var(--fd-brand-node-purple);
  color: #4a3d6e;
}

.fd-pill--brand-purple.fd-pill--style-outlined {
  background-color: transparent;
  border-color: var(--fd-brand-node-purple);
  color: #6b5b95;
}

.fd-pill--brand-purple.fd-pill--style-ghost {
  background-color: transparent;
  color: #6b5b95;
}

/* Brand Yellow - Soft */
.fd-pill--brand-yellow.fd-pill--style-soft {
  background-color: color-mix(in srgb, var(--fd-brand-node-yellow) 20%, transparent);
  color: #946c00;
}

.fd-pill--brand-yellow.fd-pill--style-filled {
  background-color: var(--fd-brand-node-yellow);
  color: #1a1a1a;
}

.fd-pill--brand-yellow.fd-pill--style-outlined {
  background-color: transparent;
  border-color: var(--fd-brand-node-yellow);
  color: #946c00;
}

.fd-pill--brand-yellow.fd-pill--style-ghost {
  background-color: transparent;
  color: #946c00;
}

/* ========================================================================
 * ICON STYLES
 * ======================================================================== */

.fd-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fd-pill--size-xs .fd-pill__icon {
  font-size: 0.625rem;
}

.fd-pill--size-sm .fd-pill__icon {
  font-size: 0.75rem;
}

.fd-pill--size-md .fd-pill__icon {
  font-size: 0.875rem;
}

.fd-pill--size-lg .fd-pill__icon {
  font-size: 1rem;
}

/* ========================================================================
 * LABEL STYLES
 * ======================================================================== */

.fd-pill__label {
  display: inline-block;
}

/* ========================================================================
 * DISMISS BUTTON STYLES
 * ======================================================================== */

.fd-pill__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: var(--fd-space-1);
  background: transparent;
  border: none;
  border-radius: var(--fd-radius-full);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--fd-transition-fast), background-color var(--fd-transition-fast);
}

.fd-pill__dismiss:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}

.fd-pill__dismiss:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
  opacity: 1;
}

.fd-pill__dismiss-icon {
  width: 0.75em;
  height: 0.75em;
}

.fd-pill--size-xs .fd-pill__dismiss-icon {
  width: 0.5em;
  height: 0.5em;
}

.fd-pill--size-lg .fd-pill__dismiss-icon {
  width: 1em;
  height: 1em;
}

/* ========================================================================
 * PILL GROUP UTILITY
 * Use .fd-pill-group to wrap multiple pills with proper spacing
 * ======================================================================== */

.fd-pill-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--fd-space-2);
  align-items: center;
}

/* Compact variant for tighter spacing */
.fd-pill-group--compact {
  gap: var(--fd-space-1);
}

/* Vertical stack variant */
.fd-pill-group--vertical {
  flex-direction: column;
  align-items: flex-start;
}

