/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Config

*/

$scroll-shadow-width: 20px !default;
$scroll-shadow-z: 5 !default;
$scroll-shadow-opacity: 0.08 !default;
$scroll-shadow-transition-ms: 160ms !default;

// Choose one:
// - "shadow" -> dark hint (works on any bg)
// - "fade"   -> fade to a known background color (cleaner if you know the bg)
$scroll-shadow-mode: shadow !default;

// Only used when $scroll-shadow-mode: fade
$scroll-shadow-bg: #fff !default;

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Mixins

*/

@function _shadow-color($opacity) {
    @return rgba(0, 0, 0, $opacity);
}

@mixin scroll-edge-overlay-base {
    content: "";
    position: absolute;
    top: 0;
    width: $scroll-shadow-width;
    height: 100%;
    pointer-events: none;
    z-index: $scroll-shadow-z;
    opacity: 0;
    transition: opacity $scroll-shadow-transition-ms ease;
}

@mixin scroll-edge-overlay-left {
    @if $scroll-shadow-mode == fade {
        background: linear-gradient(
            to right,
            $scroll-shadow-bg,
            rgba($scroll-shadow-bg, 0)
        );
    } @else {
        background: linear-gradient(
            to right,
            _shadow-color($scroll-shadow-opacity),
            rgba(0, 0, 0, 0)
        );
    }
}

@mixin scroll-edge-overlay-right {
    @if $scroll-shadow-mode == fade {
        background: linear-gradient(
            to left,
            $scroll-shadow-bg,
            rgba($scroll-shadow-bg, 0)
        );
    } @else {
        background: linear-gradient(
            to left,
            _shadow-color($scroll-shadow-opacity),
            rgba(0, 0, 0, 0)
        );
    }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Component

*/

// Assumes your scroll container is `.ekesto-responsive-table-container`.
.ekesto-responsive-table-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;

    .ekesto-responsive-table-inner {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    &::before {
        @include scroll-edge-overlay-base;
        left: 0;
        @include scroll-edge-overlay-left;
    }

    &::after {
        @include scroll-edge-overlay-base;
        right: 0;
        @include scroll-edge-overlay-right;
    }

    &.scrolling-enabled {
        &.scroll-left::before {
            opacity: 1;
        }
        &.scroll-right::after {
            opacity: 1;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .ekesto-responsive-table-container::before,
    .ekesto-responsive-table-container::after {
        transition: none;
    }
}
