/*
GPRO CSS: Highlight Bar
Description: Draws a colored bar behind an element (marker-pen effect). Position and size are tunable per module via --gpro-hl-* custom properties.
Classes: .gpro-highlight
Version: 1.0
Order: 30
*/

/*
   Usage: add .gpro-highlight in the module's CSS Class field
   (Advanced → CSS ID & Classes).

   Per-module tweaks — set custom properties in the module's
   Main Element custom CSS:
       --gpro-hl-w:  200px;   width of the bar
       --gpro-hl-h:  12px;    height of the bar
       --gpro-hl-x:  -70%;    horizontal offset
       --gpro-hl-y:  -20%;    vertical offset
       --gpro-hl-bg: <color>; bar color
*/

.gpro-highlight {
  position: relative;
}

.gpro-highlight::before {
  content: "";
  position: absolute;
  width: var(--gpro-hl-w, 140px);
  height: var(--gpro-hl-h, 12px);
  background: var(--gpro-hl-bg, var(--color-accent));
  top: 50%;
  left: 50%;
  transform: translate(var(--gpro-hl-x, -70%), var(--gpro-hl-y, -20%));
  z-index: -1;
}