// Constraints for the shadow shape
$scroll-shadow-height: 6px;

.scroll-shadow-container {
    &::before,
    &::after {
        position: absolute;
        display: block;
        width: 100%;
        height: $scroll-shadow-height * 2;
        border-radius: inherit;
        opacity: 0;
        transition: opacity .1s ease-in-out;
        content: '';
    }

    // default
    &::before {
        top: -$scroll-shadow-height * 2;
        z-index: 20;
        box-shadow: 0 $scroll-shadow-height $scroll-shadow-height -2px rgba(0, 0, 0, .2);
    }

    &::after {
        bottom: -$scroll-shadow-height * 2;
        z-index: 30;
        box-shadow: 0 (-$scroll-shadow-height) $scroll-shadow-height -2px rgba(0, 0, 0, .2);
    }

    &.style--cover {
        &::before,
        &::after {
            width: 110%;
            margin: 0 -5%;
        }
    }

    &.style--contain {
        &::before {
            top: -($scroll-shadow-height + 10px);
        }

        &::after {
            bottom: -($scroll-shadow-height + 10px);
        }
    }

    &.is-showing-top-shadow::before {
        opacity: 1;
    }

    &.is-showing-bottom-shadow::after {
        opacity: 1;
    }
}