/* https://www.joshwcomeau.com/css/designing-shadows/ */
:root {
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-spread: 0px;
  --shadow-color: rgb(0 0 0);
  --shadow-alpha: 0.25;
  --shadow-x-multiple: 2;
  --shadow-y-multiple: 2;
  --shadow-spread-multiple: 2;
}

@utility elevation {
  --sx: var(--shadow-x);
  --sy: var(--shadow-y);
  --sb: var(--shadow-blur, max(abs(var(--sx)), abs(var(--sy))));
  --ss: var(--shadow-spread);
  --sc: var(--shadow-color);
  --sa: var(--shadow-alpha);
  --sx-multiple: var(--shadow-x-multiple);
  --sy-multiple: var(--shadow-y-multiple);
  --sb-multiple: var(
    --shadow-blur-multiple,
    max(var(--sx-multiple), var(--sy-multiple))
  );
  --ss-multiple: var(--shadow-spread-multiple);

  &:where(:not(.shadow-before, .shadow-after)) {
    box-shadow: var(--shadow-string);
  }
}

@utility elevation-1 {
  @apply elevation;
  --shadow-string: var(--shadow-inset,) var(--sx) var(--sy) var(--sb) var(--ss)
    oklch(from var(--sc) l c h / var(--sa));
}

@utility elevation-2 {
  @apply elevation;
  --shadow-string:
    var(--shadow-inset,) var(--sx) var(--sy) var(--sb) var(--ss)
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 1))
      calc(var(--sy) * pow(var(--sy-multiple), 1))
      calc(var(--sb) * pow(var(--sb-multiple), 1))
      calc(var(--ss) * pow(var(--ss-multiple), 1))
      oklch(from var(--sc) l c h / var(--sa));
}

@utility elevation-3 {
  @apply elevation;
  --shadow-string:
    var(--shadow-inset,) var(--sx) var(--sy) var(--sb) var(--ss)
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 1))
      calc(var(--sy) * pow(var(--sy-multiple), 1))
      calc(var(--sb) * pow(var(--sb-multiple), 1))
      calc(var(--ss) * pow(var(--ss-multiple), 1))
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 2))
      calc(var(--sy) * pow(var(--sy-multiple), 2))
      calc(var(--sb) * pow(var(--sb-multiple), 2))
      calc(var(--ss) * pow(var(--ss-multiple), 2))
      oklch(from var(--sc) l c h / var(--sa));
}

@utility elevation-4 {
  @apply elevation;
  --shadow-string:
    var(--shadow-inset,) var(--sx) var(--sy) var(--sb) var(--ss)
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 1))
      calc(var(--sy) * pow(var(--sy-multiple), 1))
      calc(var(--sb) * pow(var(--sb-multiple), 1))
      calc(var(--ss) * pow(var(--ss-multiple), 1))
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 2))
      calc(var(--sy) * pow(var(--sy-multiple), 2))
      calc(var(--sb) * pow(var(--sb-multiple), 2))
      calc(var(--ss) * pow(var(--ss-multiple), 2))
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 3))
      calc(var(--sy) * pow(var(--sy-multiple), 3))
      calc(var(--sb) * pow(var(--sb-multiple), 3))
      calc(var(--ss) * pow(var(--ss-multiple), 3))
      oklch(from var(--sc) l c h / var(--sa));
}

@utility elevation-5 {
  @apply elevation;
  --shadow-string:
    var(--shadow-inset,) var(--sx) var(--sy) var(--sb) var(--ss)
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 1))
      calc(var(--sy) * pow(var(--sy-multiple), 1))
      calc(var(--sb) * pow(var(--sb-multiple), 1))
      calc(var(--ss) * pow(var(--ss-multiple), 1))
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 2))
      calc(var(--sy) * pow(var(--sy-multiple), 2))
      calc(var(--sb) * pow(var(--sb-multiple), 2))
      calc(var(--ss) * pow(var(--ss-multiple), 2))
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 3))
      calc(var(--sy) * pow(var(--sy-multiple), 3))
      calc(var(--sb) * pow(var(--sb-multiple), 3))
      calc(var(--ss) * pow(var(--ss-multiple), 3))
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 4))
      calc(var(--sy) * pow(var(--sy-multiple), 4))
      calc(var(--sb) * pow(var(--sb-multiple), 4))
      calc(var(--ss) * pow(var(--ss-multiple), 4))
      oklch(from var(--sc) l c h / var(--sa));
}

@utility elevation-6 {
  @apply elevation;
  --shadow-string:
    var(--shadow-inset,) var(--sx) var(--sy) var(--sb) var(--ss)
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 1))
      calc(var(--sy) * pow(var(--sy-multiple), 1))
      calc(var(--sb) * pow(var(--sb-multiple), 1))
      calc(var(--ss) * pow(var(--ss-multiple), 1))
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 2))
      calc(var(--sy) * pow(var(--sy-multiple), 2))
      calc(var(--sb) * pow(var(--sb-multiple), 2))
      calc(var(--ss) * pow(var(--ss-multiple), 2))
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 3))
      calc(var(--sy) * pow(var(--sy-multiple), 3))
      calc(var(--sb) * pow(var(--sb-multiple), 3))
      calc(var(--ss) * pow(var(--ss-multiple), 3))
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 4))
      calc(var(--sy) * pow(var(--sy-multiple), 4))
      calc(var(--sb) * pow(var(--sb-multiple), 4))
      calc(var(--ss) * pow(var(--ss-multiple), 4))
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 5))
      calc(var(--sy) * pow(var(--sy-multiple), 5))
      calc(var(--sb) * pow(var(--sb-multiple), 5))
      calc(var(--ss) * pow(var(--ss-multiple), 5))
      oklch(from var(--sc) l c h / var(--sa));
}

@utility elevation-7 {
  @apply elevation;
  --shadow-string:
    var(--shadow-inset,) var(--sx) var(--sy) var(--sb) var(--ss)
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 1))
      calc(var(--sy) * pow(var(--sy-multiple), 1))
      calc(var(--sb) * pow(var(--sb-multiple), 1))
      calc(var(--ss) * pow(var(--ss-multiple), 1))
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 2))
      calc(var(--sy) * pow(var(--sy-multiple), 2))
      calc(var(--sb) * pow(var(--sb-multiple), 2))
      calc(var(--ss) * pow(var(--ss-multiple), 2))
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 3))
      calc(var(--sy) * pow(var(--sy-multiple), 3))
      calc(var(--sb) * pow(var(--sb-multiple), 3))
      calc(var(--ss) * pow(var(--ss-multiple), 3))
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 4))
      calc(var(--sy) * pow(var(--sy-multiple), 4))
      calc(var(--sb) * pow(var(--sb-multiple), 4))
      calc(var(--ss) * pow(var(--ss-multiple), 4))
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 5))
      calc(var(--sy) * pow(var(--sy-multiple), 5))
      calc(var(--sb) * pow(var(--sb-multiple), 5))
      calc(var(--ss) * pow(var(--ss-multiple), 5))
      oklch(from var(--sc) l c h / var(--sa)),
    var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 6))
      calc(var(--sy) * pow(var(--sy-multiple), 6))
      calc(var(--sb) * pow(var(--sb-multiple), 6))
      calc(var(--ss) * pow(var(--ss-multiple), 6))
      oklch(from var(--sc) l c h / var(--sa));
}

/*********************
 * Elevation with Drop Shadow *
 *********************/
@utility ds-elevation {
  --sx: var(--drop-shadow-x, var(--shadow-x));
  --sy: var(--drop-shadow-y, var(--shadow-y));
  --sb: var(
    --drop-shadow-blur,
    var(--shadow-blur, max(abs(var(--sx)), abs(var(--sy))))
  );
  --sc: var(--drop-shadow-color, var(--shadow-color));
  --sa: var(--drop-shadow-alpha, var(--shadow-alpha));
  --sx-multiple: var(--drop-shadow-x-multiple, var(--shadow-x-multiple));
  --sy-multiple: var(--drop-shadow-y-multiple, var(--shadow-y-multiple));
  --sb-multiple: var(
    --drop-shadow-blur-multiple,
    var(--shadow-blur-multiple, max(var(--sx-multiple), var(--sy-multiple)))
  );
}

@utility ds-elevation-1 {
  @apply ds-elevation;
  filter: drop-shadow(
    var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
  );
}

@utility ds-elevation-2 {
  @apply ds-elevation;
  filter: drop-shadow(
      var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 1))
        calc(var(--sy) * pow(var(--sy-multiple), 1))
        calc(var(--sb) * pow(var(--sb-multiple), 1))
        oklch(from var(--sc) l c h / var(--sa))
    );
}

@utility ds-elevation-3 {
  @apply ds-elevation;
  filter: drop-shadow(
      var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 1))
        calc(var(--sy) * pow(var(--sy-multiple), 1))
        calc(var(--sb) * pow(var(--sb-multiple), 1))
        oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 2))
        calc(var(--sy) * pow(var(--sy-multiple), 2))
        calc(var(--sb) * pow(var(--sb-multiple), 2))
        oklch(from var(--sc) l c h / var(--sa))
    );
}

@utility ds-elevation-4 {
  @apply ds-elevation;
  filter: drop-shadow(
      var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 1))
        calc(var(--sy) * pow(var(--sy-multiple), 1))
        calc(var(--sb) * pow(var(--sb-multiple), 1))
        oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 2))
        calc(var(--sy) * pow(var(--sy-multiple), 2))
        calc(var(--sb) * pow(var(--sb-multiple), 2))
        oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 3))
        calc(var(--sy) * pow(var(--sy-multiple), 3))
        calc(var(--sb) * pow(var(--sb-multiple), 3))
        oklch(from var(--sc) l c h / var(--sa))
    );
}

@utility ds-elevation-5 {
  @apply ds-elevation;
  filter: drop-shadow(
      var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 1))
        calc(var(--sy) * pow(var(--sy-multiple), 1))
        calc(var(--sb) * pow(var(--sb-multiple), 1))
        oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 2))
        calc(var(--sy) * pow(var(--sy-multiple), 2))
        calc(var(--sb) * pow(var(--sb-multiple), 2))
        oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 3))
        calc(var(--sy) * pow(var(--sy-multiple), 3))
        calc(var(--sb) * pow(var(--sb-multiple), 3))
        oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 4))
        calc(var(--sy) * pow(var(--sy-multiple), 4))
        calc(var(--sb) * pow(var(--sb-multiple), 4))
        oklch(from var(--sc) l c h / var(--sa))
    );
}

@utility ds-elevation-6 {
  @apply ds-elevation;
  filter: drop-shadow(
      var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 1))
        calc(var(--sy) * pow(var(--sy-multiple), 1))
        calc(var(--sb) * pow(var(--sb-multiple), 1))
        oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 2))
        calc(var(--sy) * pow(var(--sy-multiple), 2))
        calc(var(--sb) * pow(var(--sb-multiple), 2))
        oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 3))
        calc(var(--sy) * pow(var(--sy-multiple), 3))
        calc(var(--sb) * pow(var(--sb-multiple), 3))
        oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 4))
        calc(var(--sy) * pow(var(--sy-multiple), 4))
        calc(var(--sb) * pow(var(--sb-multiple), 4))
        oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 5))
        calc(var(--sy) * pow(var(--sy-multiple), 5))
        calc(var(--sb) * pow(var(--sb-multiple), 5))
        oklch(from var(--sc) l c h / var(--sa))
    );
}

@utility ds-elevation-7 {
  @apply ds-elevation;
  filter: drop-shadow(
      var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 1))
        calc(var(--sy) * pow(var(--sy-multiple), 1))
        calc(var(--sb) * pow(var(--sb-multiple), 1))
        oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 2))
        calc(var(--sy) * pow(var(--sy-multiple), 2))
        calc(var(--sb) * pow(var(--sb-multiple), 2))
        oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 3))
        calc(var(--sy) * pow(var(--sy-multiple), 3))
        calc(var(--sb) * pow(var(--sb-multiple), 3))
        oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 4))
        calc(var(--sy) * pow(var(--sy-multiple), 4))
        calc(var(--sb) * pow(var(--sb-multiple), 4))
        oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 5))
        calc(var(--sy) * pow(var(--sy-multiple), 5))
        calc(var(--sb) * pow(var(--sb-multiple), 5))
        oklch(from var(--sc) l c h / var(--sa))
    )
    drop-shadow(
      calc(var(--sx) * pow(var(--sx-multiple), 6))
        calc(var(--sy) * pow(var(--sy-multiple), 6))
        calc(var(--sb) * pow(var(--sb-multiple), 6))
        oklch(from var(--sc) l c h / var(--sa))
    );
}