@layer components {
/* Status badges - used across tickets, incidents, problems */

.status {
  font-family: var(--font-family-sans-serif) !important;
  font-weight: 500 !important;
  font-size: var(--font-size-xs) !important;
  border-radius: 0.8rem;
  text-align: center;
  padding: 0.25rem 0.75rem;
  line-height: 1;
  height: 1.5rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.status--open {
  background-color: var(--status-open);
  color: var(--status-open-dark);
}

.status--in_progress {
  background-color: var(--status-in_progress);
  color: var(--status-in_progress-dark);
}

.status--assigned {
  background-color: var(--status-assigned);
  color: var(--status-assigned-dark);
}

.status--finished {
  background-color: var(--status-finished);
  color: var(--status-finished-dark);
}

.status--closed {
  background-color: var(--status-closed);
  color: var(--status-closed-dark);
}

.status--reopened {
  background-color: var(--status-reopened);
}

.status--classified {
  background-color: var(--status-classified);
}

.status--problem {
  background-color: var(--status-problem);
  color: oklch(30% 0.03 45);
}

.status--workaround_found {
  background-color: var(--status-workaround_found);
}

.status--solution_found {
  background-color: var(--status-solution_found);
}
}