/**************************/
/*    FUNctionality :D    */
/*  User input on screen  */
/**************************/

/* display input on screen */
body:has([value="3D"]:checked) section dl > dd:nth-child(1) > dl > dd::after {
  content: "3D";
}

body:has([value="2D"]:checked) section dl > dd:nth-child(1) > dl > dd::after {
  content: "2D";
}

body:has([value="quirk"]:checked):has([value="2D"]:checked) section dl > dd:nth-child(1) > dl > p::after,
body:has([value="quirk"]:checked):has([value="3D"]:checked) section dl > dd:nth-child(1) > dl > p::after {
  content: "???";
}

body:has([value="play"]:checked) section dl > dd:nth-child(1) > dl > dt::after {
	content: "play";
}

body:has([value="pause"]:checked) section dl > dd:nth-child(1) > dl > dt::after {
	content: "pause";
}

/* show which input was selected mini */
body:has([value="quirk"]:checked) section dl > dd:nth-child(4) > dl > dd:nth-child(1) {
  content:"";
  color: var(--screen);
  background-color: var(--white);
}

body:has([value="2D"]:checked) section dl > dd:nth-child(4) > dl > dd:nth-child(2) {
	content:"";
	color: var(--screen);
	background-color: var(--white);
}

body:has([value="3D"]:checked) section dl > dd:nth-child(4) > dl > dd:nth-child(3) {
	content:"";
	color: var(--screen);
	background-color: var(--white);
}

body:has([value="white"]:checked)
{
	background-color: whitesmoke;
}

body:has([value="black"]:checked)
{
	background-color: var(--black);
}

/* quirk mode */
body:has([value="quirk"]:checked)
{
	background: 
	radial-gradient(circle, var(--trans)),
	conic-gradient(from 180deg, var(--trans-wrap)),
	radial-gradient(circle, var(--trans)),
	conic-gradient(var(--solid-wrap));
	background-blend-mode: overlay;
	height: 100%;
}

html {
  --c1: red;
  --c2: orange;
  --c3: yellow;
  --c4: green;
  --c5: blue;
  --c6: indigo;
  --c7: violet;
  
  --solid: var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c6), var(--c7);
  --solid-wrap: var(--solid), var(--c1);
  --trans: 
    var(--c1), transparent,
    var(--c2), transparent,
    var(--c3), transparent,
    var(--c4), transparent,
    var(--c5), transparent,
    var(--c6), transparent,
    var(--c7)
  ;
  --trans-wrap: var(--trans), transparent, var(--c1);
  
}

/* animation toggle */
body:has([value="2D"]:checked) ol > li {
	animation: --spin 20s ease infinite;
	animation-delay: calc(90ms * sibling-index());
}

body:has([value="3D"]:checked) ol > li {
	animation: --spin-3d 20s infinite;
	animation-delay: calc(90ms * sibling-index());
}

/* play/pause */
body:has([value="play"]:checked) {
	--playstate-flag: play;
	ol > li,
	section dl dd:nth-child(3) > dl > dd > dl,
	section dl dd:nth-child(2) > dl > div > dd,
	form:nth-child(2) label:nth-child(4) {
		animation-play-state: running;
	}
}

body:has([value="pause"]:checked) {
	--playstate-flag: paused;
	ol > li,
	section dl dd:nth-child(3) > dl > dd > dl,
	section dl dd:nth-child(2) > dl > div > dd,
	form:nth-child(2) label:nth-child(4) {
		 animation-play-state: paused;
	 }
}

/* filters */
body:has([value="noise-filter"]:checked) main::before {
	z-index: 3;
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	width: 100vw;
	height: 100vh;
	mix-blend-mode: color-burn;
	opacity: 100%;
	/* SANNE SAID IT WAS ALLOWED */
	filter: url(#noiseFilter) contrast(90%);
	animation: --move-static 0.5s infinite;
	pointer-events: none;
}

/* pressed */
body:has([value="quirk"]:checked) form:nth-child(2) label:nth-child(1) {
	background-color: var(--btn);
	background: radial-gradient(circle at 50% 90%, var(--clr-one-hover) 1px, var(--clr-two-hover) 41%, var(--clr-three-hover) 62%);
}

body:has([value="3D"]:checked) aside > form > label:nth-child(1) {
	background-color: var(--btn);
	background: radial-gradient(circle at 50% 90%, var(--clr-one-hover) 1px, var(--clr-two-hover) 41%, var(--clr-three-hover) 62%);
}

body:has([value="2D"]:checked) aside > form > label:nth-child(2) {
	background-color: var(--btn);
	background: radial-gradient(circle at 50% 90%, var(--clr-one-hover) 1px, var(--clr-two-hover) 41%, var(--clr-three-hover) 62%);
}

@container style(--playstate-flag: play)
{	
	fieldset > label:nth-child(2) {
		background: radial-gradient(circle at 50% 90%, var(--clr-one-hover) 1px, var(--clr-two-hover), var(--clr-three-hover) 62%);
	}

	fieldset label:nth-child(3) {
		background-color: var(--btn);
		background: radial-gradient(circle at 50% 90%, var(--clr-one) 1px, var(--clr-two) 41%, var(--clr-three) 62%);
	}
}

@container style(--playstate-flag: paused)
{
	fieldset label:nth-child(2) {
		background-color: var(--btn);
		background: radial-gradient(circle at 50% 90%, var(--clr-one) 1px, var(--clr-two) 41%, var(--clr-three) 62%);
	}

	fieldset label:nth-child(3) {
		background: radial-gradient(circle at 50% 90%, var(--clr-one-hover) 1px, var(--clr-two-hover), var(--clr-three-hover) 62%);
	}
}

@container style(--theme: normal) {
	ol li {
    	border: 4px solid green;
	}
}

@container style(--theme: red) {
	ol li {
		border: 4px solid red;
	}
}

@container style(--theme: blue) {
    ol li {
    	border: 4px solid blue;
   }
}