/* stylelint-disable declaration-block-no-duplicate-custom-properties */

@utility simple-svg {
  * {
    fill: var(--fill-color);
    stroke: var(--stroke-color); /* Fallback to text color */
    stroke-width: var(--stroke-width, revert-layer);
  }
}

/*********************
 * Stroke *
 * Allows spl-stroke-<length> to create --stroke-width
 * Allows spl-stroke-<color>/<modifier> to create --stroke-color
 *********************/
/* prettier-ignore */
@utility spl-stroke-* {
  --stroke-width: --spacing(--value(number));
  --stroke-width: --value([length]);
  --stroke-color: --value(--color-*, [color]);
  --stroke-color: oklch(
    from --value(--color-*, [color]) l c h / --modifier(number)%
  );
}

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