@jaredpdesigns/pasta/shadows.css

Pasta provides a great starting place for web projects. It combines light styling for common web elements, yummy!

@layer props{:root{--shadow__strength:0.375}@media screen and (prefers-color-scheme:light){:root{--shadow__color:var(--color__set--base);--shadow__value:var(--shadow__strength)}}:root[data-theme="light"],:root [data-theme="light"]{--shadow__color:var(--color__set--base);--shadow__value:var(--shadow__strength)}@media screen and (prefers-color-scheme:dark){:root{--shadow__color:black;--shadow__value:calc(var(--shadow__strength) * 2)}}:root[data-theme="dark"],:root [data-theme="dark"]{--shadow__color:black;--shadow__value:calc(var(--shadow__strength) * 2)}:root{--shadow:0 var(--size__xxs) var(--size__xs) calc(var(--size__xxs) * -1) color-mix(in srgb,var(--shadow__color) calc(var(--shadow__value)*100%),transparent),0 var(--size__m) var(--size__l) calc(var(--size__m) * -1) color-mix(in srgb,var(--shadow__color) calc(var(--shadow__value)*100%),transparent);--shadow__all:0 0 var(--size__xxs) color-mix(in srgb,var(--shadow__color) calc(var(--shadow__value)*100%),transparent),0 0 var(--size__l) color-mix(in srgb,var(--shadow__color) calc(var(--shadow__value)*100%),transparent)}}@layer helpers{.shadow{box-shadow:var(--shadow)}.shadow__all{box-shadow:var(--shadow__all)}.shadow__none{box-shadow:none}}