@layer components {
	.consent-banner {
		--consent-surface: var(--color-surface-2);
		--consent-color: var(--color-text);

		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: var(--layer-consent);
		max-block-size: 50dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--consent-surface);
		color: var(--consent-color);
		border-block-start: var(--border-card);
		box-shadow: var(--shadow-sheet);

		&[hidden] {
			display: none;
		}
	}

	:root[data-consent="pending"] {
		scroll-padding-block-end: var(--consent-banner-block-size, 0px);

		& .consent-banner {
			display: block;
		}

		& body {
			padding-block-end: var(--consent-banner-block-size, 0px);
		}
	}

	.consent-banner__inner {
		display: grid;
		grid-template-columns: var(--consent-cols);
		align-items: center;
		gap: var(--consent-gap);
		max-inline-size: var(--container);
		margin-inline: auto;
		padding-block: var(--consent-pad-block) max(var(--consent-pad-block), env(safe-area-inset-bottom));
		padding-inline: var(--pad-x);
	}

	.consent-banner__text {
		display: grid;
		gap: var(--space-2);
		max-inline-size: var(--measure);
	}

	.consent-banner__title,
	.consent-dialog__title {
		font-family: var(--font-heading);
		font-size: var(--text-h4);
		font-weight: var(--font-weight-heading);
		line-height: var(--leading-tight);
	}

	.consent-banner__body,
	.consent-dialog__intro,
	.consent-dialog__note,
	.consent-category__desc,
	.consent-dialog__policy {
		font-size: var(--text-small);
		line-height: var(--leading-body);
	}

	.consent-banner a,
	.consent-dialog a {
		color: var(--color-text);
		text-decoration-line: underline;
		text-decoration-thickness: var(--underline-w);
		text-underline-offset: var(--underline-offset-text);
		text-decoration-color: var(--color-secondary);

		&:hover {
			color: var(--color-primary);
		}

		&:focus-visible {
			outline: var(--focus-w) solid var(--color-focus-ring);
			outline-offset: var(--focus-offset);
		}
	}

	.consent-choices {
		display: grid;
		grid-auto-flow: var(--consent-choices-flow);
		grid-auto-columns: minmax(0, 1fr);
		gap: var(--consent-choices-gap);
	}

	.consent-choice {
		--btn-stroke: var(--color-text);
		--btn-bg: transparent;
		--btn-color: var(--color-text);
		--btn-hover-stroke: var(--color-primary);
		--btn-hover-bg: var(--color-primary);
		--btn-hover-color: var(--color-on-primary);
		--btn-active-stroke: var(--color-primary-active);
		--btn-active-bg: var(--color-primary-active);
		--btn-active-color: var(--color-on-primary);
		--btn-border-width: var(--border-w);
		--btn-py: var(--space-2);
		--btn-px: var(--space-4);

		min-block-size: var(--control-h);
		font-family: var(--font-body);
		font-size: var(--text-button);
		font-weight: var(--font-weight-medium);
		letter-spacing: var(--tracking-button);
		line-height: var(--leading-tight);
		text-transform: uppercase;
		text-align: center;
		white-space: normal;
		overflow-wrap: anywhere;

		&:focus-visible {
			outline: var(--focus-w) solid var(--color-focus-ring);
			outline-offset: var(--focus-offset);
		}
	}

	.consent-dialog {
		--backdrop: var(--color-backdrop);
		--dialog-bg: var(--color-surface);
		--dialog-color: var(--color-text);
		--dialog-shadow: var(--shadow-card);
		--dialog-translate-y: 0;

		position: fixed;
		inline-size: var(--dialog-w);
		max-inline-size: 100%;
		block-size: var(--dialog-h);
		max-block-size: var(--dialog-max-h);
		margin: var(--dialog-margin);
		padding: 0;
		border: var(--border-card);
		border-radius: var(--radius-md);
		background: var(--dialog-bg);
		color: var(--dialog-color);
		box-shadow: var(--dialog-shadow);

		&[open] {
			display: grid;
			grid-template-rows: auto minmax(0, 1fr) auto;
		}

		&::backdrop {
			background: var(--backdrop);
		}
	}

	.consent-dialog__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		padding-block: var(--space-4);
		padding-inline: var(--space-6) var(--space-3);
		border-block-end: var(--border-card);
	}

	.consent-dialog__title:focus {
		outline: none;
	}

	.consent-dialog__close {
		--btn-stroke: transparent;
		--btn-bg: transparent;
		--btn-color: var(--color-text);
		--btn-hover-bg: var(--color-surface-2);
		--btn-border-width: var(--border-w);
		--btn-py: 0;
		--btn-px: 0;

		flex: none;
		inline-size: var(--min-tap);
		block-size: var(--min-tap);

		& svg {
			inline-size: var(--space-6);
			block-size: var(--space-6);
		}

		&:focus-visible {
			outline: var(--focus-w) solid var(--color-focus-ring);
			outline-offset: calc(-1 * var(--focus-w));
		}
	}

	.consent-dialog__body {
		display: grid;
		align-content: start;
		gap: var(--space-5);
		padding: var(--space-6);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.consent-dialog__categories {
		margin: 0;
		padding: 0;
		border: 0;
		border-block-start: var(--border-card);
	}

	.consent-category {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--space-4);
		padding-block: var(--space-3) var(--space-4);
		border-block-end: var(--border-card);
	}

	.consent-category__label {
		display: flex;
		align-items: center;
		min-block-size: var(--min-tap);
		font-size: var(--text-body);
		font-weight: var(--font-weight-medium);
		cursor: pointer;
	}

	.consent-category__state {
		grid-column: 1 / -1;
		font-size: var(--text-label);
		letter-spacing: var(--tracking-label);
		text-transform: uppercase;
		color: var(--color-text-muted);
	}

	.consent-category__desc {
		grid-column: 1 / -1;
		color: var(--color-text-muted);
	}

	.consent-switch {
		appearance: none;
		position: relative;
		inline-size: var(--switch-w);
		block-size: var(--switch-h);
		margin: 0;
		border: var(--border-w) solid var(--color-line-strong);
		border-radius: var(--radius-md);
		background: var(--color-surface);
		cursor: pointer;

		&::before {
			content: "";
			position: absolute;
			inset-block: var(--space-1);
			inset-inline-start: var(--space-1);
			aspect-ratio: 1;
			background: var(--color-line-strong);
		}

		&:checked {
			border-color: var(--color-primary);
			background: var(--color-primary);

			&::before {
				inset-inline-start: calc(100% - var(--switch-h) + var(--space-1) + 2 * var(--border-w));
				background: var(--color-on-primary);
			}
		}

		&:disabled {
			cursor: not-allowed;
		}

		&:focus-visible {
			outline: var(--focus-w) solid var(--color-focus-ring);
			outline-offset: var(--focus-offset);
		}
	}

	.consent-dialog__policy a {
		display: inline-flex;
		align-items: center;
		min-block-size: var(--min-tap);
	}

	.consent-dialog__footer {
		padding: var(--space-4) var(--space-6) max(var(--space-4), env(safe-area-inset-bottom));
		border-block-start: var(--border-card);
		background: var(--color-surface);
	}

	:root:has(.consent-dialog[open]) {
		overflow: hidden;
		scrollbar-gutter: stable;
	}

	@media (max-height: 500px) {
		.consent-dialog[open] {
			display: block;
			overflow-y: auto;
		}

		.consent-dialog__body {
			overflow-y: visible;
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		.consent-dialog {
			transition: opacity var(--motion-duration-fast) var(--motion-ease), overlay var(--motion-duration-fast) allow-discrete, display var(--motion-duration-fast) allow-discrete;
			opacity: 0;

			&[open] {
				opacity: 1;

				@starting-style {
					opacity: 0;
				}
			}

			&::backdrop {
				transition: background-color var(--motion-duration-fast) var(--motion-ease);
			}
		}

		.consent-switch::before {
			transition: inset-inline-start var(--motion-duration-fast) var(--motion-ease);
		}
	}

	.consent-visually-hidden {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

@media (forced-colors: active) {
	.consent-switch:checked::before {
		background: CanvasText;
	}
}