@layer components {
  .status {
    --status-color: var(--text-light);
    font-size: 1.05rem;
    color: var(--status-color);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .status--success {
    --status-color: var(--color-success);
  }

  .status--info {
    --status-color: var(--color-info);
  }

  .status--warning {
    --status-color: color-mix(in oklch, var(--color-warning), var(--text) 25%);
  }

  .status--error {
    --status-color: var(--color-error);
  }

  .status--neutral {
    --status-color: var(--text-light);
  }

  /* A verdict that has to be read at a glance: the status colour becomes the ground. */
  .status--filled {
    padding: 0.35em 0.8em;
    border-radius: var(--standard-border-radius);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-background);
    background-color: var(--status-color);
  }

  .status--muted {
    --status-color: var(--text-light);

    text-decoration: line-through;
  }
}