.featured-tags,
.tag-bar {
  & .pill {
    border-radius: 5px;
    border: 1px solid;
    border-color: rgba(197, 209, 222, 0.25);
    background-color: rgba(197, 209, 222, 0.15);
    margin-bottom: 0.5em;
    padding: 0.25em 1em;
    display: inline-block;
    font-size: var(--font-size-sm);
    color: var(--text-color-dark-faded);
    text-decoration: none;

    &:hover {
      color: var(--color-link);
      border: 1px solid var(--color-link);
    }

    & .pill-label {
      background-color: rgba(0, 0, 0, 0.15);
      border-radius: 0.5em;
      padding: 0 0.25em;
      margin-right: 0.25em;
      font-weight: bold;
    }
  }
}
@media (prefers-color-scheme: dark) {
  .featured-tags,
  .tag-bar {
    & .pill {
      color: var(--text-color-light-faded);
      border: 1px solid;
      border-color: rgba(0, 0, 0, 0.25);
      background-color: rgba(0, 0, 0, 0.15);
      text-decoration: none;

      &:hover {
        color: var(--color-brand-complement);
        border: 1px solid var(--color-brand-complement);
      }
    }
  }
}

.featured-tags .pill {
  color: var(--text-color-dark);
}

@media (prefers-color-scheme: dark) {
  .featured-tags .pill {
    color: var(--text-color-light);
  }
}