@layer components {
  .filters {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);

    > * + * {
      border-block-start: 1px solid var(--color-border);
      margin-block-start: var(--block-space-half);
      padding-block-start: var(--block-space);
    }
  }

  .filter__header {
    font-size: var(--text-sm);
    font-weight: 700;
    margin-block-end: var(--block-space-half);
  }

  .filter__list {
    display: flex;
    flex-direction: column;

    label {
      display: flex;
      overflow: hidden;
      flex: 1;
      align-items: center;
      font-size: var(--text-sm);
      gap: var(--inline-space-half);
      min-inline-size: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    input[type="checkbox"],
    input[type="radio"] {
      accent-color: var(--color-primary);
    }
  }

  .filter__list-item {
    display: flex;
    border-radius: 1rem;
    gap: var(--inline-space-half);
    padding-block: var(--block-space-quarter);
    padding-inline: var(--inline-space-half);

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

    &:has(input:checked) {
      label {
        font-weight: 500;
      }
    }
  }

  .filter__count {
    display: flex;
    flex-shrink: 0;
    border-radius: 1rem;
    background-color: var(--color-tag-bg);
    color: var(--color-tag);
    font-size: var(--text-xs);
    margin-inline-start: auto;
    padding-inline: var(--inline-space-half);
  }
}