/**
 * css-screensize
 * BSD 2-Clause License
 * Copyright (c) Jane Ori, PropJockey, 2023
 */

:where(:root:has(.css-screensize)) {
  --_pj_scrnsz_tick-hoist: paused;
  --_pj_scrnsz_tick-capture: paused;
  --css-screensize-animations:
    pj-css-screensize-hoist 1ms linear both var(--_pj_scrnsz_tick-hoist, running),
    pj-css-screensize-capture 1ms linear both var(--_pj_scrnsz_tick-capture, running);
  animation: var(--css-screensize-animations);

  --_pj_scrnsz_search-in: 0;
  --_pj_scrnsz_search-out: var(--_pj_scrnsz_search-in);

  --_pj_scrnsz_jump-in: 1024;
  --_pj_scrnsz_jump-out: var(--_pj_scrnsz_jump-in);

  --width: 0;
  --_pj_scrnsz_width-out: var(--width);

  --height: 0;
  --_pj_scrnsz_height-out: var(--height);

  --_pj_scrnsz_set-search-out: calc(
    (1 - min(1, var(--height))) * (
      1px + max(-1px, min(0px, -100000 * (
      (var(--_pj_scrnsz_search-in) + var(--_pj_scrnsz_jump-in)) * 1px - (
        min(1, var(--width)) * 100vh +
        (1 - min(1, var(--width))) * 100vw
      )
    )
  ))));
  --_pj_scrnsz_set-axis: calc(
    (1 - min(1, var(--height))) * (
      (1px - var(--_pj_scrnsz_set-search-out)) * (1 + max(-1, min(0, -100000 * (
        var(--_pj_scrnsz_jump-in) - 1
      ))))
    )
  );
  --_pj_scrnsz_set-jump-out: calc(
    (1 - min(1, var(--height))) * (
      1px - min(1px, var(--_pj_scrnsz_set-search-out) + var(--_pj_scrnsz_set-axis))
    )
  );
  --_pj_scrnsz_do-reset: calc(
    min(1, var(--height)) * (
      max(var(--width) * 1px - 100vw, var(--width) * -1px + 100vw) +
      max(var(--height) * 1px - 100vh, var(--height) * -1px + 100vh)
    )
  );
}
.css-screensize > :nth-child(-n+2) > * { position: absolute; inset: 0; left: 100%; }
.css-screensize > :nth-child(-n+2) :nth-child(1) {
  left: calc((1px - var(--_pj_scrnsz_set-search-out)) * 10000);
  background: red;
}
.css-screensize > :nth-child(-n+2) :nth-child(2) {
  left: calc((1px - var(--_pj_scrnsz_set-axis)) * 10000);
  background: green;
}
.css-screensize > :nth-child(-n+2) :nth-child(3) {
  left: calc((1px - var(--_pj_scrnsz_set-jump-out)) * 10000);
  background: blue;
}
.css-screensize > :nth-child(-n+2) :nth-child(4) {
  left: calc((1px - (
    1px + max(-1px, min(0px, 100000 * (var(--_pj_scrnsz_do-reset) - 3px)))
  )) * 10000);
  background: purple;
}
:root:has(.css-screensize > :nth-child(-n+2) :nth-child(1):hover) {
  --_pj_scrnsz_search-out: calc(var(--_pj_scrnsz_search-in) + var(--_pj_scrnsz_jump-in));
}
:root:has(.css-screensize > :nth-child(-n+2) :nth-child(2):hover) {
  --_pj_scrnsz_width-out: calc(
    min(1, var(--width)) * var(--width) +
    (1 - min(1, var(--width))) * var(--_pj_scrnsz_search-in)
  );
  --_pj_scrnsz_height-out: calc(
    min(1, var(--width)) * var(--_pj_scrnsz_search-in)
  );
  --_pj_scrnsz_search-out: 0;
  --_pj_scrnsz_jump-out: 1024;
}
:root:has(.css-screensize > :nth-child(-n+2) :nth-child(3):hover) {
  --_pj_scrnsz_jump-out: calc(var(--_pj_scrnsz_jump-in) / 2);
}
:root:has(.css-screensize > :nth-child(-n+2) :nth-child(4):hover) {
  --_pj_scrnsz_search-out: 0;
  --_pj_scrnsz_jump-out: 1024;
  --_pj_scrnsz_width-out: 0;
  --_pj_scrnsz_height-out: 0;
}
:where(.css-screensize) {
  --opacity: 0.9;
  --background: hotpink;
  --enable: 1; /* 1 = enabled, 0 = disabled */
  --prompt: "Screensize Required\A~ please :hover ~";
  --confirm: "...Capturing Screensize";
  opacity: var(--opacity);
  position: fixed;
  transform: scale(2);
  inset: 0px;
  overflow: hidden;
  z-index: 9999;
  list-style: none;
  left: calc((1px - (
    1px + max(-1px, min(0px, 100000 * (var(--_pj_scrnsz_do-reset) - 3px)))
  )) * 10000 * min(1, var(--height)));
  background: var(--background);
  top: calc((1 - clamp(0, 10000 * var(--enable, 1), 1)) * 100%);
}
:where(.css-screensize.contained) {
  position: absolute;
  transform: none;
}
:where(.css-screensize)::before {
  font-family: sans-serif;
  content: var(--prompt);
  white-space: pre;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
:where(.css-screensize:hover)::before {
  content: var(--confirm);
}
.css-screensize > :nth-child(1) { --_pj_scrnsz_rep-state: 0; }
.css-screensize > :nth-child(2) { --_pj_scrnsz_rep-state: 1; }
.css-screensize > :nth-child(3) { --_pj_scrnsz_rep-state: 2; }
.css-screensize > :nth-child(4) { --_pj_scrnsz_rep-state: 3; }
.css-screensize > :nth-child(-n+4) {
  position: absolute;
  inset: 0;
  --_pj_scrnsz_matches: calc(1 + max(-1, 100000 * min(
    var(--_pj_scrnsz_rep-state) - var(--_pj_scrnsz_state, 0), var(--_pj_scrnsz_state, 0) - var(--_pj_scrnsz_rep-state)
  )));
  left: calc(100% - var(--_pj_scrnsz_matches) * 100%);
  opacity: 0; /* set to 1 for debug; WARNING: flashing colors */
}
:root:has(.css-screensize > :nth-child(1):hover) {
  --_pj_scrnsz_tick-hoist: paused;
  --_pj_scrnsz_tick-capture: running;
  --_pj_scrnsz_state: 1;
}
:root:has(.css-screensize > :nth-child(2):hover) {
  --_pj_scrnsz_tick-hoist: paused;
  --_pj_scrnsz_tick-capture: paused;
  --_pj_scrnsz_state: 2;
}
:root:has(.css-screensize > :nth-child(3):hover) {
  --_pj_scrnsz_tick-hoist: running;
  --_pj_scrnsz_tick-capture: paused;
  --_pj_scrnsz_state: 3;
}
:root:has(.css-screensize > :nth-child(4):hover) {
  --_pj_scrnsz_tick-hoist: paused;
  --_pj_scrnsz_tick-capture: paused;
  --_pj_scrnsz_state: 0;
}
@property --_pj_scrnsz_search-out { syntax: "<number>"; initial-value: 0.0; inherits: false; }
@property --_pj_scrnsz_jump-out { syntax: "<number>"; initial-value: 0.0; inherits: false; }
@property --_pj_scrnsz_width-out { syntax: "<number>"; initial-value: 0.0; inherits: false; }
@property --_pj_scrnsz_height-out { syntax: "<number>"; initial-value: 0.0; inherits: false; }
@property --_pj_scrnsz_set-search-out { syntax: "<length>"; initial-value: 0px; inherits: true; }
@property --_pj_scrnsz_set-axis { syntax: "<length>"; initial-value: 0px; inherits: true; }
@property --_pj_scrnsz_set-jump-out { syntax: "<length>"; initial-value: 0px; inherits: true; }
@property --_pj_scrnsz_do-reset { syntax: "<length>"; initial-value: 0px; inherits: true; }

@keyframes pj-css-screensize-hoist {
  0%, 100% {
    --_pj_scrnsz_search-in: var(--_pj_scrnsz_search-held, 0);
    --_pj_scrnsz_jump-in: var(--_pj_scrnsz_jump-held, 1024);
    --width: var(--_pj_scrnsz_width-held, 0);
    --height: var(--_pj_scrnsz_height-held, 0);
  }
}
@keyframes pj-css-screensize-capture {
  0%, 100% {
    --_pj_scrnsz_search-held: var(--_pj_scrnsz_search-out);
    --_pj_scrnsz_jump-held: var(--_pj_scrnsz_jump-out);
    --_pj_scrnsz_width-held: var(--_pj_scrnsz_width-out);
    --_pj_scrnsz_height-held: var(--_pj_scrnsz_height-out);
  }
}