@wonderflow/react-components/core/elevations.css

UI components from Wonderflow's Wanda design system

[data-elevation]{--shadow-color:0deg 0% 0%}[data-elevation-hover="0"]:hover,[data-elevation="0"]{box-shadow:none;transition:box-shadow .1s cubic-bezier(.3,.07,.34,1)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{box-shadow:0 3px 13px hsl(var(--shadow-color)/6%),0 2.5px 4.59px hsl(var(--shadow-color)/4.06%),0 1.34px 2.45px hsl(var(--shadow-color)/2.35%),0 .75px 1.37px hsl(var(--shadow-color)/4%),0 .39px .73px hsl(var(--shadow-color)/1.65%),0 .16px .3px hsl(var(--shadow-color)/.94%);transition:box-shadow .1s cubic-bezier(.3,.07,.34,1)}[data-elevation-hover="2"]:hover,[data-elevation="2"]{box-shadow:0 9px 25px hsl(var(--shadow-color)/8%),0 3.75px 10.44px hsl(var(--shadow-color)/6.35%),0 2.01px 5.58px hsl(var(--shadow-color)/4.75%),0 1.12px 3.13px hsl(var(--shadow-color)/4.5%),0 .6px 1.66px hsl(var(--shadow-color)/4.25%),0 .25px .69px hsl(var(--shadow-color)/3.65%);transition:box-shadow .1s cubic-bezier(.3,.07,.34,1)}[data-elevation-hover="3"]:hover,[data-elevation="3"]{box-shadow:0 18px 40px hsl(var(--shadow-color)/9%),0 7.51px 16.71px hsl(var(--shadow-color)/5.63%),0 4.02px 8.93px hsl(var(--shadow-color)/4.15%),0 2.25px 5px hsl(var(--shadow-color)/4%),0 1.19px 2.66px hsl(var(--shadow-color)/3.85%),0 .49px 1.1px hsl(var(--shadow-color)/3.37%);transition:box-shadow .1s cubic-bezier(.3,.07,.34,1)}[data-elevation-hover="4"]:hover,[data-elevation="4"]{box-shadow:0 33px 78px hsl(var(--shadow-color)/11%),0 12.04px 28.47px hsl(var(--shadow-color)/7.59%),0 5.84px 13.82px hsl(var(--shadow-color)/6.12%),0 2.86px 6.77px hsl(var(--shadow-color)/4.88%),0 1.13px 2.67px hsl(var(--shadow-color)/5.41%);transition:box-shadow .1s cubic-bezier(.3,.07,.34,1)}