/* Legend Counter Component */


/* Component-specific custom properties */
.c-legend-counter-group,
.c-legend-counter {
  /* Base properties */
  --c-legend-counter-font-family: var(--ds-font-family-sans);
  --c-legend-counter-font-size: var(--ds-font-size-m);
  --c-legend-counter-line-height: var(--ds-line-height-s);
  --c-legend-counter-transition: all var(--ds-duration-fast) var(--ds-ease-out);
  
  /* Group properties */
  --c-legend-counter-group-gap: var(--ds-space-s);
  --c-legend-counter-group-divider-color: var(--ds-color-border);
  --c-legend-counter-group-divider-width: 1px;
  
  /* Counter properties */
  --c-legend-counter-gap: var(--ds-space-s);
  --c-legend-counter-padding: 0;
  
  /* Badge properties */
  --c-legend-counter-badge-font-size: var(--ds-font-size-s);
  --c-legend-counter-badge-font-weight: var(--ds-font-weight-medium);
  --c-legend-counter-badge-line-height: var(--ds-line-height-s);
  --c-legend-counter-badge-padding-block: calc(var(--ds-space-xs) / 6) calc(var(--ds-space-xs) / 12);
  --c-legend-counter-badge-padding-inline: var(--ds-space-xs);
  --c-legend-counter-badge-border-radius: var(--ds-radius-s);
  --c-legend-counter-badge-min-width: 1.5rem;
  
  /* Badge status colors */
  --c-legend-counter-badge-default-background: var(--ds-color-surface-raised);
  --c-legend-counter-badge-default-color: var(--ds-color-text);
  --c-legend-counter-badge-info-background: var(--ds-color-info-background);
  --c-legend-counter-badge-info-color: var(--ds-color-info-text);
  --c-legend-counter-badge-success-background: var(--ds-color-success-background);
  --c-legend-counter-badge-success-color: var(--ds-color-success-text);
  --c-legend-counter-badge-danger-background: var(--ds-color-danger-background);
  --c-legend-counter-badge-danger-color: var(--ds-color-danger-text);
  
  /* Label properties */
  --c-legend-counter-label-color: var(--ds-color-text);
  --c-legend-counter-label-font-size: var(--ds-font-size-m);
  --c-legend-counter-label-font-weight: var(--ds-font-weight-normal);
  
  /* Clickable properties */
  --c-legend-counter-clickable-background: transparent;
  --c-legend-counter-clickable-background-hover: var(--ds-color-surface-lowered);
  --c-legend-counter-clickable-border-radius: var(--ds-radius-s);
  --c-legend-counter-clickable-padding: var(--ds-space-xs);
}

/* ========================================
   GROUP STYLES
   ======================================== */

/* Base group */
.c-legend-counter-group {
  display: flex;
  align-items: center;
  gap: var(--c-legend-counter-group-gap);
  font-family: var(--c-legend-counter-font-family);
  font-size: var(--c-legend-counter-font-size);
  line-height: var(--c-legend-counter-line-height);
  flex-wrap: wrap;
}

/* Vertical layout */
.c-legend-counter-group--vertical {
  flex-direction: column;
  align-items: flex-start;
}

/* Size variants for group */
.c-legend-counter-group--size-s {
  --c-legend-counter-font-size: var(--ds-font-size-s);
  --c-legend-counter-label-font-size: var(--ds-font-size-s);
  --c-legend-counter-group-gap: calc(var(--ds-space-s) * 0.75);
}

/* No dividers variant */
.c-legend-counter-group--no-dividers .c-legend-counter__divider {
  display: none;
}

/* ========================================
   COUNTER STYLES
   ======================================== */

/* Base counter */
.c-legend-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--c-legend-counter-gap);
  padding: var(--c-legend-counter-padding);
  flex-shrink: 0;
  transition: var(--c-legend-counter-transition);
}

/* Size variants for counter */
.c-legend-counter--size-s {
  --c-legend-counter-gap: calc(var(--ds-space-s) * 0.75);
}

/* Clickable counter */
.c-legend-counter--clickable {
  background: var(--c-legend-counter-clickable-background);
  border: none;
  border-radius: var(--c-legend-counter-clickable-border-radius);
  padding: var(--c-legend-counter-clickable-padding);
  cursor: pointer;
  outline: none;
}

.c-legend-counter--clickable:hover {
  background: var(--c-legend-counter-clickable-background-hover);
}

.c-legend-counter--clickable:focus {
  outline: 2px solid var(--ds-color-accent);
  outline-offset: 2px;
}

.c-legend-counter--clickable:active {
  background: var(--ds-color-active);
}

/* ========================================
   BADGE STYLES
   ======================================== */

/* Base badge */
.c-legend-counter__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--c-legend-counter-badge-min-width);
  padding-block: var(--c-legend-counter-badge-padding-block);
  padding-inline: var(--c-legend-counter-badge-padding-inline);
  font-size: var(--c-legend-counter-badge-font-size);
  font-weight: var(--c-legend-counter-badge-font-weight);
  line-height: var(--c-legend-counter-badge-line-height);
  border-radius: var(--c-legend-counter-badge-border-radius);
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: var(--c-legend-counter-transition);
}

/* Badge status variants */
.c-legend-counter__badge--default {
  background: var(--c-legend-counter-badge-default-background);
  color: var(--c-legend-counter-badge-default-color);
}

.c-legend-counter__badge--info {
  background: var(--c-legend-counter-badge-info-background);
  color: var(--c-legend-counter-badge-info-color);
}

.c-legend-counter__badge--success {
  background: var(--c-legend-counter-badge-success-background);
  color: var(--c-legend-counter-badge-success-color);
}

.c-legend-counter__badge--danger {
  background: var(--c-legend-counter-badge-danger-background);
  color: var(--c-legend-counter-badge-danger-color);
}

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

/* Base label */
.c-legend-counter__label {
  color: var(--c-legend-counter-label-color);
  font-size: var(--c-legend-counter-label-font-size);
  font-weight: var(--c-legend-counter-label-font-weight);
  line-height: var(--c-legend-counter-line-height);
  white-space: nowrap;
}

/* ========================================
   DIVIDER STYLES
   ======================================== */

/* Base divider */
.c-legend-counter__divider {
  width: var(--c-legend-counter-group-divider-width);
  background: var(--c-legend-counter-group-divider-color);
  flex-shrink: 0;
  min-height: calc(var(--c-legend-counter-line-height) * 1rem);
}

.c-legend-counter-group--vertical .c-legend-counter__divider {
  width: 100%;
  height: var(--c-legend-counter-group-divider-width);
  min-height: var(--c-legend-counter-group-divider-width);
}

/* ========================================
   LOADING STATE
   ======================================== */

.c-legend-counter--loading {
  opacity: 0.6;
}

.c-legend-counter__badge--loading {
  background: var(--ds-color-surface-lowered);
  color: var(--ds-color-text-weakest);
}

.c-legend-counter__badge--loading::after {
  content: '';
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   EMPTY STATE
   ======================================== */

.c-legend-counter--empty .c-legend-counter__badge {
  background: var(--ds-color-surface-lowered);
  color: var(--ds-color-text-weakest);
}

.c-legend-counter--empty .c-legend-counter__label {
  color: var(--ds-color-text-weak);
}

/* ========================================
   RESPONSIVE BEHAVIOR
   ======================================== */

@media (max-width: 768px) {
  .c-legend-counter-group {
    --c-legend-counter-group-gap: calc(var(--ds-space-s) * 0.75);
  }
  
  .c-legend-counter-group--mobile-vertical {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .c-legend-counter-group--mobile-vertical .c-legend-counter__divider {
    width: 100%;
    height: var(--c-legend-counter-group-divider-width);
    min-height: var(--c-legend-counter-group-divider-width);
  }
  
  .c-legend-counter {
    --c-legend-counter-gap: calc(var(--ds-space-s) * 0.75);
  }
}

@media (max-width: 480px) {
  .c-legend-counter-group {
    --c-legend-counter-font-size: var(--ds-font-size-s);
    --c-legend-counter-label-font-size: var(--ds-font-size-s);
    --c-legend-counter-group-gap: var(--ds-space-xs);
  }
  
  .c-legend-counter {
    --c-legend-counter-gap: var(--ds-space-xs);
  }
  
  .c-legend-counter__label {
    font-size: var(--ds-font-size-s);
  }
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
  .c-legend-counter__badge {
    border: 2px solid currentColor;
  }
  
  .c-legend-counter__divider {
    background: #000;
    width: 2px;
  }
  
  .c-legend-counter-group--vertical .c-legend-counter__divider {
    height: 2px;
    min-height: 2px;
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .c-legend-counter,
  .c-legend-counter__badge {
    transition: none;
  }
  
  .c-legend-counter__badge--loading::after {
    animation: none;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .c-legend-counter-group {
    break-inside: avoid;
  }
  
  .c-legend-counter__badge {
    border: 1px solid #000;
    background: transparent !important;
    color: #000 !important;
  }
  
  .c-legend-counter__divider {
    background: #000;
  }
  
  .c-legend-counter--clickable {
    background: transparent;
  }
}

/* ========================================
   FOCUS VISIBLE (for better keyboard navigation)
   ======================================== */

.c-legend-counter--clickable:focus-visible {
  outline: 2px solid var(--ds-color-accent);
  outline-offset: 2px;
}

/* Remove default focus styles when focus-visible is supported */
.c-legend-counter--clickable:focus:not(:focus-visible) {
  outline: none;
}