/*********************
 * Shadow Variables *
 * --shadow-x: 0;
 * --shadow-y: 0;
 * --shadow-blur: 0;
 * --shadow-spread: 0;
 * --shadow-color: transparent;
 * --text-shadow-x: 0;
 * --text-shadow-y: 0;
 * --text-shadow-blur: 0;
 * --text-shadow-color: transparent;
 * --drop-shadow-x: 0;
 * --drop-shadow-y: 0;
 * --drop-shadow-blur: 0;
 * --drop-shadow-color: transparent;
*********************/

/*********************
 * Typed properties (animatable)
 * Blur vars are intentionally NOT typed — elevation.css relies on
 * `var(--shadow-blur, max(...))` fallback firing when unset.
 *********************/
@property --shadow-x {
  syntax: '<length>';
  initial-value: 0;
  inherits: true;
}

@property --shadow-y {
  syntax: '<length>';
  initial-value: 0;
  inherits: true;
}

@property --shadow-spread {
  syntax: '<length>';
  initial-value: 0;
  inherits: true;
}

@property --shadow-color {
  syntax: '<color>';
  initial-value: transparent;
  inherits: true;
}

@property --shadow-alpha {
  syntax: '<number> | <percentage>';
  initial-value: 1;
  inherits: true;
}

@property --shadow-x-multiple {
  syntax: '<number>';
  initial-value: 1;
  inherits: true;
}

@property --shadow-y-multiple {
  syntax: '<number>';
  initial-value: 1;
  inherits: true;
}

@property --shadow-spread-multiple {
  syntax: '<number>';
  initial-value: 1;
  inherits: true;
}

@property --text-shadow-x {
  syntax: '<length>';
  initial-value: 0;
  inherits: true;
}

@property --text-shadow-y {
  syntax: '<length>';
  initial-value: 0;
  inherits: true;
}

@property --text-shadow-color {
  syntax: '<color>';
  initial-value: currentcolor;
  inherits: true;
}

@property --text-shadow-alpha {
  syntax: '<number> | <percentage>';
  initial-value: 1;
  inherits: true;
}

@property --drop-shadow-x {
  syntax: '<length>';
  initial-value: 0;
  inherits: true;
}

@property --drop-shadow-y {
  syntax: '<length>';
  initial-value: 0;
  inherits: true;
}

@property --drop-shadow-color {
  syntax: '<color>';
  initial-value: transparent;
  inherits: true;
}

@property --drop-shadow-alpha {
  syntax: '<number> | <percentage>';
  initial-value: 1;
  inherits: true;
}

@utility shadowstring {
  --shadow-string: var(--shadow-inset,) var(--shadow-x, 0) var(--shadow-y, 0)
    var(--shadow-blur, 0) var(--shadow-spread, 0)
    oklch(
      from var(--shadow-color, var(--tw-shadow-color)) l c h /
        var(--shadow-alpha, 1)
    );
}

@utility shadow {
  @apply shadowstring;
  box-shadow: var(--shadow, var(--shadow-string));
}

@utility inset {
  --shadow-inset: inset;
}

@utility text-shadow {
  --text-shadow-string: var(--text-shadow-x, 0) var(--text-shadow-y, 0)
    var(--text-shadow-blur, 0)
    oklch(
      from var(--text-shadow-color, currentcolor) l c h /
        var(--text-shadow-alpha, 1)
    );
  text-shadow: var(--text-shadow, var(--text-shadow-string));
}

@utility drop-shadow {
  --drop-shadow-string: var(--drop-shadow-x, 0) var(--drop-shadow-y, 0)
    var(--drop-shadow-blur, 0)
    oklch(from var(--drop-shadow-color) l c h / var(--drop-shadow-alpha, 1));
  filter: drop-shadow(var(--drop-shadow, var(--drop-shadow-string)));
}

@utility shadow-pseudo {
  content: '';
  position: absolute;

  /* Required if parent element is inline-block. */
  /* Not required if parent element is inline-flex */
  top: calc(var(--border-width, 0px) * -1);
  left: calc(var(--border-width, 0px) * -1);
  z-index: -1;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  border: inherit;
  border-radius: inherit;
  box-shadow: var(--shadow, var(--shadow-string));
  opacity: 0;
  transition: var(--transition-values);
  transition-property: opacity;
}

@utility shadow-before {
  @apply shadowstring;
  position: relative;

  &::before {
    @apply shadow-pseudo;
  }

  @variant interact {
    &::before {
      opacity: 1;
    }
  }
}

@utility shadow-after {
  @apply shadowstring;
  position: relative;

  &::after {
    @apply shadow-pseudo;
  }

  @variant interact {
    &::after {
      opacity: 1;
    }
  }
}

/* Shadow Functional Utilities */
/* prettier-ignore */
@utility sx-* {
  --shadow-x: --spacing(--value(number));
  --shadow-x: --value([length]);
}

/* prettier-ignore */
@utility -sx-* {
  --shadow-x: calc(--spacing(--value(number)) * -1);
  --shadow-x: --value([length]);
}

/* prettier-ignore */
@utility sy-* {
  --shadow-y: --spacing(--value(number));
  --shadow-y: --value([length]);
}

/* prettier-ignore */
@utility -sy-* {
  --shadow-y: calc(--spacing(--value(number)) * -1);
  --shadow-y: --value([length]);
}

/* prettier-ignore */
@utility sb-* {
  --shadow-blur: --spacing(--value(number));
  --shadow-blur: --value([length]);
}

/* prettier-ignore */
@utility sc-* {
  --shadow-color: --value(--color-*, [color]);
  --shadow-color: oklch(from --value(--color-*, [color]) l c h / --modifier(number)%);
}

/* prettier-ignore */
@utility ss-* {
  --shadow-spread: --spacing(--value(number));
  --shadow-spread: --value([length]);
}

/* prettier-ignore */
@utility -ss-* {
  --shadow-spread: calc(--spacing(--value(number)) * -1);
  --shadow-spread: --value([length]);
}

/* prettier-ignore */
@utility sa-* {
  --shadow-alpha: --value(number)%;
  --shadow-alpha: --value([percentage], [number]);
}

@utility sxm-* {
  --shadow-x-multiple: --value([number]);
}

@utility sym-* {
  --shadow-y-multiple: --value([number]);
}

@utility sbm-* {
  --shadow-blur-multiple: --value([number]);
}

@utility ssm-* {
  --shadow-spread-multiple: --value([number]);
}

/*********************
 * Text Shadow Utilities *
 *********************/

/* prettier-ignore */
@utility tsx-* {
  --text-shadow-x: --spacing(--value(number));
  --text-shadow-x: --value([length]);
}

/* prettier-ignore */
@utility -tsx-* {
  --text-shadow-x: calc(--spacing(--value(number)) * -1);
  --text-shadow-x: --value([length]);
}

/* prettier-ignore */
@utility tsy-* {
  --text-shadow-y: --spacing(--value(number));
  --text-shadow-y: --value([length]);
}

/* prettier-ignore */
@utility -tsy-* {
  --text-shadow-y: calc(--spacing(--value(number)) * -1);
  --text-shadow-y: --value([length]);
}

/* prettier-ignore */
@utility tsb-* {
  --text-shadow-blur: --spacing(--value(number));
  --text-shadow-blur: --value([length]);
}

@utility tsc-* {
  --text-shadow-color: --value(--color-*, [color]);
  --text-shadow-color: oklch(
    from --value(--color-*, [color]) l c h / --modifier(number) %
  );
}

/* prettier-ignore */
@utility tsa-* {
  --text-shadow-alpha: --value(number)%;
  --text-shadow-alpha: --value([percentage], [number]);
}

@utility tsxm-* {
  --text-shadow-x-multiple: --value([number]);
}

@utility tsym-* {
  --text-shadow-y-multiple: --value([number]);
}

@utility tsbm-* {
  --text-shadow-blur-multiple: --value([number]);
}

/*********************
 * Drop Shadow Utilities *
 *********************/
/* prettier-ignore */
@utility dsx-* {
  --drop-shadow-x: --spacing(--value(number));
  --drop-shadow-x: --value([length]);
}

/* prettier-ignore */
@utility -dsx-* {
  --drop-shadow-x: calc(--spacing(--value(number)) * -1);
  --drop-shadow-x: --value([length]);
}

/* prettier-ignore */
@utility dsy-* {
  --drop-shadow-y: --spacing(--value(number));
  --drop-shadow-y: --value([length]);
}

/* prettier-ignore */
@utility -dsy-* {
  --drop-shadow-y: calc(--spacing(--value(number)) * -1);
  --drop-shadow-y: --value([length]);
}

/* prettier-ignore */
@utility dsb-* {
  --drop-shadow-blur: --spacing(--value(number));
  --drop-shadow-blur: --value([length]);
}

/* prettier-ignore */
@utility dsc-* {
  --drop-shadow-color: --value(--color-*, [color]);
  --drop-shadow-color: oklch(
    from --value(--color-*, [color]) l c h / --modifier(number) %
  );
}

/* prettier-ignore */
@utility dsa-* {
  --drop-shadow-alpha: --value(number)%;
  --drop-shadow-alpha: --value([percentage], [number]);
}

@utility dsxm-* {
  --drop-shadow-x-multiple: --value([number]);
}

@utility dsym-* {
  --drop-shadow-y-multiple: --value([number]);
}

@utility dsbm-* {
  --drop-shadow-blur-multiple: --value([number]);
}