/* =============================================================================
   Scroll Shadow Container
   
   Ein wiederverwendbarer Scroll-Container mit dynamischen Schatten-Indikatoren,
   die anzeigen, ob mehr Inhalt nach oben/unten gescrollt werden kann.
   
   Die Schatten erscheinen/verschwinden automatisch basierend auf der Scroll-Position
   mittels CSS Scroll-Driven Animations.
   ============================================================================= */

:root {
    --scroll-shadow__color: rgba(0, 0, 0, 0.15);
    --scroll-shadow__size: 20px;
}

/* Block: scroll-shadow-container */
.scroll-shadow-container {
    position: relative;
    overflow-y: auto;
    background: white;
    /* Definiert den Scroll-Container als Timeline-Quelle */
    scroll-timeline: --container-scroll block;
}

/* Modifier: Verschiedene Höhen */
.scroll-shadow-container--xs {
    max-height: 150px;
}

.scroll-shadow-container--sm {
    max-height: 250px;
}

.scroll-shadow-container--md {
    max-height: 400px;
}

.scroll-shadow-container--lg {
    max-height: 600px;
}

.scroll-shadow-container--xl {
    max-height: 800px;
}

/* Die Schatten-Indikatoren als Pseudo-Elemente */
.scroll-shadow-container::before,
.scroll-shadow-container::after {
    content: "";
    position: sticky;
    left: 0;
    width: 100%;
    height: var(--scroll-shadow__size);
    z-index: 2;
    pointer-events: none;
    display: block;
    /* Standard: Unsichtbar - wird nur durch scroll-timeline Animation sichtbar */
    opacity: 0;
}

/* Element: Oberer Schatten */
.scroll-shadow-container::before {
    top: 0;
    /* Elliptischer Gradient: von oben nach unten wachsend, horizontal in der Mitte konzentriert */
    background: radial-gradient(ellipse 80% 100% at center top, var(--scroll-shadow__color) 0%, transparent 70%);
    margin-bottom: calc(var(--scroll-shadow__size) * -1);
    /* Animation: Sichtbar werden, sobald gescrollt wird */
    animation: scroll-shadow-top linear both;
    animation-timeline: --container-scroll;
    animation-range: 0% 100%;
}

/* Element: Unterer Schatten */
.scroll-shadow-container::after {
    bottom: 0;
    /* Elliptischer Gradient: von unten nach oben wachsend, horizontal in der Mitte konzentriert */
    background: radial-gradient(ellipse 80% 100% at center bottom, var(--scroll-shadow__color) 0%, transparent 70%);
    margin-top: calc(var(--scroll-shadow__size) * -1);
    /* Animation: Sichtbar am Anfang, blendet am Ende aus */
    animation: scroll-shadow-bottom linear both;
    animation-timeline: --container-scroll;
    animation-range: 0% 100%;
}

/* Keyframes für Schatten-Animationen */
/* Oberer Schatten: Unsichtbar bei 0%, erscheint nach kurzem Scrollen */
@keyframes scroll-shadow-top {
    0% {
        opacity: 0;
    }

    3% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* Unterer Schatten: Sichtbar am Anfang, verschwindet am Ende.
   Bei nicht-scrollbarem Inhalt ist 0%=100%, also opacity: 0 */
@keyframes scroll-shadow-bottom {
    0% {
        opacity: 1;
    }

    97% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Element: Content-Wrapper für Padding innerhalb des Scroll-Containers */
.scroll-shadow-container__content {
    padding: 1rem;
}

/* Modifier: Ohne Padding */
.scroll-shadow-container__content--no-padding {
    padding: 0;
}

/* Modifier: Kleines Padding */
.scroll-shadow-container__content--sm {
    padding: 0.5rem;
}

/* Modifier: Großes Padding */
.scroll-shadow-container__content--lg {
    padding: 1.5rem;
}

/* Modifier: Angepasste Schatten-Farben */
.scroll-shadow-container--dark {
    --scroll-shadow__color: rgba(0, 0, 0, 0.25);
}

.scroll-shadow-container--light {
    --scroll-shadow__color: rgba(0, 0, 0, 0.08);
}

/* Modifier: Angepasste Schatten-Größen */
.scroll-shadow-container--shadow-sm {
    --scroll-shadow__size: 12px;
}

.scroll-shadow-container--shadow-lg {
    --scroll-shadow__size: 30px;
}

/* Modifier: Mit Rahmen */
.scroll-shadow-container--bordered {
    border: 1px solid #eee;
    border-radius: 8px;
}

/* Modifier: Transparenter Hintergrund (erbt vom Parent) */
.scroll-shadow-container--transparent {
    background: transparent;
}