/***************************
 * COMPONENT: TAXONOMY LIST
 ***************************/

.taxonomy-list {
  display: flex;
  gap: 1ch;
  font-family: var(--font-family-monospace);

  .taxonomy-list__name {
    color: var(--text-color-secondary);
    text-transform: uppercase;
    white-space: nowrap;

    &::after {
      content: " =";
    }
  }

  .taxonomy-list__terms {
    --spacing: 1ch;

    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--spacing);
    list-style-type: none;
    margin-block: 0;
    padding-inline-start: 0;

    li {
      padding-inline-start: 0;
      white-space: nowrap;
    }

    li:not(:first-child)::before {
      color: var(--text-color-secondary);
      content: ":";
      margin-inline-end: var(--spacing);
    }
  }
}