.wp-block-one-202x-query-filters {
    min-inline-size: 0;
    overflow-wrap: anywhere;

    & fieldset {
        min-inline-size: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    & .one-202x-query-filters__heading {
        padding: 0;
        margin-block-end: var(--wp--preset--spacing--sm);
        font-weight: 700;
    }

    & .one-202x-query-filters__options {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem var(--wp--preset--spacing--md);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    &.is-vertical .one-202x-query-filters__options {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    & .one-202x-query-filters__options {
        & label {
            display: inline-flex;
            align-items: center;
            gap: 0.5em;
            min-block-size: 2rem;
            cursor: pointer;
        }

        & input {
            flex-shrink: 0;
            margin: 0;
            accent-color: var(--wp--preset--color--contrast);
        }
    }

    & .one-202x-query-filters__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--wp--preset--spacing--sm);
        margin-block-start: var(--wp--preset--spacing--md);

        & a {
            color: inherit;
        }

        & button {
            min-block-size: 2.75rem;
            padding: 0.75em 1.25em;
            border: 0;
            border-radius: var(--wp--custom--radius--control);
            background: var(--wp--preset--color--contrast);
            color: var(--wp--preset--color--base);
            font: inherit;
            line-height: 1.2;
            cursor: pointer;

            &:hover {
                background: var(--wp--preset--color--accent);
                color: var(--wp--preset--color--contrast);
            }
        }
    }

    & .one-202x-query-filters__empty {
        margin: 0;
    }

    &.is-style-one-202x-category-tabs {
        & .one-202x-query-filters__options {
            flex-wrap: nowrap;
            align-items: center;
            gap: 1.75rem;
            overflow-x: auto;
            overscroll-behavior-inline: contain;
            scrollbar-width: thin;
        }

        & li {
            flex-shrink: 0;
        }

        & :is(a, summary) {
            display: block;
            padding-block: 0.75rem;
            color: inherit;
            font-size: var(--wp--preset--font-size--body);
            font-weight: 400;
            line-height: 1.4;
            letter-spacing: 0.5px;
            text-decoration: none;
            white-space: nowrap;

            &[aria-current="true"] {
                padding-inline: 1.5rem;
                border-radius: var(--wp--custom--radius--control);
                background: var(--one-202x-category-active-background, var(--wp--preset--color--contrast));
                color: var(--one-202x-category-active-color, var(--wp--preset--color--base));
            }

            &:hover {
                text-decoration: underline;
                text-underline-offset: 0.2em;
            }

            &:focus-visible {
                outline-offset: -3px;
            }
        }
    }

    &.is-grouped {
        & > .one-202x-query-filters__options {
            flex-wrap: wrap;
            overflow: visible;
        }

        & .one-202x-query-filters__group {
            position: relative;
        }

        & summary {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            list-style: none;
            cursor: pointer;

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

            &::after {
                content: "";
                inline-size: 0.375rem;
                block-size: 0.375rem;
                border-inline-end: 1px solid currentColor;
                border-block-end: 1px solid currentColor;
                transform: translateY(-2px) rotate(45deg);
            }

            &[data-active="true"] {
                text-decoration: underline;
                text-underline-offset: 0.4em;
            }
        }

        & details[open] > summary::after {
            transform: translateY(2px) rotate(225deg);
        }

        & .one-202x-query-filters__group-options {
            position: absolute;
            inset-block-start: 100%;
            inset-inline-start: 0;
            z-index: 5;
            box-sizing: border-box;
            inline-size: max-content;
            min-inline-size: 10rem;
            max-inline-size: min(16rem, calc(100vw - 3rem));
            margin: 0;
            padding: 0.5rem 0.875rem;
            border: 1px solid var(--wp--preset--color--grey-200, currentColor);
            background: var(--wp--preset--color--base);
            list-style: none;

            & a {
                display: block;
                min-block-size: 2.5rem;
                padding-block: 0.5rem;
                white-space: normal;
            }
        }

        & > .one-202x-query-filters__options > li:has(.one-202x-query-filters__group):not(:has(~ li .one-202x-query-filters__group)) .one-202x-query-filters__group-options {
            inset-inline-start: auto;
            inset-inline-end: 0;
        }
    }
}

.wp-block-one-202x-query-filters {
    &.is-style-one-202x-filter-buttons {
        & .one-202x-query-filters__options {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.5rem;
        }

        & a {
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            min-block-size: 3rem;
            padding: 0.75rem;
            border: 1px solid var(--wp--preset--color--contrast);
            border-radius: 10px;
            background: var(--wp--preset--color--base);
            color: var(--wp--preset--color--contrast);
            font-size: var(--wp--preset--font-size--small);
            line-height: 1.25;
            letter-spacing: 0;
            text-align: center;
            text-decoration: none;

            &:hover,
            &[aria-current="true"] {
                border-color: var(--wp--preset--color--contrast);
                background: var(--wp--preset--color--contrast);
                color: var(--wp--preset--color--base);
            }

            &:focus-visible {
                outline: 2px solid var(--wp--preset--color--contrast);
                outline-offset: 3px;
            }
        }
    }

    &.is-style-one-202x-filter-buttons .one-202x-query-filters__heading,
    & label.one-202x-query-filters__heading {
        display: block;
        margin: 0 0 0.5rem;
        font-size: var(--wp--preset--font-size--small);
        font-weight: 400;
        line-height: 1.25;
        letter-spacing: 0;
    }

    & select {
        box-sizing: border-box;
        inline-size: 100%;
        min-block-size: 3rem;
        padding: 0.75rem;
        border: 1px solid currentColor;
        border-radius: 10px;
        appearance: none;
        background: var(--wp--preset--color--base) url("../../assets/icons/one-202x-chevron-down.svg") no-repeat right 1.125rem center / 0.75rem auto;
        padding-inline-end: 3rem;
        color: inherit;
        font-family: inherit;
        font-size: var(--wp--preset--font-size--small);
        line-height: 1.25;
    }
}