.cookiebanner-settings {
	--cookiebanner-height: 100vh;
	--cookiebanner-max-width: 100%;
	--cookiebanner-padding: var(--padding-sm);
	--cookiebanner-input-padding: var(--padding-xs) 0;
	--cookiebanner-dir: column;
	--cookiebanner-buttons-dir: column;
	--cookiebanner-gap: var(--size-3);
	--cookiebanner-buttons-dir: column;

	--font-size-label: var(--fs-sm);
	--checkbox-size: var(--size-6);
	--checkmark-color: var(--color-black);
	--checkmark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M14.4395 0.5C14.7194 0.5 14.9893 0.610058 15.1885 0.807617C15.3876 1.00526 15.5 1.27446 15.5 1.55566C15.5 1.83685 15.3876 2.10604 15.1885 2.30371L6.22852 11.1924L6.22754 11.1914C6.12901 11.2892 6.01297 11.3672 5.88477 11.4199C5.75649 11.4727 5.61909 11.5 5.48047 11.5C5.34173 11.5 5.20358 11.4727 5.0752 11.4199C4.94693 11.3671 4.82999 11.2893 4.73145 11.1914V11.1924L0.811523 7.30371C0.61235 7.10608 0.500057 6.83686 0.5 6.55566C0.5 6.27449 0.612432 6.00528 0.811523 5.80762C1.01067 5.61006 1.28063 5.5 1.56055 5.5C1.84037 5.50007 2.10951 5.61012 2.30859 5.80762L5.47949 8.9541L13.6914 0.807617C13.8905 0.61019 14.1597 0.500069 14.4395 0.5Z' fill='black' stroke='black'/%3E%3C/svg%3E");
	--indeterminate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Crect x='0.5' y='5' width='15' height='2' rx='1' fill='black' stroke='black'/%3E%3C/svg%3E");

	--content-left-offset: 0;

	position: fixed;
	inset: 0;
	margin: auto;
	display: flex;
	justify-content: space-between;
	flex-direction: var(--cookiebanner-dir);
	gap: var(--gap-md);

	max-height: 100vh;
	height: var(--cookiebanner-height);

	width: 100%;
	max-width: var(--cookiebanner-max-width);
	padding: var(--cookiebanner-padding);

	border: 1px solid var(--color-black);
	border-radius: var(--radius-4xl);
	background: transparent;
	color: inherit;

	pointer-events: all;
	overflow: hidden;

	&::backdrop {
		background: rgba(0, 0, 0, 0.5);
	}

	&:after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--background-neutral);
		z-index: -3;
	}

	&:not([open]) {
		display: none;
	}

	.cookiebanner-setting-input {
		position: relative;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--gap-md);
		padding: var(--cookiebanner-input-padding);

		[type="checkbox"] {
			margin: 4px;
			width: var(--checkbox-size);
			height: var(--checkbox-size);
			accent-color: var(--color-white);
			cursor: pointer;
			opacity: 0;
		}

		label {
			display: flex;
			width: calc(100% - calc(var(--checkbox-size) + var(--size-8)));
			align-items: center;
			cursor: pointer;
			font-weight: var(--font-weight-bold);
			font-size: var(--font-size-small);
		}

		[type="checkbox"] + label {
			&:before {
				content: "";
				position: absolute;
				left: 4px;
				width: var(--checkbox-size);
				height: var(--checkbox-size);
				border: 1px solid var(--color-dark);
				border-radius: 4px;
				z-index: 100;
			}
		}

		[type="checkbox"]:checked + label,
		[data-child-checked][data-cookie-parent]:not(:checked) + label {
			&:after {
				content: "";
				position: absolute;
				left: 4px;
				width: var(--checkbox-size);
				height: var(--checkbox-size);
				background-color: var(--checkmark-color);
				-webkit-mask: var(--checkmark-icon) center / 60% auto no-repeat;
				mask: var(--checkmark-icon) center / 60% auto no-repeat;
				z-index: 101;
			}
		}

		[data-child-checked][data-cookie-parent]:not(:checked) + label:after {
			-webkit-mask-image: var(--indeterminate-icon);
			mask-image: var(--indeterminate-icon);
		}

		[type="checkbox"]:disabled + label:before {
			background: var(--background-disabled);
			border: 1px solid var(--background-disabled);
		}

		[type="checkbox"]:disabled:checked + label:after {
			--checkmark-color: var(--icon-primary-inverse);
		}

		[type="checkbox"]:focus-visible + label:before {
			outline: 2px solid var(--color-black);
			outline-offset: 2px;
		}

		p {
			font-size: var(--font-size-small);
		}

		p.level-1 {
			margin-left: var(--content-left-offset);
		}
	}

	.cookiebanner-settings-content {
		--gradient-height: var(--size-8);
		position: relative;
		overflow-y: scroll;
		flex-shrink: 1;

		margin-bottom: var(--gradient-height);

		&:after {
			content: "";
			position: sticky;
			display: block;
			bottom: 0;
			left: 0;
			width: 100%;
			height: var(--gradient-height);
			background: linear-gradient(
				0deg,
				var(--color-white) 10%,
				transparent
			);
			pointer-events: none;
			z-index: 9999;
		}
	}

	.cookiebanner-settings-buttons {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		flex-direction: var(--cookiebanner-buttons-dir);
		flex-shrink: 0;

		gap: var(--cookiebanner-gap);

		.btn {
			width: 100%;
		}
	}

	.accordion-item {
		margin-left: var(--content-left-offset);
		.container {
			max-width: 100%;
		}
	}

	.accordion-title {
		font-size: var(--font-size-small);
	}

	@media (min-width: 320px) {
		--cookiebanner-height: 540px;
	}

	@media (min-width: 768px) {
		--cookiebanner-height: 394px;
		--cookiebanner-max-width: 685px;

		--cookiebanner-buttons-dir: row;
		--cookiebanner-gap: var(--gap-md);
		--font-size-label: var(--fs-base);
		--checkbox-size: var(--size-7);

		.cookiebanner-settings-buttons {
			justify-content: space-between;
		}
	}

	@media (min-width: 1280px) {
		--cookiebanner-height: 557px;
		--cookiebanner-max-width: 820px;

		--cookiebanner-buttons-dir: row;
		--cookiebanner-padding: var(--padding-md);
		--cookiebanner-input-padding: var(--padding-md) 0;

		--content-left-offset: 52px;

		.cookiebanner-setting-input label,
		.accordion-title {
			font-size: var(--fs-base);
		}
	}
}