/* LED edge – the thin blue light line from the unit's glass front.
   It is brightest at the top left and fades along the edge, like on the product.

   .led-line   horizontal light strip (single element)
   .led-frame  light outline around a box; needs a child <span class="led-frame__light" aria-hidden="true"></span>

   Lit by default. data-led="off" on the element or an ancestor switches it off;
   led.js uses that to light it when it scrolls into view.
   Tunables: --led-width, --led-inset (frame), --led-radius (frame). */

.led-line,
.led-frame {
  --led-core: var(--accent);
  --led-fade: color-mix(in srgb, var(--led-core) 18%, transparent);
  --led-width: 1.5px;
  --led-glow-filter: drop-shadow(0 0 3px var(--accent-glow)) drop-shadow(0 0 10px var(--accent-glow));
}

/* Line */
.led-line {
  position: relative;
  height: var(--led-width);
}

.led-line::before,
.led-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--led-width);
  pointer-events: none;
}

.led-line::before {
  background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
}

.led-line::after {
  background: linear-gradient(90deg, transparent, var(--led-core) 10%, var(--led-core) 45%, var(--led-fade) 90%, transparent);
  filter: var(--led-glow-filter);
  transition: opacity var(--dur-slower) var(--ease-emphasis);
}

/* Frame */
.led-frame {
  --led-inset: 0px;
  --led-radius: var(--radius-l);
  position: relative;
  border-radius: var(--led-radius);
  isolation: isolate;
}

.led-frame::before,
.led-frame__light::before {
  content: "";
  position: absolute;
  inset: var(--led-inset);
  padding: var(--led-width);
  border-radius: max(0px, calc(var(--led-radius) - var(--led-inset)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.led-frame::before {
  background: var(--line-strong);
  z-index: 1;
}

.led-frame__light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  filter: var(--led-glow-filter);
  transition: opacity var(--dur-slower) var(--ease-emphasis);
}

.led-frame__light::before {
  background: linear-gradient(100deg, var(--led-core) 0%, var(--led-core) 22%, var(--led-fade) 68%, color-mix(in srgb, var(--led-core) 30%, transparent) 100%);
}

/* Off state: switching off is quicker than lighting up */
[data-led="off"] .led-frame__light,
.led-line[data-led="off"]::after,
[data-led="off"] .led-line::after {
  opacity: 0;
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-exit);
}