/* Filter bar and drawer, shared by the holdings list and the transactions list.
 * Both render the same shape: a toggle, a summary label, an add link, and a
 * drawer of checkable rows that expands from the footer. */
@layer components {
  .filter {
    border-block-start: var(--border);
    inline-size: 100%;
    min-block-size: 4rem;
    padding-block: var(--block-space-half) var(--block-space);
    padding-inline: var(--inline-space-double);
    transform-origin: bottom;
  }

  .filter__actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-block: var(--block-space-half);
  }

  .filter__toggle {
    cursor: pointer;

    /* The glyph is the control — it fills in once filtering is on */
    /* A chip that holds a glyph, rather than a glyph that is also a chip.
       .icon paints itself with background-color, which this rule needs for the
       filled state, so the two cannot be the same element. The chip owns the
       circle and sets `color`; the .icon inside reads it through
       currentColor. */
    .filter__toggle-icon {
      align-items: center;
      block-size: var(--icon-md);
      border-radius: 50%;
      border: 1px solid var(--color-link);
      color: var(--color-link);
      display: flex;
      inline-size: var(--icon-md);
      justify-content: center;
      padding: 0.2rem;

      .icon {
        --icon-color: currentColor; /* the chip flips this to ink-inverted */
        --icon-size: 100%;
      }
    }

    &:has(input:checked) .filter__toggle-icon {
      background-color: var(--color-link);
      color: var(--color-ink-inverted);
    }

    &:has(input:focus-visible) .filter__toggle-icon {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .filter__label {
    cursor: pointer;
    flex-grow: 1;
    padding-inline: var(--inline-space-half);
    text-align: center;
  }

  .filter__summary {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);

    strong {
      color: var(--color-link);
      font-weight: inherit;
    }
  }

  .filter__add {
    color: var(--color-link);
    display: block;

    .icon {
      --icon-size: var(--icon-md);
    }
  }

  .filter__drawer {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
    max-block-size: 0;
    overflow: scroll;
    scrollbar-width: none;
    transform-origin: bottom;
    transition: max-block-size 300ms ease-in-out;

    &::-webkit-scrollbar { display: none; }

    &.is-open {
      max-block-size: 100dvh;
    }
  }

  .filter__group {
    background-color: var(--color-ink-lightest);
    border-radius: 0.4em;
  }

  .filter__group-heading {
    color: var(--color-ink-medium);
    display: flex;
    font-size: var(--text-x-small);
    gap: var(--inline-space);
    padding-block: var(--block-space-half);
    padding-inline: var(--inline-space);
  }

  .filter__clear {
    color: var(--color-link);
    cursor: pointer;
  }

  .filter__row {
    align-items: center;
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space-half) var(--inline-space);

    & + & {
      border-block-start: var(--border);
    }

    .icon {
      --icon-size: var(--icon-sm);

      flex-shrink: 0;
    }

    p {
      flex-grow: 1;
      font-size: var(--text-small);
      margin: 0;
    }

    .filter__check {
      --icon-color: currentColor;

      color: var(--color-link);
      visibility: hidden;
    }

    &:has(input:checked) .filter__check {
      visibility: visible;
    }
  }

}