/* Meridian · Badge & Chip
   Badges:   .dm-badge (primary-subtle) | --success | --warning | --error | --info | --dot
   Chips:    .dm-chip[data-dm-chip] (selectable, aria-pressed) and
             .dm-chip--dismiss[data-dm-chip-dismiss] (X button, scale-out on remove). */

/* ---- Badge ---------------------------------------------------------------- */

.dm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font: var(--dm-type-label-sm);
  letter-spacing: var(--dm-tracking-label-sm);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dm-color-on-primary-subtle);
  background: var(--dm-color-primary-subtle);
  border-radius: var(--dm-rounded-full);
}

/* Semantic variants: subtle container + solid semantic color as readable text */

.dm-badge--success {
  color: var(--dm-color-success);
  background: var(--dm-color-success-subtle);
}

.dm-badge--warning {
  color: var(--dm-color-warning);
  background: var(--dm-color-warning-subtle);
}

.dm-badge--error {
  color: var(--dm-color-error);
  background: var(--dm-color-error-subtle);
}

.dm-badge--info {
  color: var(--dm-color-info);
  background: var(--dm-color-info-subtle);
}

/* Dot indicator — inherits the variant's text color */

.dm-badge--dot::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: var(--dm-rounded-full);
}

/* ---- Chip (selectable) ------------------------------------------------------ */

.dm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  font: var(--dm-type-label-md);
  letter-spacing: var(--dm-tracking-label);
  white-space: nowrap;
  color: var(--dm-color-on-surface);
  background: var(--dm-color-surface);
  border: 1px solid var(--dm-color-outline);
  border-radius: var(--dm-rounded-full);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dm-duration-fast) var(--dm-ease-standard),
    border-color var(--dm-duration-fast) var(--dm-ease-standard),
    color var(--dm-duration-fast) var(--dm-ease-standard),
    opacity var(--dm-duration-base) var(--dm-ease-standard),
    transform var(--dm-duration-base) var(--dm-ease-standard);
}

.dm-chip:hover {
  background: var(--dm-color-surface-variant);
}

.dm-chip[aria-pressed="true"] {
  color: var(--dm-color-on-primary-subtle);
  background: var(--dm-color-primary-subtle);
  border-color: var(--dm-color-primary);
}

/* Leading check on selected chips, drawn from two borders */
.dm-chip[aria-pressed="true"]::before {
  content: "";
  flex: none;
  width: 5px;
  height: 9px;
  margin-top: -3px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Spring pop, retriggered by chip.js on every toggle */
.dm-chip--pop {
  animation: dm-chip-pop var(--dm-duration-slow) var(--dm-ease-spring);
}

@keyframes dm-chip-pop {
  0% {
    transform: scale(0.9);
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* ---- Chip (dismissible) -------------------------------------------------------- */

.dm-chip--dismiss {
  padding-right: 6px;
  cursor: default;
}

.dm-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  font: var(--dm-type-label-md);
  line-height: 1;
  color: var(--dm-color-on-surface-variant);
  background: transparent;
  border: 0;
  border-radius: var(--dm-rounded-full);
  cursor: pointer;
  transition: background-color var(--dm-duration-fast) var(--dm-ease-standard),
    color var(--dm-duration-fast) var(--dm-ease-standard);
}

.dm-chip__remove:hover {
  color: var(--dm-color-error);
  background: var(--dm-color-error-subtle);
}

/* Fade + scale-out before chip.js removes the node */
.dm-chip--leaving {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}