@theme {
  --highlight-start: 0lh;
  --highlight-end: 1lh;
  --highlight-skew: 0em;
  --highlight-padding: 0em;
  --highlight-left-dir: to bottom right;
  --highlight-right-dir: to top left;
}

@utility highlight {
  --_highlight-height: calc(var(--highlight-end) - var(--highlight-start));
  display: inline;
  margin-inline: calc(var(--highlight-skew) * -1);
  padding-inline: calc(var(--highlight-skew) + var(--highlight-padding));
  background-image:
    linear-gradient(
      var(--highlight-left-dir),
      transparent 50%,
      var(--gradient-start, var(--highlight-color)) 50%
    ),
    linear-gradient(
      var(--gradient-angle, 90deg),
      var(--gradient-start, var(--highlight-color)),
      var(--gradient-end, var(--highlight-color))
    ),
    linear-gradient(
      var(--highlight-right-dir),
      transparent 50%,
      var(--gradient-end, var(--highlight-color)) 50%
    );
  background-position:
    left var(--highlight-start),
    center var(--highlight-start),
    right var(--highlight-start);
  background-size:
    var(--highlight-skew) var(--_highlight-height),
    calc(100% - var(--highlight-skew) * 2 + 1px) var(--_highlight-height),
    var(--highlight-skew) var(--_highlight-height);
  background-repeat: no-repeat;
  box-decoration-break: clone;
}

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

/* prettier-ignore */
@utility highlight-start-* {
  --highlight-start: --value([length]);
  --highlight-start: --value(number)lh;
  
}

/* prettier-ignore */
@utility highlight-end-* {
  --highlight-end: --value([length]);
  --highlight-end: --value(number)lh;
}

@utility highlight-before {
  &::before {
    content: '';
    position: absolute;
    inset: var(--highlight-start, 0.24lh)
      calc(var(--highlight-padding, 0.25em) * -1)
      calc(100% - var(--highlight-end, 0.62lh))
      calc(var(--highlight-padding, 0.25em) * -1);
    z-index: -1;
    background: var(--highlight-color);
    transform: rotate(var(--highlight-rotate));
  }
}

/* PATTERNS */
/* Parallelogram leaning right: /   / — classic marker skew */
@utility highlight-marker {
  --highlight-skew: 0.25em;
  --highlight-left-dir: to bottom right;
  --highlight-right-dir: to top left;
}

/* Parallelogram leaning left: \   \ — mirror of marker */
@utility highlight-marker-alt {
  --highlight-skew: 0.25em;
  --highlight-left-dir: to top right;
  --highlight-right-dir: to bottom left;
}

/* Trapezium wider at top: \___/ — sticker / index-tab feel */
@utility highlight-tab {
  --highlight-skew: 0.25em;
  --highlight-left-dir: to top left;
  --highlight-right-dir: to top right;
}

/* Trapezium wider at bottom: /‾‾‾\ — badge / stamp feel */
@utility highlight-stamp {
  --highlight-skew: 0.25em;
  --highlight-left-dir: to bottom right;
  --highlight-right-dir: to bottom left;
}

/* LEGACY */

.highlight-others {
  --mark-color: #f8db75;
  --mark-skew: 0.25em;
  --mark-height: 1em;
  --mark-overlap: 0.3em;
  margin-inline: calc(var(--mark-overlap) * -1);
  padding-inline: var(--mark-overlap);
  color: inherit;
  background-color: transparent;
  background-image:
    linear-gradient(to bottom right, transparent 50%, var(--mark-color) 50%),
    linear-gradient(var(--mark-color), var(--mark-color)),
    linear-gradient(to top left, transparent 50%, var(--mark-color) 50%);
  background-position:
    left center,
    center,
    right center;
  background-size:
    var(--mark-skew) var(--mark-height),
    calc(100% - var(--mark-skew) * 2 + 1px) var(--mark-height),
    var(--mark-skew) var(--mark-height);
  background-repeat: no-repeat;
  box-decoration-break: clone;
}