/* 
Thank you, Roman
https://codepen.io/kizu/pen/OJdzpmB
*/


@font-face {
	font-family: "Kosmik";
	src: url("../fonts/LTRKosmik-Regular.woff2");
	font-style: normal;
	font-stretch: normal;
	font-weight: normal;
}

:root {
	--meter-width: 42;
	--bg: white;
	--fg: black;
	--rw: brown;
	--lw: red;
}
@media (prefers-color-scheme: dark) {
	:root {
		--fg: white;
		--bg: black;
	}
}

body {
  display: grid;
  margin: 0;
  min-height: 100vh;
  place-items: center;
  font-family: "Kosmik", sans-serif;
  font-feature-settings: "ss03";
  color: var(--rw);
  background: var(--bg);
}

meter:not([style]) {
  visibility: hidden;
}

meter {
  grid-area: 1 / 1;
  z-index: 1;
  width: calc( var(--meter-width) * 1vmin );
  border-radius: 0;
  background: var(--bg);
  height: 1em;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px var(--bg);
  transform-origin: 0.5em 0.5em;
  transform: 
	translateX(calc(50% - 0.5em))
	rotate(calc(360deg * var(--progress) - 90deg))
	;
}
meter[value="0"] {
	transform: 
	translateX(calc(50% - 0.5em))
	rotate(-90deg)
	;
}

meter,
#a#b::-moz-meter-bar {
  border: .3vmin solid;
}


meter::-webkit-meter-bar {
  background: var(--bg);
  border-radius: 0;
  box-sizing: border-box;
  height: 1em;
  border: .3vmin solid;
}

meter::-webkit-meter-optimum-value {
  background: var(--bg);
}

meter::-moz-meter-bar {
  background: var(--bg);
}

#hours {
  font-size: 2.82714594vmin;
  width: calc( var(--meter-width) / 1.414 * 1vmin );
}

#minutes {
  font-size: 1.999396vmin;
  width: calc( var(--meter-width) * 1vmin );
}

#seconds {
	font-size: 1.414vmin;
	width: calc( var(--meter-width) * 1vmin );
}

#minuteIndicators {
	z-index: 2;
}

ol {
	grid-area: 1 / 1;
	width: calc( var(--meter-width) * 2vmin );
	aspect-ratio: 1;
	
	border-radius: 50%;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
}
li {
	font-size: 1.999396vmin;
	grid-area: 1 / 1;
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-position: inside;
	width: 1em;
	aspect-ratio: 1;
	border: 1px solid;
	color: var(--rw);
	background: var(--rw);
	box-sizing: border-box;
	transform: 
		rotate( calc(var(--index) * 4.5deg ) )
		translateY( calc( var(--meter-width) * -1vmin ) );
}
li:nth-of-type(n + 41) {
	color: var(--lw);
	background: var(--lw);
	transform: 
	rotate( calc((var(--index) + 20) * 9deg ) )
	translateY( calc( var(--meter-width) * -1vmin ) );
}
li:nth-of-type(15n) {
	border: none;
	list-style-type: minutes;
	background: none;
	font-size: 5vmin;
	width: auto;
}
@counter-style minutes {
  system: cyclic;
  symbols: " ";
  range: 1 2;
  suffix: " ";
}

#hourIndicators {
	transform: scaleX(100%);
	font-feature-settings: "ss02";
}
#hourIndicators li {
	transform: 
		rotate( calc(var(--index) * 22.5deg ) )
		translateY( calc( var(--meter-width) / 1.414 * -1vmin ) )
		rotate( calc(var(--index) * -22.5deg ) );
	list-style-type: hours;
	border: none;
	background: none;
	font-size: 6vmin;
	width: auto;
}
#hourIndicators li:nth-of-type(n + 9) {
	color: var(--lw);
	transform: 
	rotate( calc( (var(--index) + 4) * 45deg ) )
	translateY( calc( var(--meter-width) / 1.414 * -1vmin ) )
	rotate( calc( (var(--index) + 4) * -45deg ) );
}
@counter-style hours {
  system: cyclic;
  symbols: " ";
  range: 13 14;
  suffix: " ";
}