/* 
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;
}
@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(--fg);
  background: var(--bg);
  overflow: hidden;
}

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))
	;
	transition: transform .5s;
}
meter[value="0"] {
	transition: none;
}

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);
  //box-shadow: inset 0 0 0 1px var(--bg);
}

meter::-moz-meter-bar {
  background: var(--bg);
  //box-shadow: inset 0 0 0 1px 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 );
}

#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;
	background: var(--fg);
	box-sizing: border-box;
	transform: 
		rotate( calc(var(--index) * 6deg ) )
		translateY( calc( var(--meter-width) * -1vmin ) );
}
li:nth-of-type(5n) {
	transform: 
		rotate( calc(var(--index) * 6deg ) )
		translateY( calc( var(--meter-width) * -1vmin ) )
		rotate( calc(var(--index) * -6deg ) );
	border: none;
	list-style-type: minutes;
	background: none;
	font-size: 4.242vmin;
	width: auto;
}
@counter-style minutes {
  system: cyclic;
  symbols: " ";
  range: 1 2;
  suffix: " ";
}

#minuteIndicators {
//	rotate: calc( var(--hour) * 30deg );
	
}

#hourIndicators {
	rotate: calc( var(--hour) * -30deg );
	font-feature-settings: "ss02";
	transition: rotate .5s;
}
#hourIndicators li {
	transform: 
		rotate( calc(var(--index) * 30deg ) )
		translateY( calc( var(--meter-width) / 1.414 * -1vmin ) )
		rotate( calc(var(--index) * -30deg  + var(--hour) * 30deg ) );
	list-style-type: hours;
	border: none;
	background: none;
	font-size: 4.242vmin;
	width: auto;
}
@counter-style hours {
  system: cyclic;
  symbols: " ";
  range: 13 14;
  suffix: " ";
}