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

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

    & .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: var(--border-color-dark);
      background-color: var(--bg-dark);
      text-decoration: none;

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

.featured-tags {
  & strong small {
    color: var(--text-color-dark-faded);
  }

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

@media (prefers-color-scheme: dark) {
  .featured-tags {
    & strong small {
      color: var(--text-color-light-faded);
    }

    & .pill {
      color: var(--text-color-light);
    }
  }
}