@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);
    }
  }

  /* Phones: a group folds to its title, what it is set to and a chevron.
     Desktop: every group is open, under its title alone. */
  .filter__header {
    display: grid;
    align-items: center;
    cursor: pointer;
    gap: var(--inline-space-half);
    grid-template-columns: auto minmax(0, 1fr) auto;
    list-style: none;
    padding-block: 0.875rem;

    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      block-size: 0.5rem;
      border-block-end: 2px solid var(--color-muted);
      border-inline-end: 2px solid var(--color-muted);
      content: "";
      inline-size: 0.5rem;
      margin-inline: 0.25rem;
      rotate: 45deg;
      translate: 0 -0.125rem;

      [open] > & {
        rotate: 225deg;
        translate: 0 0.125rem;
      }
    }

    @media (width >= 860px) {
      display: block;
      margin-block-end: var(--block-space-half);
      padding-block: 0;
      pointer-events: none;

      &::after {
        display: none;
      }
    }
  }

  .filter__title {
    font-size: var(--text-base);
    font-weight: 600;

    @media (width >= 860px) {
      font-size: var(--text-sm);
      font-weight: 700;
    }
  }

  .filter__summary {
    overflow: hidden;
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;

    @media (width >= 860px) {
      display: none;
    }
  }

  /* Desktop: shown even while folded (the fold is the phone sheet's). */
  .filter {
    &::details-content {
      @media (width >= 860px) {
        display: block;
        block-size: auto;
        content-visibility: visible;
        opacity: 1;
      }
    }

    &[open] {
      padding-block-end: var(--block-space);

      @media (width >= 860px) {
        padding-block-end: 0;
      }
    }
  }

  /* A minimum (capacity, speed, app class) is one choice of a few
     values: chips, not a long column of radios. */
  .filter__list.filter__list--chips {
    display: grid;
    gap: 0.375rem;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));

    .filter__list-item {
      position: relative;
      padding: 0;

      &:hover {
        background: none;
      }
    }

    input[type="radio"] {
      position: absolute;
      opacity: 0;
    }

    label {
      padding: 0.5rem 0.625rem;
      border: 1.5px solid var(--color-border);
      border-radius: var(--border-radius);
      background-color: var(--color-surface);
      cursor: pointer;
      font-weight: 600;
      line-height: 1.25;
    }

    /* A touch leaves :hover stuck on the last chip tapped */
    @media (hover: hover) {
      label:hover {
        border-color: var(--color-ink);
      }
    }

    input:checked + label {
      border-color: var(--color-positive);
      box-shadow: 0 0 0 1px var(--color-positive) inset;
    }

    input:focus-visible + label {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }

    .filter__label-text {
      white-space: normal;
    }

    .filter__count {
      padding: 0;
      background: none;
      color: var(--color-muted);
      font-weight: 400;
    }
  }

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

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

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

  .filter__label-text {
    overflow: hidden;
    flex: 1;
    min-inline-size: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

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

    @media (hover: hover) {
      &: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);
  }
}