@utility text-stroke {
  font-size: calc(1em - var(--stroke-width, 0.1em) / 2);
  color: currentcolor;
  -webkit-text-fill-color: currentcolor;
  -webkit-text-stroke-width: max(var(--stroke-width, 0.1em), 2px);
  -webkit-text-stroke-color: var(--stroke-color);
  paint-order: stroke fill;
}

/* Deprecated */
/* Sets color to background color and stroke to actual color you want for the stroke */
@utility text-outline {
  color: var(--stroke-color); /* fallback */

  @supports (-webkit-text-stroke-width: 1px) {
    font-size: calc(1em - var(--stroke-width, 0.1em) / 2);
    color: var(--bg-color);
    -webkit-text-stroke-color: var(--stroke-color);

    /* We cannot use currentcolor because current color is set to --bg-color. That's why we need a --stroke variable */
    -webkit-text-stroke-width: max(var(--stroke-width, 0.1em), 2px);
    paint-order: stroke fill;
  }
}