@layer components {
  /* Tag Component
     ========================================================================== */

  .tag-item {
    display: inline-block;
    padding: 0px 4px;
    font-size: 11px;
    border-radius: 3px;
    background-color: var(--color-blue-light);
    /* Mixed towards ink: plain --color-blue sits just under 4.5:1 on the tinted
       fill in light mode; the mix darkens it there and lightens it in dark. */
    color: color-mix(in oklch, var(--color-blue), var(--color-ink) 18%);
    border: 1px solid color-mix(in oklch, var(--color-blue), var(--color-ink) 18%);
    text-decoration: none;
    vertical-align: middle;
    margin-inline-end: 6px;
  }

  .tag-item--green {
    background-color: var(--color-green-light);
    color: var(--color-green-dark);
    border: 1px solid var(--color-green-dark);
  }

  .tag-item--red {
    background-color: var(--color-red-light);
    color: var(--color-red-dark);
    border: 1px solid var(--color-red-dark);
  }
}