@layer components {
  .filter-pill {
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: 9999px;
    font-family: var(--typo-meta-family);
    font-size: var(--typo-meta-size);
    font-weight: 500;
    line-height: var(--typo-meta-lh);
    text-decoration: none;

    &[aria-current] {
      border: 1px solid transparent;
      background-color: var(--color-surface-dark);
      color: var(--color-content-on-dark);

      &:hover {
        background-color: var(--color-surface-dark-high);
      }
    }

    &:not([aria-current]) {
      border: 1px solid var(--color-content-on-light);
      color: var(--color-content-on-light);

      &:hover {
        background-color: var(--color-surface-dark-high);
        color: var(--color-content-on-dark);
      }
    }
  }
}