.Polaris-Scrollable_1ed9o { --pc-scrollable-shadow-size: var(--p-space-5); --pc-scrollable-shadow-color: rgba(0, 0, 0, 0.15); --pc-scrollable-shadow-bottom: 0 var(--pc-scrollable-shadow-size)
    var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-size)
    var(--pc-scrollable-shadow-color); --pc-scrollable-shadow-top: 0 calc(var(--pc-scrollable-shadow-size)*-1)
    var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-size)
    var(--pc-scrollable-shadow-color); --pc-scrollable-max-height: none; -webkit-overflow-scrolling: touch; position: relative; max-height: var(--pc-scrollable-max-height); overflow-x: hidden; overflow-y: hidden; /* Prevent Scrollable's box shadows overflowing the rounded corners of this element on Safari prior to tech preview version 156. See: https://bugs.webkit.org/show_bug.cgi?id=68196 */ isolation: isolate; }

.Polaris-Scrollable_1ed9o:focus { outline: var(--p-border-width-2) solid var(--p-color-border-interactive-focus); outline-offset: var(--p-space-05); }

.Polaris-Scrollable_1ed9o.Polaris-Scrollable--hasTopShadow_cgwp0, .Polaris-Scrollable_1ed9o.Polaris-Scrollable--hasBottomShadow_all2n { /* Why not combine the box shadows onto one element? Because then it would need to be height: 100%, but that doesn't work when there's no explicit height set on the parent element (eg; for the Modal component which uses min-height: 80vh instead). */ }

.Polaris-Scrollable_1ed9o.Polaris-Scrollable--hasTopShadow_cgwp0::before, .Polaris-Scrollable_1ed9o.Polaris-Scrollable--hasTopShadow_cgwp0::after, .Polaris-Scrollable_1ed9o.Polaris-Scrollable--hasBottomShadow_all2n::before, .Polaris-Scrollable_1ed9o.Polaris-Scrollable--hasBottomShadow_all2n::after { content: ''; /* Using CSS sticky to position the pseudo elements relative to the scroll container insead of relative to the contents */ position: sticky; left: 0; display: block; pointer-events: none; /* height: 0 ensures it does not take up any static space, but still abides by position: sticky rules (ie; sorta position: fixed, but relative to the scroll container). */ height: var(--p-space-0); /* Full width to cover the entire scrollable container */ width: 100%; /* Arbitrarily picked this because it sorta sits above other elements most of the time without obscuring modals that might be above, etc. See https://github.com/Shopify/polaris/pull/9668/files#diff-b4fd34abf294f8d6bdcf784136be2ac82883085b8b0f91e450b2210eb6caaef9R70 */ z-index: 32; }

.Polaris-Scrollable_1ed9o.Polaris-Scrollable--hasTopShadow_cgwp0::before, .Polaris-Scrollable_1ed9o.Polaris-Scrollable--hasBottomShadow_all2n::before { top: 0; }

.Polaris-Scrollable_1ed9o.Polaris-Scrollable--hasTopShadow_cgwp0::after, .Polaris-Scrollable_1ed9o.Polaris-Scrollable--hasBottomShadow_all2n::after { bottom: 0; }

.Polaris-Scrollable_1ed9o.Polaris-Scrollable--hasTopShadow_cgwp0::before { box-shadow: var(--pc-scrollable-shadow-top); }

.Polaris-Scrollable_1ed9o.Polaris-Scrollable--hasBottomShadow_all2n::after { box-shadow: var(--pc-scrollable-shadow-bottom); }

.Polaris-Scrollable--horizontal_17qq4 { overflow-x: auto; }

.Polaris-Scrollable--vertical_uiuuj { overflow-y: auto; }