@layer components {
  .source-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--block-space);
    margin-block-end: var(--block-space-double);
  }

  .source-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half);
    flex: 1;
  }

  .source-filters__chip {
    background-color: var(--color-ink-lightest);
    border-radius: 99rem;
    border: 1px solid var(--color-ink-light);
    color: var(--color-ink);
    font-size: var(--text-small);
    font-weight: 500;
    padding: 0.4em 0.9em;
    text-decoration: none;
    transition: 100ms ease-out;
    transition-property: background-color, border-color, color;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-ink-lighter);
      }
    }
  }

  .source-filters__chip--active {
    background-color: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-ink-inverted);

    @media (any-hover: hover) {
      &:hover {
        filter: brightness(1.1);
      }
    }
  }

  .source-filters__add {
    flex-shrink: 0;
  }

  .source-filters__add-btn {
    font-size: var(--text-small);
  }
}