/**
 * Scrollable select panels (6 visible rows) — see scroll-select.js
 */
:root {
    --scroll-select-row-height: 2.625rem;
    --scroll-select-visible-rows: 6;
}

select.select-scroll-panel {
    cursor: pointer;
}

select.select-scroll-panel.is-expanded,
select.select-scroll-panel[size]:not([size="1"]) {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(var(--scroll-select-row-height) * var(--scroll-select-visible-rows));
    max-height: calc(var(--scroll-select-row-height) * var(--scroll-select-visible-rows));
    scrollbar-width: thin;
    scrollbar-color: rgba(145, 95, 109, 0.45) rgba(242, 232, 234, 0.9);
}

select.select-scroll-panel.is-expanded option,
select.select-scroll-panel[size]:not([size="1"]) option {
    padding: 0.45rem 0.75rem;
    line-height: 1.35;
}

select.select-scroll-panel.is-expanded::-webkit-scrollbar,
select.select-scroll-panel[size]:not([size="1"])::-webkit-scrollbar {
    width: 8px;
}

select.select-scroll-panel.is-expanded::-webkit-scrollbar-thumb,
select.select-scroll-panel[size]:not([size="1"])::-webkit-scrollbar-thumb {
    background: rgba(145, 95, 109, 0.4);
    border-radius: 999px;
}

select.select-scroll-panel.is-expanded::-webkit-scrollbar-track,
select.select-scroll-panel[size]:not([size="1"])::-webkit-scrollbar-track {
    background: rgba(242, 232, 234, 0.85);
    border-radius: 999px;
}

/* Admin forms */
.admin-body select.select-scroll-panel.is-expanded {
    height: calc(var(--scroll-select-row-height) * var(--scroll-select-visible-rows));
    max-height: calc(var(--scroll-select-row-height) * var(--scroll-select-visible-rows));
}