/*
 * Badges
 *
 * BEM classes for the inline pill badge in app/components/ui/elements/.
 *
 * Usage:
 *   class="badge badge--primary"            <- rounded-md primary
 *   class="badge badge--warning badge--squared" <- rounded-full
 */

.badge {
  display: inline-flex;
  align-items: center;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-md);
}

.badge--squared {
  border-radius: var(--radius-pill);
}

.badge--default {
  background-color: var(--color-surface-muted);
  color: var(--color-ink-light);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger-strong) 10%, transparent);
}

.badge--muted {
  background-color: var(--color-surface-muted);
  color: var(--color-ink-light);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink-lighter) 20%, transparent);
}

.badge--primary {
  background-color: rgb(var(--palette-blue-50));
  color: rgb(var(--palette-blue-700));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-info-strong) 10%, transparent);
}

.badge--violet {
  background-color: rgb(var(--palette-violet-50));
  color: rgb(var(--palette-violet-700));
  box-shadow: inset 0 0 0 1px rgb(var(--palette-violet-600) / 0.2);
}

.badge--purple {
  background-color: rgb(var(--palette-purple-50));
  color: var(--color-accent-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.badge--inactive {
  padding-block: 0.125rem;
  padding-inline: 0.375rem;
  background-color: rgb(var(--palette-purple-100));
  color: rgb(var(--palette-purple-700));
}

.badge--success {
  background-color: rgb(var(--palette-green-50));
  color: rgb(var(--palette-green-700));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-success-strong) 10%, transparent);
}

.badge--success-ring {
  background-color: rgb(var(--palette-green-50));
  color: rgb(var(--palette-green-700));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-success-strong) 20%, transparent);
}

.badge--warning {
  background-color: rgb(var(--palette-yellow-50));
  color: rgb(var(--palette-yellow-700));
  box-shadow: inset 0 0 0 1px rgb(var(--palette-yellow-600) / 0.1);
}

.badge--amber {
  background-color: rgb(var(--palette-amber-50));
  color: rgb(var(--palette-amber-700));
  box-shadow: inset 0 0 0 1px rgb(var(--palette-amber-600) / 0.2);
}

.badge--danger {
  background-color: rgb(var(--palette-red-50));
  color: rgb(var(--palette-red-700));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger-strong) 10%, transparent);
}

.badge--danger-ring {
  background-color: rgb(var(--palette-red-50));
  color: rgb(var(--palette-red-700));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger-strong) 20%, transparent);
}

.badge--pink,
.badge--hq-pink {
  background-color: rgb(var(--palette-pink-50));
  color: rgb(var(--palette-pink-700));
  box-shadow: inset 0 0 0 1px rgb(var(--palette-pink-600) / 0.2);
}

.badge--teal {
  background-color: rgb(var(--palette-teal-100));
  color: rgb(var(--palette-teal-700));
}

.training-row__skill + .training-row__skill {
  margin-inline-start: 0.5rem;
}

.tag-pill {
  display: inline-flex; /* inline-flex */
  align-items: center; /* items-center */
  border-radius: var(--radius-md);
  background-color: var(--color-surface-subtle);
  padding-block: 0.125rem;
  padding-inline: 0.375rem;
  color: var(--color-ink-light);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
}

.skill-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skill-pill__marker {
  inline-size: 0.375rem;
  block-size: 0.375rem;
  fill: var(--color-accent);
}

.rating-summary {
  display: flex;
  gap: 1.5rem;
}


.rating-summary__value {
  margin-block-start: 0.5rem;
  color: var(--color-ink);
  font-size: 0.875rem;
}

.rating-stars,
.rating-stars__controls {
  display: flex;
  align-items: center;
}

.rating-stars {
  gap: 0.5rem;
}

.rating-stars__controls {
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.25rem;
}

.rating-stars__control {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: color 150ms ease;
}

.rating-stars__control:hover,
.rating-stars__control:hover ~ .rating-stars__control {
  color: var(--color-warning);
}

.rating-stars__icon {
  margin-inline-start: 0.25rem;
  inline-size: 1rem;
  block-size: 1rem;
}

.rating-stars__icon--active {
  color: rgb(var(--palette-yellow-400));
}

.rating-stars__icon--muted {
  color: var(--color-border-medium);
}