:root {
	/* Visuaalinen ilme 2025 v2 */
	--eerie-black: var(--ke-black);
	--vivid-blue: var(--ke-turquoise);
	--pumpkin-orange: #ff8310;
	--electric-yellow: #ecff00;
	--linen-white: var(--ke-beige-dark);

	/* WTF Design  */
	--plain-white: var(--ke-beige-light);
	--cloud-grey: #b8b6ae;
	--ecru-white: var(--ke-beige);
	--charcoal-black: #2e2e2e;
	--petrol-blue: #002E35;

}

.spot-prices-v2 {
	color: var(--eerie-black);
	accent-color: var(--eerie-black);
	font-size: 1.125rem;
	margin-bottom: 8rem;
	.stats {
		display: flex;
		flex-wrap: wrap;
		border: transparent 1px solid;
		@media (width < 640px) {
			border-color: var(--cloud-grey);
			background-color: var(--cloud-grey);
			gap: 1px;
		}
		> [class*="price-"] {
			line-height: 1.5em;
			background-color: var(--ecru-white);
			padding: 1lh 1ch;
			flex-grow: 1;
			flex-basis: 33%;
		}
		.price-now {
			@media (width < 640px) {
				flex-basis: 100%;
			}
			.value {
				font-size: 2.5rem !important;
			}
		}
		.price {
			line-height: 3.625rem;
		}
		.value {
			font-family: "Dela Gothic One";
			font-size: 2.5rem;
			font-weight: 400;
			font-variant-numeric: tabular-nums;
			/* letter-spacing: -.075ch; */
			@media (width < 640px) {
				font-size: 1.5rem;
			}
		}
		.unit {
			@media (width < 640px) {
				font-size: .875rem;
			}
		}
		.time-block {
			@media (width < 640px) {
				font-size: 1rem;
			}
		}
	}

	.view-options {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		flex-wrap: wrap;
		reading-order: flex-visual;
		> * {
			flex-grow: 1;
		}
		button {
			appearance: none;
			background: transparent;
			border: none;
		}
		.mode,
		.resolution {
			label {
				&[class*="icon:"]::before {
					height: 1em;
				}
				&:not(:empty) {
					@media (width >= 640px) {
						min-width: 140px;
					}
				}
				box-sizing: content-box !important;
				text-align: center;
				cursor: pointer;
				padding: .5rem 1rem;
				margin: 0 0 -1px 0 !important;
				/* translate: 0 1px; */
				background-color: var(--linen-white);
				border: var(--cloud-grey) 1px solid;
				position: relative;
				z-index: 1;
				+ input,
				input {
					position: absolute;
					visibility: hidden;
				}
				+ & {
					border-left: none;
				}
				&:has(+ input:checked),
				&:has(input:checked) {
					background-color: var(--ecru-white);
					border-bottom-color: var(--ecru-white);
				}
				&[for$="mode"]:not(:has(+ input)) {
					background-color: var(--ecru-white);
					border-bottom-color: var(--ecru-white);
					&:has(+ label + input:checked) {
						border-bottom-color: var(--cloud-grey);
						@media (width < 640px) {
							background-color: var(--linen-white);
						}
					}
				}
			}
		}
		.day {
			text-align: center;
			@media (width < 640px) {
				padding-block: 2rem;
				order: -1;
				flex-basis: 100%;
			}
			.label {
				display: inline-block;
				width: 10ch;
			}
		}
		.mode {
			text-align: end;
		}
		&:has(.mode [name="mode"][value="list"]:checked) + .canvas {
			@media (width < 640px) {
				.graph {
					display: none;
				}
			}
			.list {
				display: block;
			}
		}
	}

	.canvas {
		height: min(100dvh, 640px);
		display: flex;
		> :first-child {
			flex-basis: calc(100% - 360px);
			flex-grow: 1;
		}
		> :last-child {
			flex-basis: 360px;
			flex-grow: 1;
		}
	}

	.spot-scroll {
		border: solid var(--cloud-grey) 1px;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow-x: scroll;
		overflow-y: clip;
		align-content: start;
		scrollbar-color: var(--cloud-grey) transparent;
		scrollbar-gutter: stable;
		scrollbar-width: auto;
		padding-inline: 2rem;
	}

	.version {
		position: absolute;
		right: .5ch;
		bottom: -2px;
		color: var(--cloud-grey);
		font-style: italic;
		font-size: 12px;
	}

	.graph {
		position: relative;
		container-type: inline-size;
		background-color: var(--ecru-white);
		overflow: hidden;
		height: 100%;
		align-content: center;

		svg {
			margin-inline: auto;
			position: relative;
			display: block;
			&.spot-frame {
				width: 100%;
				height: 100%;
				z-index: 2;
				pointer-events: none;
				@media (width < 640px) {
					text {
						translate: 0 -1%;
					}
				}
				.mask {
					fill: var(--ecru-white);
					stroke: none;
				}
			}
			&.spot-window {
				display: block;
				margin-inline: auto;
				overflow: visible;
				.tooltip {
					opacity: 0;
					transition: opacity .2s;
					pointer-events: none;
					translate: 0 -7%;
					rect {
						width: 160px;
						height: 56px;
						fill: var(--eerie-black);
						stroke: none;
						translate: -80px -28px;
					}
					text {
						color: var(--plain-white);;
						line-height: 1.4;
						font-size: 14px;
						font-weight: 400;
						fill: var(--plain-white);
						text-anchor: middle;
						&.moment {
							translate: 0 -.2lh;
						}
						&.price {
							translate: 0 .8lh;
							font-weight: 700;
						}
					}
				}
			}
			line {
				&.hour-divider,
				&.scale {
					stroke: var(--cloud-grey);
				}
				&.cursor {
					stroke: var(--eerie-black);
					stroke-width: 1px;
					stroke-dasharray: 2px 2px;
					opacity: 0;
					transition-property: opacity, x;
					transition-duration: .2s;
				}
				&[y1="100%"] {
					stroke: var(--eerie-black);
				}
			}
			rect {
				fill: none;
				stroke: var(--eerie-black);
				stroke-width: 1px;
				&.bar {
					stroke: none;
					fill: var(--vivid-blue);
					transition-property: x, y, width, height;
					transition-duration: .2s;
					&:has(+ .pointer-target:hover),
					&.current:not(.not-today),
					&:hover {
						fill: var(--eerie-black);
						+ .text.price-label + .text.average-price-label,
						+ .text.price-label {
							visibility: visible;
						}
					}
					+ .text.price-label + .text.average-price-label,
					+ .text.price-label {
						visibility: hidden;
					}
				}
				&.pointer-target {
					fill: transparent;
					stroke: none;
				}
			}
			text {
				transition-property: x, y;
				transition-duration: .2s;
				fill: currentcolor;
			}
			&.spot-window {
				/* border-block: 1px var(--cloud-grey) solid; */
				margin-top: 70px;
			}
		}
	}

	.view-options:has(input[type="radio"][name="resolution"][value="h"]:checked) + .canvas .graph .spot-window {
		rect.bar[data-hour="0"]:has(~ rect.bar.current[data-hour="0"]:not(.not-today)),
		rect.bar[data-hour="1"]:has(~ rect.bar.current[data-hour="1"]:not(.not-today)),
		rect.bar[data-hour="2"]:has(~ rect.bar.current[data-hour="2"]:not(.not-today)),
		rect.bar[data-hour="3"]:has(~ rect.bar.current[data-hour="3"]:not(.not-today)),
		rect.bar[data-hour="4"]:has(~ rect.bar.current[data-hour="4"]:not(.not-today)),
		rect.bar[data-hour="5"]:has(~ rect.bar.current[data-hour="5"]:not(.not-today)),
		rect.bar[data-hour="6"]:has(~ rect.bar.current[data-hour="6"]:not(.not-today)),
		rect.bar[data-hour="7"]:has(~ rect.bar.current[data-hour="7"]:not(.not-today)),
		rect.bar[data-hour="8"]:has(~ rect.bar.current[data-hour="8"]:not(.not-today)),
		rect.bar[data-hour="9"]:has(~ rect.bar.current[data-hour="9"]:not(.not-today)),
		rect.bar[data-hour="10"]:has(~ rect.bar.current[data-hour="10"]:not(.not-today)),
		rect.bar[data-hour="11"]:has(~ rect.bar.current[data-hour="11"]:not(.not-today)),
		rect.bar[data-hour="12"]:has(~ rect.bar.current[data-hour="12"]:not(.not-today)),
		rect.bar[data-hour="13"]:has(~ rect.bar.current[data-hour="13"]:not(.not-today)),
		rect.bar[data-hour="14"]:has(~ rect.bar.current[data-hour="14"]:not(.not-today)),
		rect.bar[data-hour="15"]:has(~ rect.bar.current[data-hour="15"]:not(.not-today)),
		rect.bar[data-hour="16"]:has(~ rect.bar.current[data-hour="16"]:not(.not-today)),
		rect.bar[data-hour="17"]:has(~ rect.bar.current[data-hour="17"]:not(.not-today)),
		rect.bar[data-hour="18"]:has(~ rect.bar.current[data-hour="18"]:not(.not-today)),
		rect.bar[data-hour="19"]:has(~ rect.bar.current[data-hour="19"]:not(.not-today)),
		rect.bar[data-hour="20"]:has(~ rect.bar.current[data-hour="20"]:not(.not-today)),
		rect.bar[data-hour="21"]:has(~ rect.bar.current[data-hour="21"]:not(.not-today)),
		rect.bar[data-hour="22"]:has(~ rect.bar.current[data-hour="22"]:not(.not-today)),
		rect.bar[data-hour="23"]:has(~ rect.bar.current[data-hour="23"]:not(.not-today)) {
			fill: var(--eerie-black);
		}
	}
	.view-options:has(input[type="radio"][name="resolution"][value="h"]:checked) + .canvas .list {
		dl > :is(dt, dd):nth-last-of-type(4) {
			border-bottom: none;
		}
		dt:not([data-minute="00"]) {
			&, & + dd {
				display: none;
			}
		}
		dd[class*="-average"]::before {
			display: block;
		}
	}
	.view-options:has(input[type="radio"][name="resolution"][value="q"]:checked) + .canvas .list dd {
		margin: 0;
		&[class*="est "]::before {
			display: block;
		}
	}

	.list {
		display: none;
		margin-left: -1px;
		height: 100%;
		overflow-y: scroll;
		overflow-x: clip;
		scrollbar-color: var(--cloud-grey) transparent;
		scrollbar-gutter: stable;
		scrollbar-width: auto;
		border: 1px solid var(--cloud-grey);
		padding: 1rem 2rem;
		dl {
			display: grid;
			gap: 0;
			grid-template-columns: 1fr 1fr;
			font-size: 1rem;
			margin: 0 !important;
			> :is(dt, dd) {
				line-height: 1.8125;
				&:not(:last-of-type) {
					border-bottom: 1px solid var(--cloud-grey);
				}
			}
			dt {
				font-weight: 400 !important;
				white-space: nowrap;
			}
			dd {
				text-align: right;
				position: relative;
				&[class*="icon:"]::before {
					height: 1em;
					position: absolute;
					left: 100%;
					top: 50%;
					translate: 1ch -50%;
					display: none;
					margin: 0;
				}
				.value {
					font-family: "Dela Gothic One";
					font-variant-numeric: tabular-nums;
					letter-spacing: -.075ch;
				}
			}
		}
	}

	.footer-controls {
		margin-top: 1rem;
		display: flex;
		flex-wrap: wrap;
		font-size: 1.125rem;
		line-height: 1em;
		> * {
			flex-basis: 320px;
			flex-grow: 1;
		}
		> :last-child {
			@media (width >= 640px) {
				text-align: end;
			}
		}
	}

	label {
		font-weight: 400 !important;
		user-select: none;
	}

	:disabled {
		opacity: .5;
	}

	.not {
		visibility: hidden;
	}

	[class*="icon:"] {
		&::before {
			content: "";
			display: inline-block;
			height: 1lh;
			aspect-ratio: 1;
			vertical-align: middle;
			background-color: currentColor;
			mask-repeat: no-repeat;
			mask-image: var(--icon);
		}
		&:not(:empty) {
			&::before {
				margin-right: 1ch;
			}
			&.icon-after::before {
				margin-left: 1ch;
			}
		}
		&[class*="icon:caret-down"] {
			--icon: url(/application/blocks/spot_prices_v2/icons/sprite.svg#caret-down);
		}
		&[class*="icon:caret-up"] {
			--icon: url(/application/blocks/spot_prices_v2/icons/sprite.svg#caret-up);
		}
		&[class*="icon:chart-simple"] {
			--icon: url(/application/blocks/spot_prices_v2/icons/sprite.svg#chart-simple);
		}
		&[class*="icon:download"] {
			--icon: url(/application/blocks/spot_prices_v2/icons/sprite.svg#download);
		}
		&[class*="icon:list"] {
			--icon: url(/application/blocks/spot_prices_v2/icons/sprite.svg#list);
		}
		&[class*="icon:message-exclamation"] {
			--icon: url(/application/blocks/spot_prices_v2/icons/sprite.svg#message-exclamation);
		}
		&[class*="icon:square-arrow-left"] {
			--icon: url(/application/blocks/spot_prices_v2/icons/sprite.svg#square-arrow-left);
		}
		&[class*="icon:square-arrow-right"] {
			--icon: url(/application/blocks/spot_prices_v2/icons/sprite.svg#square-arrow-right);
		}
	}
}