#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: var(--facet-bg-mobile);
    transition:
        transform var(--transition-duration) var(--transition-timing),
        display var(--transition-duration) allow-discrete,
        overlay var(--transition-duration) allow-discrete;

    details {
        summary {
            padding: 0.125rem 0.375rem;
            cursor: zoom-in;
            list-style-type: revert;

            &::marker { color: var(--color-1); }
        }

        &[open] summary { cursor: zoom-out; }
        p > label > input { inline-size: 100%; }
    }

    h3 {
        inline-size: 100%;
        color: black;
        text-align: left;
        margin: 0;
    }

    hr {
        inline-size: 100%;
        height: 1px;
    }

    .radio {
        display: flex;
        flex-direction: column;
        accent-color: var(--color-1);
        gap: 0.5rem;

        .radio-list {
            display: grid;
            gap: 0.25rem;
        }
    }

    .facet-filter-date {
        margin-block-start: 0.3125rem;
        span { margin-inline-start: 0.3125rem; }
    }

    > button { justify-self: center; }
    > label { display: grid; }

    .country-selector {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        min-block-size: 2rem;
        inline-size: 100%;
        padding: 0.3125rem;

        &::picker-icon {
            color: var(--color-1);
            transition: rotate var(--transition-duration) var(--transition-timing);
        }

        &:open::picker-icon { rotate: 180deg; }

        option::checkmark { color: var(--color-2); }

        &[disabled] {
            background-color: ghostwhite;

            &::picker-icon { color: var(--gray); }
        }
    }

    .radio-inline-group {
        display: flex;
        align-items: center;
        gap: 0.25rem;

        label { display: contents; }
    }
}

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

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

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

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

    @starting-style { opacity: 0; }
}

#facet:popover-open::backdrop { opacity: 1; }

#facet:not(:popover-open)::backdrop { opacity: 0; }

@media (min-width: 50em) {
    #facet {
        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;
        gap: 1rem;
        padding: 1rem;
        background-color: white;
        popover: none;
    }

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

@media (prefers-reduced-motion: reduce) {
    #facet, #facet::backdrop { transition: none; }
}