#facet {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    margin: 0;
    inline-size: clamp(250px, 80vw, 320px);
    block-size: 100dvh;
    border: none;
    box-shadow: var(--facet-shadow);
    display: none;
    overflow-y: auto;
    padding: 1.5rem;
    gap: 1rem;
    background-color: var(--black);
    color: white;
    transition:
        transform var(--transition-duration) var(--transition-timing),
        display var(--transition-duration) allow-discrete,
        overlay var(--transition-duration) allow-discrete;

    h2 {
        margin-block: 0;
        text-align: center;
    }

    h3 {
        margin-block: 0;
        text-transform: capitalize;
    }

    .radio {
        display: grid;
        gap: 0.5rem;

        .radio-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem;

            .option {
                padding: 0.375rem 0.75rem;
                color: white;
                border-color: white;
            }
        }
    }

    .distance-filter {
        display: grid;
        gap: 0.5rem;
        accent-color: var(--color-1);

        output {
            display: block;
            font-weight: 500;
            text-align: center;
        }
    }

    .type-filter {
        display: grid;
        gap: 0.5rem;

        .nature--recommended { font-weight: bold; }
    }

    .other-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;

        h3 { inline-size: 100%; }
        .field { flex: 1 1 40%; }
    }

    button { justify-self: center; }

    &:popover-open {
        transform: translateX(0);
        display: grid;

        @starting-style { transform: translateX(-100%); }
    }

    &:not(:popover-open) { transform: translateX(-100%); }

    &::backdrop {
        background: var(--popover-backdrop-color);
        opacity: 0;
        transition:
            opacity var(--transition-duration) var(--transition-timing),
            overlay var(--transition-duration) allow-discrete,
            display var(--transition-duration) allow-discrete;

        @starting-style { opacity: 0; }
    }

    &:popover-open::backdrop { opacity: 1; }

    @media (min-width: 50em) {
        position: sticky;
        inset-block-start: 1rem;
        inset-inline-start: auto;
        inline-size: 18rem;
        block-size: fit-content;
        align-self: start;
        box-shadow: none;
        display: grid;
        padding: 1rem;
        popover: none;

        &:not(:popover-open) { transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        transition: none;

        &::backdrop { transition: none; }
    }
}