/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Hide scrollbar for scroll area component */
.scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* Scroll Area Fade Effects - Register custom properties for animation */
@property --fade-start-opacity {
    syntax: "<number>";
    initial-value: 1;
    inherits: false;
}

@property --fade-end-opacity {
    syntax: "<number>";
    initial-value: 1;
    inherits: false;
}

@property --fade-start-x-opacity {
    syntax: "<number>";
    initial-value: 1;
    inherits: false;
}

@property --fade-end-x-opacity {
    syntax: "<number>";
    initial-value: 1;
    inherits: false;
}

@property --fade-start-y-opacity {
    syntax: "<number>";
    initial-value: 1;
    inherits: false;
}

@property --fade-end-y-opacity {
    syntax: "<number>";
    initial-value: 1;
    inherits: false;
}

/* Scroll Area Fade Effects */
.scroll-fade-x {
    --fade-start-opacity: 1;
    --fade-end-opacity: 1;
    --fade-size: 25px;

    mask-image: linear-gradient(
        to right,
        hsl(0 0% 0% / var(--fade-start-opacity)),
        black var(--fade-size),
        black calc(100% - var(--fade-size)),
        hsl(0 0% 0% / var(--fade-end-opacity))
    );
    -webkit-mask-image: linear-gradient(
        to right,
        hsl(0 0% 0% / var(--fade-start-opacity)),
        black var(--fade-size),
        black calc(100% - var(--fade-size)),
        hsl(0 0% 0% / var(--fade-end-opacity))
    );

    transition:
        --fade-start-opacity 300ms ease-out,
        --fade-end-opacity 300ms ease-out;
}

.scroll-fade-y {
    --fade-start-opacity: 1;
    --fade-end-opacity: 1;
    --fade-size: 40px;

    mask-image: linear-gradient(
        to bottom,
        hsl(0 0% 0% / var(--fade-start-opacity)),
        black var(--fade-size),
        black calc(100% - var(--fade-size)),
        hsl(0 0% 0% / var(--fade-end-opacity))
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        hsl(0 0% 0% / var(--fade-start-opacity)),
        black var(--fade-size),
        black calc(100% - var(--fade-size)),
        hsl(0 0% 0% / var(--fade-end-opacity))
    );

    transition:
        --fade-start-opacity 300ms ease-out,
        --fade-end-opacity 300ms ease-out;
}

.scroll-fade-both {
    --fade-start-x-opacity: 1;
    --fade-end-x-opacity: 1;
    --fade-start-y-opacity: 1;
    --fade-end-y-opacity: 1;
    --fade-size: 40px;
    --fade-top-offset: 0px; /* Offset from top to skip header areas */
    --fade-left-offset: 0px; /* Offset from left to skip sticky columns */

    mask-image:
        linear-gradient(
            to right,
            black var(--fade-left-offset),
            hsl(0 0% 0% / var(--fade-start-x-opacity)) var(--fade-left-offset),
            black calc(var(--fade-left-offset) + var(--fade-size)),
            black calc(100% - var(--fade-size)),
            hsl(0 0% 0% / var(--fade-end-x-opacity))
        ),
        linear-gradient(
            to bottom,
            black var(--fade-top-offset),
            hsl(0 0% 0% / var(--fade-start-y-opacity)) var(--fade-top-offset),
            black calc(var(--fade-top-offset) + var(--fade-size)),
            black calc(100% - var(--fade-size)),
            hsl(0 0% 0% / var(--fade-end-y-opacity))
        );
    -webkit-mask-image:
        linear-gradient(
            to right,
            black var(--fade-left-offset),
            hsl(0 0% 0% / var(--fade-start-x-opacity)) var(--fade-left-offset),
            black calc(var(--fade-left-offset) + var(--fade-size)),
            black calc(100% - var(--fade-size)),
            hsl(0 0% 0% / var(--fade-end-x-opacity))
        ),
        linear-gradient(
            to bottom,
            black var(--fade-top-offset),
            hsl(0 0% 0% / var(--fade-start-y-opacity)) var(--fade-top-offset),
            black calc(var(--fade-top-offset) + var(--fade-size)),
            black calc(100% - var(--fade-size)),
            hsl(0 0% 0% / var(--fade-end-y-opacity))
        );
    mask-composite: intersect;
    -webkit-mask-composite: source-in;

    transition:
        --fade-start-x-opacity 300ms ease-out,
        --fade-end-x-opacity 300ms ease-out,
        --fade-start-y-opacity 300ms ease-out,
        --fade-end-y-opacity 300ms ease-out;
}

/* Update fade opacity when scrolled - fade appears when there's overflow */
[data-overflow-x-start] .scroll-fade-x,
[data-overflow-x-start] .scroll-fade-both {
    --fade-start-opacity: 0;
    --fade-start-x-opacity: 0;
}

[data-overflow-x-end] .scroll-fade-x,
[data-overflow-x-end] .scroll-fade-both {
    --fade-end-opacity: 0;
    --fade-end-x-opacity: 0;
}

[data-overflow-y-start] .scroll-fade-y,
[data-overflow-y-start] .scroll-fade-both {
    --fade-start-opacity: 0;
    --fade-start-y-opacity: 0;
}

[data-overflow-y-end] .scroll-fade-y,
[data-overflow-y-end] .scroll-fade-both {
    --fade-end-opacity: 0;
    --fade-end-y-opacity: 0;
}