@layer cavalree {
	:where([data-cavalree="button"i], [data-cavalree^="button@"i]) {
		--c-box--cursor: pointer;

		div& {
			--c-box--cursor: default;
		}
	}

	:where([data-cavalree="button/asset"i], [data-cavalree^="button/asset@"i]) {
	}

	:where([data-cavalree="button/content"i], [data-cavalree^="button/content@"i]) {
	}

	:where([data-cavalree="button/figure"i], [data-cavalree^="button/figure@"i]) {
	}

	:where([data-cavalree="button/inner"i], [data-cavalree^="button/inner@"i]) {
	}

	:where([data-cavalree="button/kicker"i], [data-cavalree^="button/kicker@"i]) {
	}

	:where([data-cavalree="button/label"i], [data-cavalree^="button/label@"i]) {
		--c-box--padding--block: calc(0.5rem - var(--c-box--border--size));
		--c-box--padding--inline: calc(1rem - var(--c-box--border--size));
	}
}

@layer cavalree {
	[data-cavalree="button"i] {
		--border--image: linear-gradient(var(--c--color--border), var(--c--color--border));
		--border--offset: 4.5px;
		--border--size: 1px;

		&:hover {
			--border--offset: 0px;
		}
	}

	[data-cavalree="button/asset"i] {
	}

	[data-cavalree="button/content"i] {
	}

	[data-cavalree="button/figure"i] {
	}

	[data-cavalree="button/inner"i] {
	}

	[data-cavalree="button/kicker"i] {
	}

	[data-cavalree="button/label"i] {
		--c-box--padding--block: calc(1.5em - var(--c-box--border--size));
		--c-box--padding--inline: calc((8em / 3) - var(--c-box--border--size));

		--c-text--align: center;
		--c-text--case: var(--c--typography--mark--case);
		--c-text--family: var(--c--typography--mark--family);
		--c-text--line-height: var(--c--typography--mark--line-height);
		--c-text--tracking: var(--c--typography--mark--tracking);
		--c-text--size: var(--c--size--12);
		--c-text--weight: var(--c--typography--mark--weight);

		background-image:
			var(--border--image),
			var(--border--image),
			var(--border--image),
			var(--border--image);

		background-position:
			0% var(--border--offset),
			0% calc(100% - var(--border--offset)),
			var(--border--offset) 100%,
			calc(100% - var(--border--offset)) 0%;

		background-size:
			100% var(--border--size),
			100% var(--border--size),
			var(--border--size) 100%,
			var(--border--size) 100%;

		min-inline-size: min(15rem, 80cqi);

		transition: background-position 250ms ease-out;
	}
}



.c-video-modal {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	background-color: rgb(0 0 0 / 0.8);
	backdrop-filter: blur(4px);
	z-index: 1000;
	padding: 1rem;
}

.c-video-modal[hidden] {
	display: none !important;
}

.c-video-modal_content {
	position: relative;
	background: transparent;
	max-width: 90vw;
	width: min(70rem, 100%);
	aspect-ratio: 16 / 9;
	box-shadow: 0 0 2rem rgb(0 0 0 / 0.4);
}

.c-video-modal_frame {
	width: 100%;
	height: 100%;
	display: block;
	border: none;
	border-radius: 0.5rem;
	background: black;
}

.c-video-modal_close {
	position: absolute;
	top: -2.5rem;
	right: 0;
	background: none;
	border: 0;
	color: white;
	font-size: 2rem;
	cursor: pointer;
	line-height: 1;
	padding: 0.25em 0.5em;
}

.c-video-modal_close:hover,
.c-video-modal_close:focus-visible {
	color: hsl(0 0% 80%);
	outline: none;
}

.c-video-modal_backdrop {
	position: absolute;
	inset: 0;
	cursor: pointer;
}