/* Badge Component */
/* BEM: .c-badge */

.c-badge {
  /* Base badge styles */
  display: inline-flex;
  align-items: center;
  gap: var(--c-badge-gap, var(--ds-space-xs));
  padding: var(--c-badge-padding-block, var(--ds-space-xs)) var(--c-badge-padding-inline, var(--ds-space-s));
  font-size: var(--c-badge-font-size, var(--ds-font-size-s));
  font-weight: var(--c-badge-font-weight, var(--ds-font-weight-medium));
  line-height: var(--c-badge-line-height, 1.2);
  border-radius: var(--c-badge-border-radius, var(--ds-radius-pill));
  border: var(--c-badge-border-width, 1px) solid var(--c-badge-border-color, transparent);
  background-color: var(--c-badge-background-color, var(--ds-color-status-neutral-weak));
  color: var(--c-badge-text-color, var(--ds-color-text-neutral));
  text-decoration: none; 
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
}

/* Badge icon */
.c-badge__icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: currentColor;
}

/* Variant: Neutral (default) */
.c-badge--neutral {
  --c-badge-background-color: var(--ds-color-status-neutral-weak);
  --c-badge-text-color: var(--ds-color-text-neutral);
  --c-badge-border-color: var(--ds-color-border-neutral);
}

.c-badge--neutral.c-badge--strong {
  --c-badge-background-color: var(--ds-color-status-neutral);
  --c-badge-text-color: var(--ds-color-text-neutral-strong);
  --c-badge-border-color: var(--ds-color-border-neutral);
}

/* Variant: Info */
.c-badge--info {
  --c-badge-background-color: var(--ds-color-status-info-weak);
  --c-badge-text-color: var(--ds-color-text-info);
  --c-badge-border-color: var(--ds-color-border-info);
}

.c-badge--info.c-badge--strong {
  --c-badge-background-color: var(--ds-color-status-info);
  --c-badge-text-color: var(--ds-color-text-on-accent);
  --c-badge-border-color: var(--ds-color-status-info);
}

/* Variant: Success */
.c-badge--success {
  --c-badge-background-color: var(--ds-color-status-success-weak);
  --c-badge-text-color: var(--ds-color-text-success);
  --c-badge-border-color: var(--ds-color-border-success);
}

.c-badge--success.c-badge--strong {
  --c-badge-background-color: var(--ds-color-status-success);
  --c-badge-text-color: var(--ds-color-text-on-accent);
  --c-badge-border-color: var(--ds-color-status-success);
}

/* Variant: Warning */
.c-badge--warning {
  --c-badge-background-color: var(--ds-color-status-warning-weak);
  --c-badge-text-color: var(--ds-color-text-warning);
  --c-badge-border-color: var(--ds-color-border-warning);
}

.c-badge--warning.c-badge--strong {
  --c-badge-background-color: var(--ds-color-status-warning);
  --c-badge-text-color: var(--ds-color-text-warning-strong);
  --c-badge-border-color: var(--ds-color-status-warning);
}

/* Variant: Danger */
.c-badge--danger {
  --c-badge-background-color: var(--ds-color-status-danger-weak);
  --c-badge-text-color: var(--ds-color-text-danger);
  --c-badge-border-color: var(--ds-color-border-danger);
}

.c-badge--danger.c-badge--strong {
  --c-badge-background-color: var(--ds-color-status-danger);
  --c-badge-text-color: var(--ds-color-text-on-accent);
  --c-badge-border-color: var(--ds-color-status-danger);
}

/* Variant: Highlight */
.c-badge--highlight {
  --c-badge-background-color: var(--ds-color-status-highlight-weak);
  --c-badge-text-color: var(--ds-color-text-highlight);
  --c-badge-border-color: var(--ds-color-border-highlight);
}

.c-badge--highlight.c-badge--strong {
  --c-badge-background-color: var(--ds-color-status-highlight);
  --c-badge-text-color: var(--ds-color-text-on-accent);
  --c-badge-border-color: var(--ds-color-status-highlight);
}

/* Variant: Progress */
.c-badge--progress {
  --c-badge-background-color: var(--ds-color-status-progress-weak);
  --c-badge-text-color: var(--ds-color-text-progress);
  --c-badge-border-color: var(--ds-color-border-progress);
}

.c-badge--progress.c-badge--strong {
  --c-badge-background-color: var(--ds-color-status-progress);
  --c-badge-text-color: var(--ds-color-text-on-accent);
  --c-badge-border-color: var(--ds-color-status-progress);
}

/* Size variants */
.c-badge--size-s {
  --c-badge-font-size: var(--ds-font-size-xs);
  --c-badge-padding-block: calc(var(--ds-space-xs) * 0.5);
  --c-badge-padding-inline: var(--ds-space-xs);
  --c-badge-gap: calc(var(--ds-space-xs) * 0.5);
}

.c-badge--size-m {
  --c-badge-font-size: var(--ds-font-size-s);
  --c-badge-padding-block: var(--ds-space-xs);
  --c-badge-padding-inline: var(--ds-space-s);
  --c-badge-gap: var(--ds-space-xs);
}

.c-badge--size-l {
  --c-badge-font-size: var(--ds-font-size-m);
  --c-badge-padding-block: var(--ds-space-s);
  --c-badge-padding-inline: var(--ds-space-m);
  --c-badge-gap: var(--ds-space-s);
}

/* Interactive states */
.c-badge--interactive {
  cursor: pointer;
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
}

.c-badge--interactive:hover {
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-s);
}

.c-badge--interactive:active {
  transform: translateY(0);
}

.c-badge--interactive:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset: var(--ds-focus-ring-offset);
}

/* Removable badge */
.c-badge--removable {
  padding-inline-end: var(--ds-space-xs);
}

.c-badge__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  margin-inline-start: var(--ds-space-xs);
  border: none;
  border-radius: var(--ds-radius-circle);
  background: rgba(0, 0, 0, 0.1);
  color: currentColor;
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease-out);
}

.c-badge__remove:hover {
  background: rgba(0, 0, 0, 0.2);
}

.c-badge__remove:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 1px;
}

.c-badge__remove-icon {
  width: 0.75em;
  height: 0.75em;
  fill: currentColor;
}

/* Notification badge (dot) */
.c-badge--dot {
  width: 0.5rem;
  height: 0.5rem;
  min-width: 0.5rem;
  padding: 0;
  border-radius: var(--ds-radius-circle);
  background-color: var(--ds-color-status-notification);
}

.c-badge--dot.c-badge--small {
  width: 0.375rem;
  height: 0.375rem;
  min-width: 0.375rem;
}

.c-badge--dot.c-badge--large {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
}

/* Badge positioning for notifications */
.c-badge--positioned {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  z-index: 1;
}

/* Badge group */
.c-badge-group {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xs);
  flex-wrap: wrap;
}

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

/* High contrast mode */
@media (prefers-contrast: high) {
  .c-badge {
    border-width: 2px;
    border-style: solid;
  }
  
  .c-badge--strong {
    border-color: currentColor;
  }
}

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

/* Print styles */
@media print {
  .c-badge {
    background-color: transparent !important;
    color: black !important;
    border: 1px solid black !important;
  }
  
  .c-badge--dot {
    display: none;
  }
}