/* components/label/label.css */

/**
 * Label Component
 * Flexible label/tag system for UI elements
 * Full WCAG 2.2 AAA compliance
 */

/* ========================================
   CSS Custom Properties
   ======================================== */

:root {
  /* Label sizes */
  --label-height-xs: 1rem;      /* 16px */
  --label-height-s: 1.25rem;    /* 20px */
  --label-height-m: 1.5rem;     /* 24px - default */
  --label-height-l: 1.75rem;    /* 28px */
  --label-height-xl: 2rem;      /* 32px */
  
  --label-padding-x-xs: 0.25rem;
  --label-padding-x-s: 0.375rem;
  --label-padding-x-m: 0.5rem;
  --label-padding-x-l: 0.625rem;
  --label-padding-x-xl: 0.75rem;
  
  --label-font-size-xs: 0.625rem;  /* 10px */
  --label-font-size-s: 0.75rem;    /* 12px */
  --label-font-size-m: 0.875rem;   /* 14px */
  --label-font-size-l: 1rem;       /* 16px */
  --label-font-size-xl: 1.125rem;  /* 18px */
  
  /* Label colors */
  --label-bg-default: #f3f4f6;
  --label-bg-primary: #dbeafe;
  --label-bg-success: #d1fae5;
  --label-bg-warning: #fed7aa;
  --label-bg-danger: #fee2e2;
  --label-bg-info: #e0f2fe;
  --label-bg-neutral: #e5e7eb;
  
  --label-text-default: #4b5563;
  --label-text-primary: #1e40af;
  --label-text-success: #065f46;
  --label-text-warning: #92400e;
  --label-text-danger: #991b1b;
  --label-text-info: #075985;
  --label-text-neutral: #374151;
  
  --label-border-default: #d1d5db;
  --label-border-primary: #93c5fd;
  --label-border-success: #86efac;
  --label-border-warning: #fbbf24;
  --label-border-danger: #fca5a5;
  --label-border-info: #7dd3fc;
  --label-border-neutral: #9ca3af;
  
  /* Styles */
  --label-border-radius: 0.25rem;
  --label-font-weight: 500;
  --label-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Focus styles */
  --label-focus-ring-width: 2px;
  --label-focus-ring-color: #3b82f6;
  --label-focus-ring-offset: 1px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --label-bg-default: #374151;
    --label-bg-primary: #1e3a8a;
    --label-bg-success: #064e3b;
    --label-bg-warning: #78350f;
    --label-bg-danger: #7f1d1d;
    --label-bg-info: #0c4a6e;
    --label-bg-neutral: #1f2937;
    
    --label-text-default: #e5e7eb;
    --label-text-primary: #bfdbfe;
    --label-text-success: #a7f3d0;
    --label-text-warning: #fde68a;
    --label-text-danger: #fecaca;
    --label-text-info: #bae6fd;
    --label-text-neutral: #d1d5db;
  }
}

/* ========================================
   Base Label Structure
   ======================================== */

.c-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: var(--label-height-m);
  padding: 0 var(--label-padding-x-m);
  background: var(--label-bg-default);
  color: var(--label-text-default);
  border: 1px solid var(--label-border-default);
  border-radius: var(--label-border-radius);
  font-size: var(--label-font-size-m);
  font-weight: var(--label-font-weight);
  line-height: 1;
  white-space: nowrap;
  transition: var(--label-transition);
  text-decoration: none;
  position: relative;
  user-select: none;
  vertical-align: middle;
}

/* Icon support */
.c-label__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.c-label__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Text */
.c-label__text {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Removable label with close button */
.c-label__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin-left: 0.125rem;
  margin-right: -0.25rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  transition: opacity 150ms;
  flex-shrink: 0;
}

.c-label__remove:hover {
  opacity: 1;
}

.c-label__remove:focus-visible {
  outline: var(--label-focus-ring-width) solid var(--label-focus-ring-color);
  outline-offset: var(--label-focus-ring-offset);
  border-radius: 2px;
  opacity: 1;
}

.c-label__remove svg {
  width: 0.875em;
  height: 0.875em;
  stroke: currentColor;
  stroke-width: 2.5;
}

/* ========================================
   Label Sizes
   ======================================== */

/* XS Size */
.c-label--size-xs {
  height: var(--label-height-xs);
  padding: 0 var(--label-padding-x-xs);
  font-size: var(--label-font-size-xs);
}

/* S Size */
.c-label--size-s {
  height: var(--label-height-s);
  padding: 0 var(--label-padding-x-s);
  font-size: var(--label-font-size-s);
}

/* L Size */
.c-label--size-l {
  height: var(--label-height-l);
  padding: 0 var(--label-padding-x-l);
  font-size: var(--label-font-size-l);
}

/* XL Size */
.c-label--size-xl {
  height: var(--label-height-xl);
  padding: 0 var(--label-padding-x-xl);
  font-size: var(--label-font-size-xl);
}

/* ========================================
   Label Color Variants
   ======================================== */

/* Primary */
.c-label--primary {
  background: var(--label-bg-primary);
  color: var(--label-text-primary);
  border-color: var(--label-border-primary);
}

/* Success */
.c-label--success {
  background: var(--label-bg-success);
  color: var(--label-text-success);
  border-color: var(--label-border-success);
}

/* Warning */
.c-label--warning {
  background: var(--label-bg-warning);
  color: var(--label-text-warning);
  border-color: var(--label-border-warning);
}

/* Danger */
.c-label--danger {
  background: var(--label-bg-danger);
  color: var(--label-text-danger);
  border-color: var(--label-border-danger);
}

/* Info */
.c-label--info {
  background: var(--label-bg-info);
  color: var(--label-text-info);
  border-color: var(--label-border-info);
}

/* Neutral */
.c-label--neutral {
  background: var(--label-bg-neutral);
  color: var(--label-text-neutral);
  border-color: var(--label-border-neutral);
}

/* ========================================
   Label Style Variants
   ======================================== */

/* Solid (filled) - default */
.c-label--solid {
  /* Default styling */
}

/* Outlined */
.c-label--outlined {
  background: transparent;
  border-width: 1.5px;
}

.c-label--outlined.c-label--primary {
  color: var(--label-text-primary);
  border-color: var(--label-text-primary);
}

.c-label--outlined.c-label--success {
  color: var(--label-text-success);
  border-color: var(--label-text-success);
}

.c-label--outlined.c-label--warning {
  color: var(--label-text-warning);
  border-color: var(--label-text-warning);
}

.c-label--outlined.c-label--danger {
  color: var(--label-text-danger);
  border-color: var(--label-text-danger);
}

.c-label--outlined.c-label--info {
  color: var(--label-text-info);
  border-color: var(--label-text-info);
}

/* Ghost (no border) */
.c-label--ghost {
  border-color: transparent;
}

/* Rounded */
.c-label--rounded {
  border-radius: 9999px;
}

/* ========================================
   Interactive States
   ======================================== */

/* Clickable label */
.c-label--clickable {
  cursor: pointer;
}

.c-label--clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.c-label--clickable:active {
  transform: translateY(0);
  box-shadow: none;
}

.c-label--clickable:focus-visible {
  outline: var(--label-focus-ring-width) solid var(--label-focus-ring-color);
  outline-offset: var(--label-focus-ring-offset);
}

/* Disabled state */
.c-label--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========================================
   Label Groups
   ======================================== */

.c-label-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.c-label-group--vertical {
  flex-direction: column;
  align-items: stretch;
}

.c-label-group--vertical .c-label {
  width: 100%;
}

/* Connected labels */
.c-label-group--connected {
  gap: 0;
}

.c-label-group--connected .c-label {
  border-radius: 0;
  margin-left: -1px;
}

.c-label-group--connected .c-label:first-child {
  border-top-left-radius: var(--label-border-radius);
  border-bottom-left-radius: var(--label-border-radius);
  margin-left: 0;
}

.c-label-group--connected .c-label:last-child {
  border-top-right-radius: var(--label-border-radius);
  border-bottom-right-radius: var(--label-border-radius);
}

/* ========================================
   Label with Counter
   ======================================== */

.c-label__counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25em;
  height: 1.25em;
  padding: 0 0.25em;
  margin-left: 0.25rem;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 9999px;
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1;
}

.c-label--outlined .c-label__counter {
  background: currentColor;
  color: white;
  opacity: 0.9;
}

/* ========================================
   Accessibility
   ======================================== */

/* Screen reader only text */
.c-label__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .c-label {
    border-width: 2px;
  }
  
  .c-label--outlined {
    border-width: 2px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .c-label {
    transition: none;
  }
  
  .c-label--clickable:hover {
    transform: none;
  }
}