qs-button-options-scroll-container {
    display: block;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    & .button-pagination {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: min-content;
        gap: 1em;
        margin-top: 1em;
        & .button {
            font-size: var(--font-size-step-0);
            line-height: 2.5;
            border-radius: 4px;
            transition: box-shadow .2s ease;
            &:not([disabled]):hover {
                box-shadow: 0 12px 30px -18px var(--primary-accent-colour);
            }
            &:not([disabled]):active {
                box-shadow: 0 6px 20px -9px var(--primary-accent-colour);
            }
            background-repeat: no-repeat;
            background-size: 1em;
            &.prev {
                background-image: url(../../images/icons/chevron-left.svg);
                background-position: center left 5%;
                background-size: .8em;
            }
            &.next {
                background-image: url(../../images/icons/chevron-right.svg);
                background-position: center right 5%;
                background-size: .8em;
            }
        }
    }
}
qs-button-options {
    --column-count: 2;
    display: grid;
    grid-template-columns: repeat(var(--column-count),minmax(0,1fr));
    gap: .8em var(--column-gap);
    align-content: start;
    overflow: scroll;
    scrollbar-width: none;
    font-size: var(--font-size-step-0);
    &::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}