@import url("https://colorjs.io/assets/css/style.css");
@import url("https://colorjs.io/assets/css/docs.css");

a {
	font-weight: bold;
}

table {
	margin-top: 1em;

	small {
		display: block;
		color: hsl(220 10% 48%);
		font-style: italic;
		font-weight: normal;
		font-family: var(--font-serif);
	}

	th small {
		text-transform: capitalize;
	}

	&.hue-table {
		color-scale {
			&::part(info) {
				position: absolute;
				bottom: .4em;
				right: .1em;
				color: hsl(220 10% 48%);
				transition: 400ms;
			}

			@container (width >= 15em) {
				&::part(info) {
					display: flex;
				}
			}

			@container (width < 15em) {
				&::part(info) {
					inset: auto;
					left: 50%;
					translate: -50% 0;
					top: .8em;
					z-index: 2;
					--l: clamp(0, (l / var(--l-threshold, 0.65) - 1) * -infinity, 1);
					color: oklch(from var(--color) var(--l) 0 h);
				}
			}

			&:not(:hover)::part(info) {
				opacity: 0;
			}
		}
	}
}

color-scale.compact {
	&::part(color-swatch) {
		font-size: 70%;
	}
}

svg.color-chart {
	display: block;
	margin: 1em auto;
	border: 1px solid hsl(220 10% 50%);
	background: linear-gradient(to bottom, hsl(220 10% 50% / 40%) 0 1px, transparent 0) 0 -1px / 100% calc(100% / var(--ticks-y, 10)),
	            linear-gradient(to right, hsl(220 10% 50% / 30%) 0 1px, transparent 0) -1px 0 / calc(100% / var(--ticks-x, 10)) 100%;

	&::before {
		content: "Lightness";
	}

	circle {
		transform-box: fill-box;
		transform-origin: center;
		transition: .3s;

		&:hover {
			transform: scale(1.5);
		}
	}

	line {
		stroke-width: .4px;
	}
}

h2 space-picker {
	--border-radius: 0;
	padding: 0;
	background: inherit;

	&:hover {
		box-shadow: 0 0 0 1em hsl(50 100% 50% / .1) inset;
	}

	&::part(base) {
		background: inherit;
	}
}

color-chart + color-chart {
	margin-top: 2em;
}