@layer bs-component {
	:where(.ui-video-list) {
		--ui-video-list-bdrs: .25rem;
		--ui-video-list-olo: .5rem;
		--ui-video-list-popover-trsdu: 0.5s;
		--ui-video-list-btn-bgc: #EEE;
		--ui-video-list-btn-bgc-hover: #CCC;
		--ui-video-list-btn-c: #333;
		--ui-video-list-btn-fz: 2rem;
		--ui-video-list-btn-w: 3rem;
		--ui-video-list-btn-bdrs: 50%;
		--ui-video-list-btn-trsdu: 0.25s;

		all: unset;
		display: grid;
		gap: var(--ui-video-list-gap, 1rem); /* gap between items */
		grid-template-columns: repeat(auto-fill, minmax(var(--ui-video-list-miw, 250px), 1fr));
		grid-template-rows: repeat(4, auto);
		list-style: none;

		li {
			display: grid;
			grid-row: span 4;
			grid-template-rows: subgrid;
			justify-items: start;
			position: relative;
			row-gap: var(--ui-video-list-rg, .5lh);
			&:has([popovertargetaction="show"]:is(:focus-visible, :hover)) img {
				filter: brightness(var(--ui-video-list-hover-brightness, 0.6)) contrast(var(--ui-video-list-hover-contrast, 1.2));
			}
		}
		h3 { margin: 0; }
		img {
			border-radius: var(--ui-video-list-bdrs);
			transition: filter var(--ui-video-list-img-trsdu, 0.2s) ease;
		}
		img, video { width: 100%; }
		time {
			color: var(--ui-video-list-time-c, GrayText);
			font-weight: var(--ui-video-list-time-fw, 500);
		}

		[popover] {
			background: #0000;
			border: 0;
			height: 100svh;
			opacity: 0;
			transition:
				display var(--ui-video-list-popover-trsdu) allow-discrete,
				overlay var(--ui-video-list-popover-trsdu) allow-discrete,
				opacity var(--ui-video-list-popover-trsdu);
			width: 100vw;
			&::backdrop {
				backdrop-filter: blur(3px);
				background: #000C;
			}
			&:popover-open {
				display: grid;
				opacity: 1;
				video { scale: 1; }
			}
			video {
				scale: 0;
				transition: scale var(--ui-video-list-popover-trsdu);
			}
			@starting-style {
				&:popover-open {
					opacity: 0;
					video { scale: 0; }
				}
			}
		}
		[popovertargetaction="hide"],
		[popovertargetaction="show"]::after {
			aspect-ratio: 1;
			background: var(--ui-video-list-btn-bgc, #EEE);
			border: 0;
			border-radius: var(--ui-video-list-btn-bdrs, 50%);
			color: var(--ui-video-list-btn-c, #333);
			font-family: system-ui, sans-serif;
			font-size: var(--ui-video-list-btn-fz, 2rem);
			place-content: center;
			transition: background var(--ui-video-list-btn-trsdu, 0.25s) ease;
			width: var(--ui-video-list-btn-w, 3rem);
			&:is(:focus-visible, :hover) {
				background: var(--ui-video-list-btn-bgc-hover, #CCC);
			}
		}
		[popovertargetaction="hide"] {
			display: inline grid;
			place-self: start end;
			translate: -1rem 1rem;
		}
		[popovertargetaction="show"] {
			all: unset;
			border-radius: var(--ui-video-list-bdrs);
			color: #0000;
			display: grid;
			inset: 0;
			position: absolute;
			&::after {
				/* thin space: "\2009▶" */
				/* hairspace: */
				content: "\200A▶";
				display: inline grid;
				grid-area: 1 / 1;
				justify-self: center;
				align-self: center;
				opacity: 0;
				transition: background var(--ui-video-list-btn-trsdu, 0.25s) ease, opacity var(--ui-video-list-show-trsdu, .75s) ease;
			}
			&:is(:focus-visible, :hover) {
				background: #0000;
				outline: var(--ui-video-list-focus-outline-w, 2px) solid var(--ui-video-list-focus-outline-c, #DDD);
				outline-offset: var(--ui-video-list-olo);
				&::after { opacity: .75; }
			}
		}
	}
}