.pwr-scroll-shadow__wrapper {
    position: relative;
}

.pwr-scroll-shadow__root {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}
.pwr-scroll-shadow__root--hor {
    overflow-x: auto;
}

.pwr-scroll-shadow__sensor--hor {
    height: 1px;
    grid-column: 1 / -1;
    width: 100%;
}
/* Burger menu specific (vert sensor wrapper) */
.pwr-scroll-shadow__wrapper > .hs_cos_wrapper_type_menu {
    display: block;
    height: 100%;
}

.pwr-scroll-shadow__wrapper--vert,
.pwr-scroll-shadow__wrapper--hor {
    --mask-position: 0 0, 100% 0;
    mask-position: var(--mask-position);
    -webkit-mask-position: var(--mask-position);
    -moz-mask-position: var(--mask-position);

    --mask-repeat: no-repeat, no-repeat;
    mask-repeat: var(--mask-repeat);
    -webkit-mask-repeat: var(--mask-repeat);
    -moz-mask-repeat: var(--mask-repeat);
}
.pwr-scroll-shadow__wrapper--hor {
    --scrollbar-height: 0px;
    --mask-width: 25px;
    
    --mask-size: 100% calc(100% - var(--scrollbar-height)), 100% var(--scrollbar-height);
    mask-size: var(--mask-size);
    -webkit-mask-size:  var(--mask-size);
    -moz-mask-size:  var(--mask-size);
}
.pwr-scroll-shadow__wrapper--hor.pwr-scroll-shadow--is-overflowing:not(.pwr-scroll-shadow--is-scrolled-left) {
    --mask-image: linear-gradient(
        to right,
        transparent,
        black var(--mask-width)), linear-gradient(black, black);
    mask-image: var(--mask-image);
    -webkit-mask-image: var(--mask-image);
    -moz-mask-image: var(--mask-image);
}
.pwr-scroll-shadow__wrapper--hor.pwr-scroll-shadow--is-overflowing:not(.pwr-scroll-shadow--is-scrolled-right) {
    --mask-image: linear-gradient(
        to right,
        black calc(100% - var(--mask-width)),
        transparent), linear-gradient(black, black);
    mask-image: var(--mask-image);
    -webkit-mask-image: var(--mask-image);
    -moz-mask-image: var(--mask-image);
}
.pwr-scroll-shadow__wrapper--hor.pwr-scroll-shadow--is-overflowing:not(.pwr-scroll-shadow--is-scrolled-left):not(.pwr-scroll-shadow--is-scrolled-right) {
    --mask-image: linear-gradient(
        to right,
        transparent,
        black var(--mask-width),
        black calc(100% - var(--mask-width)),
        transparent), linear-gradient(black, black);
    mask-image: var(--mask-image);
    -webkit-mask-image: var(--mask-image);
    -moz-mask-image: var(--mask-image);
}

.pwr-scroll-shadow__wrapper--vert {
    --scrollbar-width: 0px;
    --mask-height: 80px;
    
    --mask-size: calc(100% - var(--scrollbar-width)) 100%, var(--scrollbar-width) 100%;
    mask-size: var(--mask-size);
    -webkit-mask-size:  var(--mask-size);
    -moz-mask-size:  var(--mask-size);
}
.pwr-scroll-shadow__wrapper--vert.pwr-scroll-shadow--is-overflowing:not(.pwr-scroll-shadow--is-scrolled-top) {
    --mask-image: linear-gradient(
        to bottom,
        transparent,
        black var(--mask-height)), linear-gradient(black, black);
    mask-image: var(--mask-image);
    -webkit-mask-image: var(--mask-image);
    -moz-mask-image: var(--mask-image);
}
.pwr-scroll-shadow__wrapper--vert.pwr-scroll-shadow--is-overflowing:not(.pwr-scroll-shadow--is-scrolled-bottom) {
    --mask-image: linear-gradient(
        to bottom,
        black calc(100% - var(--mask-height)),
        transparent), linear-gradient(black, black);
    mask-image: var(--mask-image);
    -webkit-mask-image: var(--mask-image);
    -moz-mask-image: var(--mask-image);
}
.pwr-scroll-shadow__wrapper--vert.pwr-scroll-shadow--is-overflowing:not(.pwr-scroll-shadow--is-scrolled-top):not(.pwr-scroll-shadow--is-scrolled-bottom) {
    --mask-image: linear-gradient(
        to bottom,
        transparent,
        black var(--mask-height),
        black calc(100% - var(--mask-height)),
        transparent), linear-gradient(black, black);
    mask-image: var(--mask-image);
    -webkit-mask-image: var(--mask-image);
    -moz-mask-image: var(--mask-image);
}

.pwr-scroll-shadow__wrapper--hor-coloured::before, 
.pwr-scroll-shadow__wrapper--hor-coloured::after,
.pwr-scroll-shadow__wrapper--vert-coloured::before, 
.pwr-scroll-shadow__wrapper--vert-coloured::after {
    content: "";
    position: absolute;
    opacity: 0;
    transition: opacity 0.4s;
}
.pwr-scroll-shadow__wrapper--hor-coloured::before, 
.pwr-scroll-shadow__wrapper--hor-coloured::after {
    top: 0;
    bottom: 0;
    width: 25px;
    z-index: 1;
}
.pwr-scroll-shadow__wrapper--hor-coloured::before {
    left: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.035));
}
.pwr-scroll-shadow__wrapper--hor-coloured::after {
    right: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.035));
}
.pwr--dark .pwr-scroll-shadow__wrapper--hor-coloured::before,
.pwr-scroll-shadow__wrapper--hor-coloured.pwr--dark::before {
    background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
.pwr--dark .pwr-scroll-shadow__wrapper--hor-coloured::after,
.pwr-scroll-shadow__wrapper--hor-coloured.pwr--dark::after {
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
.pwr-scroll-shadow__wrapper--hor-coloured.pwr-scroll-shadow--is-overflowing:not(.pwr-scroll-shadow--is-scrolled-left)::before,
.pwr-scroll-shadow__wrapper--hor-coloured.pwr-scroll-shadow--is-overflowing:not(.pwr-scroll-shadow--is-scrolled-right)::after {
    opacity: 1;
}

.pwr-scroll-shadow__wrapper--vert-coloured::before, 
.pwr-scroll-shadow__wrapper--vert-coloured::after {
    left: 0;
    right: 0;
    height: 25px;
}
.pwr-scroll-shadow__wrapper--vert-coloured::before {
    top: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.035));
}
.pwr-scroll-shadow__wrapper--vert-coloured::after {
    bottom: 0;
    background: linear-gradient(to bottm, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.035));
}
.pwr--dark .pwr-scroll-shadow__wrapper--vert-coloured::before,
.pwr-scroll-shadow__wrapper--vert-coloured.pwr--dark::before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
.pwr--dark .pwr-scroll-shadow__wrapper--vert-coloured::after,
.pwr-scroll-shadow__wrapper--vert-coloured.pwr--dark::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
.pwr-scroll-shadow__wrapper--vert-coloured.pwr-scroll-shadow--is-overflowing:not(.pwr-scroll-shadow--is-scrolled-top)::before,
.pwr-scroll-shadow__wrapper--vert-coloured.pwr-scroll-shadow--is-overflowing:not(.pwr-scroll-shadow--is-scrolled-bottom)::after {
    opacity: 1;
}