@layer components {
  .filters {
    view-transition-name: "filters";
    z-index: var(--z-popup);

    #header:has(&) {
      position: relative;
      z-index: var(--z-popup);
    }

    .btn {
      --btn-border-color: var(--color-ink-medium);
    }
  }

  .filter {
    &[aria-selected] {
      display: flex;
    }
  }

  .filter__button {
    --btn-border-size: 0;
    --btn-font-weight: 400;
    --btn-icon-size: 0.7em;
    --btn-padding: 0.3em 0.7em;

    inline-size: 100%;
    justify-content: space-between;
    text-align: start;

    span {
      overflow: hidden;
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    img {
      display: none;
    }

    &:has(input[type=checkbox]:checked) img {
      display: block;
    }
  }

  .filter__columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-block-size: 50dvh;
  }

  .filter__label {
    display: flex;
    inline-size: 100%;
    padding: 0.3em 0.7em;

    strong {
      overflow: hidden;
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .filter__menu {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    list-style: none;
    margin: 0;
    min-inline-size: 0;
    overflow-x: auto;
    padding: 0 var(--inline-space);
    position: relative;
    row-gap: 0.2em;

    &::before {
      block-size: 100%;
      border-block: 0;
      border-inline-end: 0;
      border-inline-start: 1px solid var(--color-ink-lighter);
      content: "";
      display: inline-flex;
      inline-size: 0;
      position: absolute;
      inset: 0 auto 0 0;
    }

    &:first-child::before {
      display: none;
    }

    li {
      text-align: start;
    }
  }

  .quick-filter {
    &:not(.default-value):has(.checked) {
      .input--select {
        --input-background: var(--color-selected);
      }
    }

    @media (max-width: 80ch) {
      display: none;
    }
  }
}

