.character-filter {
    [popover] {
        &:popover-open {
            display: grid;
            grid-template-columns: 1fr 2rem 1fr;
            gap: 1rem;
        }

        .filter__delimiter {
            display: grid;
            place-items: center;
            color: var(--versus-sign, purple);

            > svg {
                position: absolute;
                width: 4rem;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -100%);
            }
        }

        > .button {
            grid-column: 1 / -1;
            justify-self: center;
            width: 8rem;
        }
    }
}