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

@utility strikethrough {
  position: relative;
  display: inline-block;

  &::after {
    content: '';
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: var(--strike-width, 0.125em);
    background: var(--strike-color, currentColor);
    transform: translateY(-50%) rotate(var(--strike-angle, 0deg));
    transform-origin: center;
  }
}

/* prettier-ignore */
@utility strike-angle-* {
  --strike-angle: --value(number)deg;
}

/* prettier-ignore */
@utility -strike-angle-* {
  --strike-angle: calc(--value(number) * -1deg);
}

/* prettier-ignore */
@utility strike-* {
  /* strike-width  */
  --strike-width: --spacing(--value(number));
  --strike-width: --value([length]);

  /* strike-color */
  --strike-color: --value(--color-*, [color]);
  --strike-color: oklch(
    from --value(--color-*, [color]) l c h / --modifier(integer)%
  );
}