[shadow],
[shadow-hover] {
  --shadow-elevation: 12;
  --shadow-weight: 1.3;
  --shadow-spread: -1px;
  --shadow-opacity: 0.08;
  --shadow-color: 0, 0, 0;
  --shadow-active: 0;
}

[shadow] {
  transition: box-shadow 0.4s var(--easing);
  box-shadow: 0 calc(var(--shadow-elevation, 12) * 1px) calc(var(--shadow-elevation, 12) * 2px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.4 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 2px) calc(var(--shadow-elevation, 12) * 4px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.3 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 4px) calc(var(--shadow-elevation, 12) * 8px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.2 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 8px) calc(var(--shadow-elevation, 12) * 16px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.1 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 10px) calc(var(--shadow-elevation, 12) * 20px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.05 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 12px) calc(var(--shadow-elevation, 12) * 24px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.02 * var(--shadow-active, 0)));
}
@media (prefers-reduced-motion: reduce) {
  [shadow] {
    transition: none;
  }
}
[shadow] {
  --shadow-elevation: 12;
  --shadow-weight: 1.3;
  --shadow-spread: -1px;
  --shadow-opacity: 0.08;
  --shadow-active: 1;
}

[shadow-hover] {
  transition: box-shadow 0.4s var(--easing);
  box-shadow: 0 calc(var(--shadow-elevation, 12) * 1px) calc(var(--shadow-elevation, 12) * 2px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.4 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 2px) calc(var(--shadow-elevation, 12) * 4px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.3 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 4px) calc(var(--shadow-elevation, 12) * 8px) 0 rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.2 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 8px) calc(var(--shadow-elevation, 12) * 16px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.1 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 10px) calc(var(--shadow-elevation, 12) * 20px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.05 * var(--shadow-active, 0))), 0 calc(var(--shadow-elevation, 12) * 12px) calc(var(--shadow-elevation, 12) * 24px) var(--shadow-spread, -1px) rgba(var(--shadow-color, 0, 0, 0), calc(var(--shadow-opacity, 0.08) * var(--shadow-weight, 1.3) * 0.02 * var(--shadow-active, 0)));
}
@media (prefers-reduced-motion: reduce) {
  [shadow-hover] {
    transition: none;
  }
}
[shadow-hover]:is(:hover, :focus-visible) {
  --shadow-active: 1;
}

[shadow~="10"],
[shadow-hover~="10"]:is(:hover, :focus-visible) {
  --shadow-elevation: 1.5;
  --shadow-weight: 0.8;
  --shadow-spread: 0px;
}

[shadow~="20"],
[shadow-hover~="20"]:is(:hover, :focus-visible) {
  --shadow-elevation: 4;
  --shadow-weight: 1;
  --shadow-spread: 0px;
}

[shadow~="30"],
[shadow-hover~="30"]:is(:hover, :focus-visible) {
  --shadow-elevation: 12;
  --shadow-weight: 1.3;
  --shadow-spread: -1px;
}

[shadow~="40"],
[shadow-hover~="40"]:is(:hover, :focus-visible) {
  --shadow-elevation: 28;
  --shadow-weight: 1.8;
  --shadow-spread: -4px;
}

[shadow~="50"],
[shadow-hover~="50"]:is(:hover, :focus-visible) {
  --shadow-elevation: 52;
  --shadow-weight: 2.8;
  --shadow-spread: -10px;
}

[shadow~=".1"],
[shadow-hover~=".1"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.1;
}

[shadow~=".2"],
[shadow-hover~=".2"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.2;
}

[shadow~=".3"],
[shadow-hover~=".3"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.3;
}

[shadow~=".4"],
[shadow-hover~=".4"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.4;
}

[shadow~=".5"],
[shadow-hover~=".5"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.5;
}

[shadow~=".6"],
[shadow-hover~=".6"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.6;
}

[shadow~=".7"],
[shadow-hover~=".7"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.7;
}

[shadow~=".8"],
[shadow-hover~=".8"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.8;
}

[shadow~=".9"],
[shadow-hover~=".9"]:is(:hover, :focus-visible) {
  --shadow-opacity: 0.9;
}

[shadow~=blue],
[shadow-hover~=blue]:is(:hover, :focus-visible) {
  --shadow-color: 0, 20, 190;
}

[scrim] {
  position: relative;
  overflow: hidden;
  display: block;
  --scrim-color: 0, 0, 0;
  --scrim-dir: 22.5deg;
  --scrim-a: 1;
  --scrim-dist: 100%;
}
[scrim]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: block;
  background-image: linear-gradient(var(--scrim-dir), rgba(var(--scrim-color), calc(var(--scrim-a) * 1)) 0%, rgba(var(--scrim-color), calc(var(--scrim-a) * 0.852)) calc(var(--scrim-dist) * 0.12), rgba(var(--scrim-color), calc(var(--scrim-a) * 0.621)) calc(var(--scrim-dist) * 0.28), rgba(var(--scrim-color), calc(var(--scrim-a) * 0.385)) calc(var(--scrim-dist) * 0.46), rgba(var(--scrim-color), calc(var(--scrim-a) * 0.183)) calc(var(--scrim-dist) * 0.66), rgba(var(--scrim-color), calc(var(--scrim-a) * 0.054)) calc(var(--scrim-dist) * 0.85), rgba(var(--scrim-color), 0) var(--scrim-dist));
}

/* Intermediate Directions */
[scrim~=to-t-tr] {
  --scrim-dir: 22.5deg;
}

[scrim~=to-r-tr] {
  --scrim-dir: 67.5deg;
}

[scrim~=to-r-br] {
  --scrim-dir: 112.5deg;
}

[scrim~=to-b-br] {
  --scrim-dir: 157.5deg;
}

[scrim~=to-b-bl] {
  --scrim-dir: 202.5deg;
}

[scrim~=to-l-bl] {
  --scrim-dir: 247.5deg;
}

[scrim~=to-l-tl] {
  --scrim-dir: 292.5deg;
}

[scrim~=to-t-tl] {
  --scrim-dir: 337.5deg;
}

/* Cardinal/Ordinal Directions */
[scrim~=to-t] {
  --scrim-dir: to top;
}

[scrim~=to-b] {
  --scrim-dir: to bottom;
}

[scrim~=to-l] {
  --scrim-dir: to left;
}

[scrim~=to-r] {
  --scrim-dir: to right;
}

[scrim~=to-tr] {
  --scrim-dir: to top right;
}

[scrim~=to-tl] {
  --scrim-dir: to top left;
}

[scrim~=to-br] {
  --scrim-dir: to bottom right;
}

[scrim~=to-bl] {
  --scrim-dir: to bottom left;
}

/* --- INTENSITY & DISTANCE (Stay as *= for flexibility) --- */
[scrim*=".1"] {
  --scrim-a: 0.1;
}

[scrim*=".2"] {
  --scrim-a: 0.2;
}

[scrim*=".3"] {
  --scrim-a: 0.3;
}

[scrim*=".4"] {
  --scrim-a: 0.4;
}

[scrim*=".5"] {
  --scrim-a: 0.5;
}

[scrim*=".6"] {
  --scrim-a: 0.6;
}

[scrim*=".7"] {
  --scrim-a: 0.7;
}

[scrim*=".8"] {
  --scrim-a: 0.8;
}

[scrim*=".9"] {
  --scrim-a: 0.9;
}

[scrim*="10%"] {
  --scrim-dist: 10%;
}

[scrim*="25%"] {
  --scrim-dist: 25%;
}

[scrim*="33%"] {
  --scrim-dist: 33.3%;
}

[scrim*="50%"] {
  --scrim-dist: 50%;
}

[scrim*="66%"] {
  --scrim-dist: 66.6%;
}

[scrim*="75%"] {
  --scrim-dist: 75%;
}

:root {
  --easing: cubic-bezier(0.23, 1, 0.32, 1);
}