/* A bar carries several of these and the panel is positioned against the page rather than against
   the pill's own box, so without the scope the name of one pill would reach the next one's panel. */
.filter {
    anchor-scope: --filter-pill;
    display: flex;
}

.filter__pill {
    anchor-name: --filter-pill;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    /* 46px → 64px. */
    min-block-size: clamp(2.875rem, 2.875rem + (100vw - 24.375rem) * 0.01345, 4rem);
    /* 20px → 30px before the label, 20px → 25px after the icon. */
    padding-inline: clamp(1.25rem, 1.25rem + (100vw - 24.375rem) * 0.00747, 1.875rem)
        clamp(1.25rem, 1.25rem + (100vw - 24.375rem) * 0.00374, 1.5625rem);
    border: 1px solid transparent;
    border-radius: 6.25rem;
    background-color: var(--sav-color-hellgrau);
    color: var(--sav-color-dunkelblau);
    font-size: var(--sav-text-s-size);
    font-weight: var(--sav-font-weight-regular);
    white-space: nowrap;
    cursor: pointer;
    list-style: none;

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

    /* Only where a pointer can rest without pressing: a touch screen keeps the state after the
       tap, over a list the tap has already changed. */
    @media (hover: hover) and (pointer: fine) {
        &:hover {
            color: var(--sav-color-dunkelblau-hover);
        }
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }

    /* Read off the radio, so the pill stays filled after an answer that replaced the list alone. */
    .filter__dropdown:not([open]):has(.filter__control:checked) & {
        background-color: var(--sav-color-dunkelblau);
        border-color: var(--sav-color-dunkelblau);
        color: var(--sav-color-weiss);
    }

    /* Not while the panel is open, where a dark ground would leave the light label unreadable. */
    @media (hover: hover) and (pointer: fine) {
        .filter:has(.filter__control:checked):not(:has(.filter__dropdown[open])):has(
                :is(.filter__pill, .filter__clear):hover
            )
            & {
            background-color: var(--sav-color-dunkelblau-hover);
            border-color: var(--sav-color-dunkelblau-hover);
        }
    }
}

.filter__chevron {
    display: flex;
    flex: none;

    /* Room stays for the cross the remove button draws over this edge. */
    .filter__dropdown:not([open]):has(.filter__control:checked) & {
        visibility: hidden;
    }

    & svg {
        inline-size: 1.5rem;
        block-size: 1.5rem;
        /* The shared chevron points left; a quarter turn makes the down-caret this needs. */
        rotate: -90deg;

        .filter__dropdown[open] & {
            rotate: 90deg;
        }
    }
}

/* The other side, taken where the panel would otherwise stand past the end of the band. */
@position-try --filter-panel-flipped {
    inset-inline: auto anchor(end);
    margin-inline: var(--filter-panel-gutter) 0;
}

/* A fieldset brings a border, a margin and a padding of its own. The panel hangs off the pill
   itself rather than off the bar around it, so no rule has to know where in a wrapping row a pill
   ended up — and it is positioned against the page rather than against the pill, since the side it
   takes is decided by what fits and the pill's own box is too narrow to decide anything in. */
.filter__panel {
    /* The band the bar stands in — a bar on a narrower one names it, everything else gets the
       page's. What lies beside the band is where the panel may not open, which is what the
       trailing margin holds free and therefore what decides which side it opens to. */
    --filter-panel-width: var(--filter-panel-band, var(--sav-band-width));
    --filter-panel-gutter: calc((100vw - var(--filter-panel-width)) / 2);

    position: absolute;
    z-index: 1;
    position-anchor: --filter-pill;
    inset-block-start: anchor(end);
    inset-inline: anchor(start) auto;
    position-try-fallbacks: --filter-panel-flipped;
    /* The 30px the design leaves between the pill and its panel. */
    margin-block: 1.875rem 0;
    margin-inline: 0 var(--filter-panel-gutter);
    display: flex;
    flex-direction: column;
    /* The hidden legend is out of flow, so no gap falls above the first row. */
    gap: 0.25rem;
    /* The widest row sets the width; squeezed to its pill, the tick would leave the box. */
    inline-size: max-content;
    /* Never narrower than its pill nor than the drawn 228px, and never wider than the band — which
       is what the outer `min()` is for, since a minimum beats a maximum. */
    min-inline-size: min(max(anchor-size(inline), 14.25rem), var(--filter-panel-width));
    max-inline-size: var(--filter-panel-width);
    padding-block: 1.5rem;
    padding-inline: 0;
    border: 0;
    border-radius: var(--sav-radius);
    background-color: var(--sav-color-weiss);
    box-shadow: 2px 2px 12px rgb(0 0 0 / 0.1);
}

.filter__option {
    margin: 0;
}

/* The label draws the row; the control is only what the form reads and the keyboard drives. */
.filter__control {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

.filter__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    /* 45px */
    min-block-size: 2.8125rem;
    /* 28px before the term, 20px after the tick. */
    padding-inline: 1.75rem 1.25rem;
    color: var(--sav-color-dunkelblau);
    font-size: var(--sav-text-s-size);
    font-weight: var(--sav-font-weight-regular);
    cursor: pointer;

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            background-color: var(--sav-color-hellgrau);
        }
    }

    .filter__control:checked + & {
        background-color: var(--sav-color-hellgrau);
    }

    /* The ring the hidden control cannot draw for itself. */
    .filter__control:focus-visible + & {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: -2px;
    }
}

.filter__check {
    display: none;
    flex: none;

    & svg {
        inline-size: 1.5rem;
        block-size: 1.5rem;
    }

    .filter__control:checked + .filter__label & {
        display: flex;
    }
}

/* Over the pill's trailing edge, and against the pill rather than the bar around it, which carries
   no box of its own to position in any more. */
.filter__clear {
    position: absolute;
    position-anchor: --filter-pill;
    inset-block: anchor(start) anchor(end);
    inset-inline-end: anchor(end);
    /* Shown by the last rule in this block, where a term is chosen. */
    display: none;
    align-items: center;
    padding-block: 0;
    /* Sits in the trailing padding, over the hidden chevron. */
    padding-inline: 0 clamp(1.25rem, 1.25rem + (100vw - 24.375rem) * 0.00374, 1.5625rem);
    border: 0;
    background: none;
    color: var(--sav-color-weiss);
    cursor: pointer;

    &:focus-visible {
        outline: 2px solid var(--sav-color-weiss);
        outline-offset: -2px;
    }

    & svg {
        inline-size: 1.25rem;
        block-size: 1.25rem;
    }

    /* Only while the panel is closed: an open one shows its chevron again. */
    .filter:has(.filter__control:checked):not(:has(.filter__dropdown[open])) & {
        display: flex;
    }
}

.filter__story {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}