@use 'sass:math';

$u: 1rem; // sizing unit 
$b: #1f1f1f; // main background
$c: #daff47 #f43e75; // palette
$g: 1.25*$u; // slider assembly grid gap

$ruler-s: $u; // minor ruler mark distance
$ruler-m: 6; // ruler multiplier = how many ruler marks affected by thumb proximity

$thumb-d: $ruler-m*$u; // slider thumb diameter
$thumb-r: .5*$thumb-d; // slider thumb radius
$thumb-f: .42; // slider thumb arrow sizing factor
$thumb-p: .625*$u; // slider thumb padding

$input-t: 1.25*$u; // real input thickness
$input-r: .5*$input-t;
$input-d: $input-r - $thumb-r; // thumb input offset

$track-t: .1875*$u; // visual track thickness
$track-x: $g + $input-r; // visual track right to input mid
$track-i: $thumb-r + $g; // inner visual track rounding
$track-o: $track-i + $track-t; // outer visual track rounding
$track-r: $track-o + $thumb-r; // outer track glow radius
$track-h: 2*$track-i + $track-t; // hypotenuse (segment between rounding circle centres)
$track-a: math.acos(($input-r + $g + $track-o)/$track-h); // half angle corresp to mid rounding
$track-y: $track-h*math.sin($track-a); // other cathetus
$track-s: $track-i*math.sin($track-a); // background-size of outer rounding gradient
$track-d: $track-y - $track-s; // distance to start of 2nd rounding gradient

/* ===== MIXINS FOR SLIDER TRACK & THUMB ===== */
@mixin track { height: 100% } /* fix track height */

@mixin thumb($m: 0) {
	/* only add a top margin if the m flag is non-zero */
	@if $m > 0 { margin-top: $input-d }
	
	/* we use --sel to flip between normal & hover/ focus styles
	 * detailed explanation 
	 * https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/ */
	--shl: 0 0 0 calc((1 - .375*var(--sel))*1rem) /* slightly decrease spread in hover/ focus case */
				 hsla(0, 0%, 19%, var(--sel)) /* non-zero shadow alpha only in hover/ focus case */;
	box-sizing: border-box;
	border: none; /* get rid of Firefox border */
	padding: $thumb-p; /* to add space around bg limited to content-box */
	width: $thumb-d; height: $thumb-d; /* aspect-ratio: 1 doesn't work here in Firefox */
	border-radius: 50%;
	box-shadow: 
		0 0 .5px hsla(0, 0%, 0%) /* subtle outer highlight; I can't even see it, so wtf, really? */, 
		inset 0 0 1px 1px hsla(0, 0%, 100%, .05) /* subtle... or not... inner highlight */, 
		inset var(--shl) /* inner highlight on focus/ hover */, 
		inset 0 0 0 calc(.5*#{$thumb-f}*(#{$thumb-d} + -2*#{$thumb-p}) + #{$thumb-p}) $b /* grad cover */,
		.25rem -.25rem .25rem #2a2a2a /* small top left light glow */, 
		-.25rem .25rem .75rem #090909 /* small bottom right dark glow */,
		var(--shl) /* outer highlight on focus/ hover */, 
		.75rem -.75rem .75rem #2a2a2a /* large top left light glow */, 
		-.75rem .75rem 1.25rem #090909 /* large bottom right dark glow */;
	background: 
		repeating-conic-gradient(from 60deg /* remember all is rotated by 90° */, 
				transparent 0%, silver 1deg 59deg, transparent 60deg 50%)
			/* since x axis bg size doesn't fit an integer number of times, some space will remain */
			/* explicitly set 2nd bg size value to 100%, even though 
			 * per spec it should be 100% if ommitted, but... Safari bug */
			0/ #{$thumb-f*100%} 100% space content-box
		$b;
	transition: box-shadow .35s;
	cursor: ns-resize /* take into account 90° rotation */
}

/* ===== GENERIC STYLES ===== */
html, body, div, datalist, output, section { display: grid }

html { height: 100% }

body {
	overflow-x: hidden; /* because range input takes up space horizontally before rotation */
	background: $b;
	
	@supports (line-height: tan(45deg)) { --trig: none }
	@supports (color: color-mix(in lch, red 1%, tan)) { --cmix: none }
}

/* ===== SLIDER WRAPPER WITH VISUAL TRACK & GLOW ===== */
.wrap {
	--rng: calc(var(--max) - var(--min)); /* range between max and min values */
	--prg: calc((var(--val) - var(--min))/var(--rng)); /* decimal progress */
	--prc: calc(var(--prg)*100%); /* percentage progress */
	--pos: calc(var(--val)*#{$u}); /* position from 1st ruler line (from val = min) */
	grid-gap: $g; /* space out ruler, track, thumb, output value */
	grid-template-columns: 
		max-content /* ruler */ $track-t /* track thickness */ 
		$input-t /* input thickness */ max-content /* output value */;
	place-self: center; /* put in the middle of body grid cell along both axes */
	color: nth($c, 2); /*fallback  */
	font: 1em trebuchet ms, /* web safe prettify */
		ubuntu, verdana, arial, sans-serif;
	transition: .35s; /* focus/ hover transition */
	
	@supports (color: color-mix(in lch, red 1%, tan)) { /* if color-mix is supported */
	color: /* go between the two end values depending on prc */
		color-mix(in lch, #{nth($c, 2)} var(--prc), #{nth($c, 1)})		
	}
	
	/* make sepia only when range input not focused */
	&:not(:focus-within):not(:hover) { filter: sepia(1) }
	
	/* making up visual track & glow */
	&::before, &::after {
		--pos-x: calc(100% + #{$track-x}); /* x position of middle rounding circle centre */
		--pos-y: calc(var(--pos) + #{$track-r}); /* y position considering vertical overflow  */
		grid-area: 1/ 1/ span 1/ span 2; /* cover first two columns */
		place-self: center end; /* attach to middle right of rightmost cell they cover */
		z-index: 1; /* both on top of ruler */
		width: $track-r - $input-r - $g; /* make it wide enough to contain the glow */
		height: calc(100% + 2*#{$track-r}); /* long enough to contain the glow at min/ max */
		transform: scaley(-1); /* ugh... maybe I could have flipped the gradients instead */
		pointer-events: none;
		content: ''
	}
	
	/* ----- Glow ----- */
	&::before {
		--sl: transparent calc(100% + -.5px), red calc(100% + .5px); /* mask gradient stop list */
		background: /* the track glow */
			radial-gradient(circle $track-r /*  up to where glow fully transparent */
				at var(--pos-x) var(--pos-y), 
				currentcolor $track-i - $track-t, transparent);
		/* how mask compositing works:
		 * https://css-tricks.com/mask-compositing-the-crash-course/ */
		mask: 
			radial-gradient(circle $track-i /* middle rounding */
					at var(--pos-x) var(--pos-y), var(--sl)) subtract, 
			radial-gradient(circle $track-o at 0 0, var(--sl)) /* outer bottom rounding */
				100% calc(var(--pos-y) + -1*#{$track-y})/ 
				#{$track-o} #{$track-s} no-repeat add,
			radial-gradient(circle $track-o at 0 100%, var(--sl)) /* outer top rounding */
				100% calc(var(--pos-y) + #{$track-d})/ 
				#{$track-o} #{$track-s} no-repeat
	}
	
	/* ----- Visual track ----- */
	&::after {
		--sl:  /* mask gradient stop list */
			transparent calc(#{$track-i} + -.5px), 
			red calc(#{$track-i} + .5px) calc(100% + -.5px), 
			transparent calc(100% + .5px);
		background: 
			linear-gradient( /* fill only up to a level */
					currentcolor calc(var(--pos-y) + #{$thumb-d}) /* a little above thumb */, 
					transparent calc(var(--pos-y) + 2*#{$thumb-d}) /* then fade to transparent */)
			#666 /* track background */;
		mask:
			/* line gap in the middle for rounding */
			linear-gradient(/* a bit messed up direction is inverted because of scale(-1) */
					red calc(var(--pos-y) + -1*#{$track-y} + .5px) /* bottom line */, 
					transparent 0 calc(var(--pos-y) + #{$track-y} + -.5px) /* middle gap */, 
					red 0 /* top line */) 
				/* explicitly set 2nd bg size value to 100%, even though 
			 	 * per spec it should be 100% if ommitted, but... Safari bug */
				100%/ #{$track-t} 100%, 
			/* inner middle rounding */
			radial-gradient(circle $track-o at var(--pos-x), var(--sl))
				100% calc(var(--pos-y) + -1*#{$track-d} + -.5px)/ 
				100% calc(2*#{$track-d} + 1px), 
			/* outer bottom rounding */
			radial-gradient(circle $track-o at 0 0, var(--sl))
				100% calc(var(--pos-y) + -1*#{$track-y})/ 
				#{$track-o} #{$track-s}, 
			/* outer top rounding */
			radial-gradient(circle $track-o at 0 100%, var(--sl))
				100% calc(var(--pos-y) + #{$track-d})/ 
				#{$track-o} #{$track-s};
		mask-repeat: no-repeat /* easier if taking this out of shorthand */
	}
}

/* ===== SLIDER WITH VALUE ===== */
[type='range'] {
	&, /* allow styling of range input in WebKit browsers */
	&::-webkit-slider-runnable-track, 
	&::-webkit-slider-thumb { -webkit-appearance: none }
	
	--sel: 0; /* initial selection status: false (0) */
	place-self: center; /* put it in middle of grid cell along both directions */
	/* length based on ruler & thumb dimensions */
	width: calc(var(--max)*#{$u} + #{$thumb-d});
	height: $input-t;
	transform: rotate(-90deg); /* we have no better options for vertical sliders */
	background: transparent; /* get rid of default white in WebKit */
	font: inherit; /* override default 13.333px, ugh */
	cursor: pointer; /* make it obvious it's interactive */
	
	&:focus { outline: none } /* looks ugly AND ***we've already set focus styles*** */
	&:hover, &:focus { --sel: 1 } /* change selection status to true (1) */
	
	/* set track & thumb styles */
	&::-webkit-slider-runnable-track { @include track }
	&::-moz-range-track { @include track }
	&::-webkit-slider-thumb { @include thumb(1) }
	&::-moz-range-thumb { @include thumb }
	
	/* ----- Value display ----- */
	+ output {
		place-self: end; /* put it in bottom right corner of grid cell it's in */
		place-content: center; /* place its content in the middle along both directions */
		margin-left: .25em; /* space it out a bit from oversized thumb on its left */
		width: 1.25em; /* make it wide enough to accommodate all possible values */
		aspect-ratio: 1; /* make it square */
		transform: translatey(calc(50% - var(--pos))); /* move vertically with slider value */
		font-size: 6.25*$u; /* blow up font size */
		font-weight: 100; /* ends up too thick, make it thinner */
		line-height: 1.25; /* now why the fuck didn't I just use the shorthand here */
		counter-reset: val var(--val); /* set counter to slider value */
		/* in order to be able to use its (numeric integer) value for the ::after */
		&::after { content: counter(val) } /* content: var(--val) works only if --val is string */
	}
}

/* ===== RULER ===== */
datalist {
	grid-area: 1/ 1; /* occupy cell at intersection between 1st row & 1st column */
	/* make its gri have max value + 1 rows (because 1st value is 0) of unit height */
	grid-template-rows: repeat(calc(var(--max) + 1), $u);
	margin: -.5*$u 0 /* align horizontal middle of top cell with parent top edge */
}

option {
	/* absolute value of difference between the option index idx & current slider value val 
	 * https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/ */
	--abs: max(var(--val) - var(--idx), var(--idx) - var(--val));
	--rel: calc(var(--abs)/#{$ruler-m}); /* relative value to number of ruler marks affected */
	--sel: max(0, 1 - var(--rel)*var(--rel)); /* try to compensate for no trig with circular dist */
	--off: calc(var(--sel)*#{$input-d}); /* thumb-caused offset */
	grid-row: calc(var(--max) + 1 - var(--idx)); /* visually reverse row order */
	align-self: center; /* ensure big text is vertically in the middle of containing cells */
	padding-right: .75em; /* leave space for ruler marks */
	transform: translate(var(--off)); /* apply thumb caused offset via transform */
	background: /* create ruler marks */
		linear-gradient(hsl(0, 0%, var(--lum, 32%)) 0 0) /* brighter or darker if is/ isn't major */
			100% /* on the right *// .5em 2px /* .5em x 2px box */ no-repeat /* only one box */;
	/* text alpha depends on distance from thumb */
	color: hsla(0, 0%, 93%, calc(1 - .0625*var(--abs)));
	font-size: 2*$u;
	text-align: right;
	transition: .2s ease-out;
	
	@supports (top: calc(sin(5deg)*1px)) { /* if we have trigonometry in CSS */
		--sel: max(0, 1 - var(--rel)); /* linear selection value */
		/* make the ruler mark distribution around thumb follow a cos wave */
		--off: calc(.5*(1 - cos(var(--sel)*180deg))*#{$input-d})
	}
	
	&[label] { --lum: 90% } /* make major ruler markings brighter */
}

/* ===== SUPPORT INFO BOXES ===== */
section {
	grid-gap: .5*$g; /* some space between boxes if there are more */
	position: fixed; /* take out of document flow */
	z-index: 2; /* on top of everything else */
	inset: auto 0 0; /* attach to parent's padind-box edges except top */
	padding: .5*$g; /* set padding equal to gap */
	font: clamp(.625em, 2.5vw, 1.25em)/ 1.25 trebuchet ms, 
		ubuntu, verdana, arial, sans-serif;
}

.box {
	margin: 0; /* override browser default */
	border-left: solid 5px var(--c0, #dc3055);
	padding: inherit; /* pad info boxes as well */
	background: var(--c1, #851d40);
	color: white;
	
	&--warn { --c0: #fd8721; --c1: #c34915 } /* modify palette for warn */
	
	&--list { display: var(--list) }
	&--trig { display: var(--trig) }
	&--cmix { display: var(--cmix) }
}

code, kbd {
	padding: 2px;
	background: hsla(0, 0%, 0%, .2);
	font: 1.1em/ 1.2 ubuntu mono, consolas, monaco, monospace
}