@casoon/dragonfly/effects/visual/shadows.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Schatten-Effekte
 * 
 * Diese Datei enthält verschiedene Schatten-Effekte für moderne UIs.
 * Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
 */

@layer utilities {
    .shadow-sm {
        box-shadow: var(--shadow-sm, 0 var(--border-width) var(--border-width-thick) 0 rgb(0 0 0 / 5%));
    }

    .shadow {
        box-shadow: var(--shadow, 0 var(--border-width) var(--spacing-1) 0 rgb(0 0 0 / 10%), 0 var(--border-width) var(--border-width-thick) -var(--border-width) rgb(0 0 0 / 10%));
    }

    .shadow-md {
        box-shadow: var(--shadow-md, 0 var(--spacing-1) 6px -var(--border-width) rgb(0 0 0 / 10%), 0 var(--border-width-thick) var(--spacing-1) -var(--border-width-thick) rgb(0 0 0 / 10%));
    }

    .shadow-lg {
        box-shadow: var(--shadow-lg, 0 var(--spacing-2-5) var(--spacing-1)(--spacing-1) -var(--spacing-1) rgb(0 0 0 / 10%), 0 var(--spacing-1) 6px -var(--spacing-1) rgb(0 0 0 / 10%));
    }

    .shadow-xl {
        box-shadow: var(--shadow-xl, 0 var(--spacing-5) var(--spacing-2)(--spacing-1) -var(--spacing-1) rgb(0 0 0 / 10%), 0 var(--spacing-2) var(--spacing-2-5) -6px rgb(0 0 0 / 10%));
    }

    .shadow-2xl {
        box-shadow: var(--shadow-2xl, 0 var(--spacing-2)(--spacing-1) 50px -var(--spacing-1)(--border-width-thick) rgb(0 0 0 / 25%));
    }

    .shadow-inner {
        box-shadow: var(--shadow-inner, inset 0 var(--border-width-thick) var(--spacing-1) 0 rgb(0 0 0 / 5%));
    }

    .shadow-none {
        box-shadow: var(--shadow-none, 0 0 #0000);
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer utilities {
        .shadow-hover,
        .shadow-transition {
            transition: var(--transition-none);
        }
    }
}