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

.showcase {
	--_border-color: hsl(var(--gray) 85%);

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 2rem;

	figure {
		display: grid;
		grid-template-rows: 1fr auto;

		inline-size: 100%;
		margin: 0;
		overflow: hidden;

		border: 1px solid var(--_border-color);
		border-radius: .5em;

		box-shadow: 0 .02em .5em -.7em hsl(var(--gray) 30%);

		&:is(:hover, :focus-within) {
			img {
				scale: 1.1;
			}
		}

		img {
			inline-size: 100%;
			aspect-ratio: 4 / 3;
			transition: scale .2s;
		}

		figcaption {
			margin: 0;
			padding: 0 .7em .5em;
			border-block-start: 1px solid var(--_border-color);
			background-color: hsl(var(--gray) 98%);
			z-index: 1;

			h2 {
				font-size: 200%;

				&:not(:only-child) {
					margin-block-end: 0;
				}
			}

			p {
				text-wrap: balance;
			}
		}
	}

	&.upcoming {
		figure {
			&::before {
				content: "";
				inline-size: 100%;
				aspect-ratio: 4 / 3;

				background: var(--rainbow);
				animation: var(--rainbow-scroll);

				mask-image: url('data:image/svg+xml,\
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 1080">\
						<path fill="none" stroke="black" stroke-width="25" stroke-linecap="round" stroke-linejoin="round" d="M233 579a70 70 0 0 0 70 70h834a70 70 0 0 0 0-140H303a70 70 0 0 0-70 70Z"/>\
						<path fill-rule="evenodd" d="M270 579a42 42 0 0 0 42 42h538v-84H312a42 42 0 0 0-42 42Z"/>\
						<text xml:space="preserve" x="425.54" y="462" font-family="Impact" font-size="90" font-weight="800" letter-spacing="2.7">COMING SOON...</text>\
					</svg>');
				mask-repeat: no-repeat;
				mask-size: 100% 100%;
			}
		}
	}
}

.scrollable {
	--_transparent-canvas: color-mix(in oklab, canvas, oklab(none none none / 0%) 100%);
	--_hint-color: color-mix(in oklab, canvastext 30%, var(--_transparent-canvas));

	max-inline-size: 100%;
	overflow-x: auto;

	/**
	* Scrolling hints (https://lea.verou.me/2012/04/background-attachment-local/)
	*/

	background: linear-gradient(to right, canvas 1em, var(--_transparent-canvas)) left / 3em 100%,
	            linear-gradient(to right, var(--_hint-color), var(--_transparent-canvas) 70%) left / 1em 100%,
	            linear-gradient(to left, canvas 1em, var(--_transparent-canvas)) right / 3em 100%,
	            linear-gradient(to left, var(--_hint-color), var(--_transparent-canvas) 70%) right / 1em 100%;
	background-repeat: no-repeat;
	background-attachment: local, scroll, local, scroll;
}

/* Tables with demos */
table:has(html-demo) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);

	thead,
	tbody,
	tfoot,
	tr {
		display: contents;
	}

	@media (width < 950px) {
		/* Visually hide column headings on small screens */
		thead th {
			position: absolute;
			left: -10000px;
			top: auto;
			width: 1px;
			height: 1px;
			overflow: hidden;
		}

		:is(&, & th, & td) {
			border: none;
			background-color: transparent;
		}
	}

	@media (width >= 950px) {
		&:has(tbody > tr:first-of-type > td:last-child:nth-child(2)) {
			/* Table has two columns */
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		&:has(tbody > tr:first-of-type > td:last-child:nth-child(3)) {
			/* Table has three columns */
			grid-template-columns: auto repeat(2, minmax(0, 1fr));
		}

		thead {
			display: contents;
		}

		tbody {
			th {
				/* To save space, render row headers vertically */
				text-align: center;
				writing-mode: vertical-rl;
				transform: rotate(.5turn);
			}
		}
	}
}