@import url(https://fonts.bunny.net/css?family=lilex:100,300);
@layer base, controls,demo;

@layer demo {
	body{
		font-family: 'Lilex', monospace;
	}

	:root{
		--clock-border-radius: 9in;
		--clock-radius: min(80vw, 700px);
		--clock-bg-color: oklch(from var(--clock-base-color) calc(l - 0.65) c h);
		--clock-border-color: oklch(from var(--clock-base-color) .25 c h );
		
		--rings-trans-duration: 300ms;
		--rings-trans-easing: linear(0, 0.069 8.6%, 0.131 14.6%, 0.204 19.8%, 0.294 24.4%, 0.548 33.3%, 0.999 44.7%, 0.709 53.2%, 0.642 56.7%, 0.62 60.1%, 0.639 63.2%, 0.694 66.4%, 0.999 77.4%, 0.93 81.4%, 0.909 85%, 0.922 88.2%, 0.989 95.7%, 1);

		/* possible colors - for selector and for the clock base color */
		--option-color-1: gainsboro;
		--option-color-2: palevioletred;
		--option-color-3: skyblue;
		--option-color-4: gold;
		--option-color-5: yellowgreen;
		--option-color-6: mediumorchid;
		
		/* all colors will be calculated from this base color*/
	  --clock-base-color: rgb(202, 213, 226); 
		
		/* define base color according to which radio button is selected */
		&:has(#color-1:checked){ --clock-base-color: var(--option-color-1);}
		&:has(#color-2:checked){ --clock-base-color: var(--option-color-2);}
		&:has(#color-3:checked){ --clock-base-color: var(--option-color-3);}
		&:has(#color-4:checked){ --clock-base-color: var(--option-color-4);}
		&:has(#color-5:checked){ --clock-base-color: var(--option-color-5);}
		&:has(#color-6:checked){ --clock-base-color: var(--option-color-6);}

		
		/* time display */
	  --display-bg-color: oklch(from var(--clock-base-color) .35 c h / .15 );
		/*--display-border-color: var(--clock-base-color); */
		--display-txt-color: oklch(from var(--clock-base-color) calc(l - 0.155) c h);
		--display-dots-color: oklch(from var(--clock-base-color) calc(l - 0.355) c h);
		
		/* seconds hand/ring */
	  --seconds-degrees: 25deg;
		--seconds-start-angle: 90deg;
		--seconds-color: oklch(from var(--clock-base-color) calc(l - 0.15) c h);

		/* minutes hand/ring */
	  --minutes-degrees: 65deg;
		--minutes-start-angle: calc(var(--seconds-start-angle) + var(--seconds-degrees) + 0deg);
		--minutes-color: oklch(from var(--clock-base-color) calc(l - 0.25) c h);

		/* hours hand/ring */
		--hours-degrees: 90deg;
		--hours-start-angle: calc(var(--minutes-start-angle) + var(--minutes-degrees) + 0deg);
		--hours-color: oklch(from var(--clock-base-color) calc(l - 0.35) c h);

		--ring-label-bg-color: oklch(from var(--clock-base-color) l c h / .5);
		--ring-label-text-color: white;
	}
	
	[id="clock"] {
		position: relative;
	  width: var(--clock-radius);
		height: var(--clock-radius);
		border-radius: var(--clock-border-radius, 9in);
	  aspect-ratio: 1;
		background-color: var(--clock-bg-color);
		border:1px solid var(--clock-border-color);
		pointer-events: none;
		
		/* define custom properties for each time unit */
		[data-unit="seconds"] { 
			/* expanding ring */
			--ring-size: calc(var(--seconds) / 60 * 100%);
			--ring-start-angle:var(--seconds-start-angle);
			--ring-color: var(--seconds-color);
			--ring-degrees: var(--seconds-degrees);
			--ring-width: 1px;
		
			/* time display */
			--display-text: var(--seconds-text);
			--display-bg-color: var(--seconds-color);

			/* ring labels to display unit and time */
			--ring-label-anchor-name : --⚓-seconds;
			--ring-label-anchor-position: inline-end center;
			--ring-label-text: "Seconds:" var(--display-text);
		}
		[data-unit="minutes"]{ 
			/* expanding ring */
			--ring-size: calc(var(--minutes) / 60 * 100%);
			--ring-start-angle:var(--minutes-start-angle);
			--ring-color:var(--minutes-color);
			--ring-degrees: var(--minutes-degrees);
			--ring-width: 1px;
		
			/* time display */
			--display-text: var(--minutes-text);
			--display-bg-color: var(--minutes-color);

			/* ring labels to display unit and time */
			--ring-label-anchor-name : --⚓-minutes;
			--ring-label-anchor-position: block-end center;
			--ring-label-text: "Minute:" var(--display-text);
		}
			
		[data-unit="hours"] { 
			/* expanding ring */
			--ring-size: calc(var(--hours) / 24 * 100%);
			--ring-start-angle:var(--hours-start-angle);
			--ring-color: var(--hours-color);
			--ring-degrees: var(--hours-degrees);
			--ring-width: 1px;
	
			/* time display */
			--display-text: var(--hours-text);
			--display-bg-color: var(--hours-color);

			/* ring labels to display unit and time */
			--ring-label-anchor-name : --⚓-hours;
			--ring-label-anchor-position: inline-start center;
			--ring-label-text: "Hour:" var(--display-text);
			
		}
		
		/* time display */
		.time-display{
			position: absolute;
			top: 50%;
			left: 50%;
			translate: -50% -100%;
			z-index: 10;
			width: fit-content;
			aspect-ratio: 4/2;
			font-size: clamp(1rem, 2vw + .045rem, 1.8rem);
			font-weight: 100;
			display: grid;
			grid-template-columns: 1fr .25fr 1fr .25fr 1fr;
			gap: 0;
			background-color: var(--display-bg-color);
			border-radius: var(--clock-border-radius, 9in) var(--clock-border-radius, 9in) 0 0;
			backdrop-filter: blur(2px);
			padding: 1em 1em 0 1em;
			
			/* time values */
			span{
				/*outline: 1px dashed red;*/
				position: relative;
				display: grid;
				place-content: center;
				
				/* dividers */
				&:nth-child(even){
					opacity: .75;
					font-size: 1rem;
					color: var(--display-dots-color);
				}
				/* time value - I am tempted to use attr() for this */
				&::before{
					content: var(--display-text);
					color: var(--display-txt-color,white);
				}
			}
		}
	
		/* clock hands/rings */
		.hand {
			pointer-events: none;
			anchor-name: var(--ring-label-anchor-name);
		  position: absolute;
		  inset: 0;
			margin: auto;
			z-index: 2;
			width: var(--ring-size, 0%);
		  height: var(--ring-size, 0%);
			border: var(--ring-width) dashed var(--ring-color);
			border-radius: var(--clock-border-radius, 9in);
			background: conic-gradient(from var(--ring-start-angle),var(--ring-color) 0 var(--ring-degrees), #0000 0);
			transition: var(--rings-trans-duration) var(--rings-trans-easing);
		}

		/* unit labels */
		.labels 
		div{
			z-index: 999;
			position: absolute;
			translate: 4px 0;
			font-size: .6rem;
			color: var(--ring-label-text-color);
			background: var(--ring-label-bg-color);
			padding: .1em .3em;
			backdrop-filter: blur(3px);
			border-radius: 3px;
			position-anchor: var(--ring-label-anchor-name);
			position-area: var(--ring-label-anchor-position);
			&[data-unit="hours"]{
				translate: -4px 0;
			}
			&[data-unit="minutes"]{
				translate: 4px 0;
			}
			&::after{
				content: var(--ring-label-text);
				text-wrap: nowrap;
			}
		}
	}

	
}

@layer controls{
	.controls {
	  --count: 6;
	  position: fixed;
		top:1rem;
		right: 1rem;
		/*translate: 50% 0;*/
	  width: 100px;
	  aspect-ratio: 1;
	  border-radius: 50%;
	  overflow: hidden;
		scale: .5;
		transition: scale 150ms ease-in-out;
		z-index: 10;
		&:hover{
			scale: 1;
		}
		/* center hole */
		&::after {
		  content: "";
		  position: absolute;
		  inset: 40%;
		  background: var(--clr-bg);
		  border-radius: 50%;
		  pointer-events: none;
		}
		/* label wedge */
		label {
			--angle-step: calc(360deg / var(--count));
			--angle: calc(sibling-index() * var(--angle-step));
		
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  width: 50%;
		  height: 100%;
		  offset-path: ray(var(--angle));
		  offset-rotate: auto;
		  transition: filter 0.2s ease;
		  cursor: pointer;
		  clip-path: polygon(0 70%, 150% 0%, 100% 100%);
			filter: brightness(.75);
			font-size: 0;
			/* assign colors (tempted to use attr() function for this ) */
			&:nth-child(1) { background: oklch(from var(--option-color-1) calc(l - 0.25) c h);}
			&:nth-child(2) { background: oklch(from var(--option-color-2) calc(l - 0.25) c h);}
			&:nth-child(3) { background: oklch(from var(--option-color-3) calc(l - 0.25) c h);}
			&:nth-child(4) { background: oklch(from var(--option-color-4) calc(l - 0.25) c h);}
			&:nth-child(5) { background: oklch(from var(--option-color-5) calc(l - 0.25) c h);}
			&:nth-child(6) { background: oklch(from var(--option-color-6) calc(l - 0.25) c h);}
		}
	}

	/* hover & checked label */
	label:hover,
	body:has(#color-1:checked) label:nth-child(1),
	body:has(#color-2:checked) label:nth-child(2),
	body:has(#color-3:checked) label:nth-child(3),
	body:has(#color-4:checked) label:nth-child(4),
	body:has(#color-5:checked) label:nth-child(5),
	body:has(#color-6:checked) label:nth-child(6) {
	  filter: brightness(1.5);
	}
}


   /* general styling not relevant for this demo */
@layer base {
	* {
		box-sizing: border-box;
	}
	:root {
		/*color-scheme: light dark;*/
		--bg-light: rgb(212, 212, 212);
		--bg-dark: rgb(23, 23, 23);
		--txt-light: rgb(10, 10, 10);
		--txt-dark: rgb(245, 245, 245););
		--line-light: rgba(0 0 0 / .25);
		--line-dark: rgba(255 255 255 / .25);
    
    /*
		--clr-bg: light-dark(var(--bg-light), var(--bg-dark));
    --clr-txt: light-dark(var(--txt-light), var(--txt-dark));
    --clr-lines: light-dark(var(--line-light), var(--line-dark));
		*/
		--clr-bg: var(--bg-dark);
		--clr-txt: var(--txt-dark);
	}
 
	body {
		background-color: var(--clr-bg);
		color: var(--clr-txt);
		min-height: 100svh;
		margin: 0;
		padding: 2rem;
		font-family: "Jura", sans-serif;
		font-size: 1rem;
		line-height: 1.5;
    display: grid;
    place-content: center;
    gap: 2rem;
	}
	
	.sr-only{
	  position: absolute;
	  width: 1px;
	  height: 1px;
	  padding: 0;
	  margin: -1px;
	  overflow: hidden;
	  clip: rect(0, 0, 0, 0);
	  white-space: nowrap;
	  border-width: 0;
	}
}