/* Cookie Banner Styles */
html.cookie-modal-open {
	overflow: hidden;
}

.cookiebanner-container {
	/* setting and modal/overlay */
	--max-text-width: 100%;
	--cookiebanner-padding: var(--padding-xs) var(--padding-xs);
	--cookiebanner-dir: column;
	--cookiebanner-buttons-dir: column;
	--cookiebanner-buttons-dir: column;
	--accordion-border-color: var(--color-dark);
	--accordion-item-padding-y: var(--padding-xs);
	--accordion-item-padding-x: var(--size-1);

	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	pointer-events: none;

	z-index: 103;

	h4 {
		font-weight: var(--font-weight-bold);
	}

	.close {
		position: absolute;
		top: var(--padding-xs);
		right: var(--padding-2xs);
		min-width: var(--size-8);
		height: var(--size-8);
		width: var(--size-8);

		padding: var(--padding-3xs);

		cursor: pointer;

		svg {
			width: var(--size-6);
			height: var(--size-6);
			transform: rotate(45deg);
			transition: all 0.3s ease-in-out;
		}
		&:after,
		&:before {
			content: none;
		}

		&:hover {
			svg {
				transform: rotate(225deg);
			}
		}

		&:focus-visible {
			outline-width: 1px;
		}
	}

	/* Settings banner only*/
	.cookiebanner {
		position: fixed;
		bottom: calc(var(--padding-xs) * 2 + 58px); /*58 mobile nav height*/

		display: flex;
		justify-content: space-between;
		flex-direction: var(--cookiebanner-dir);
		gap: var(--gap-md);

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

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

		pointer-events: all;
		overflow: hidden;

		z-index: 199;

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

		&[aria-expanded="false"] {
			display: none;
		}

		@media (min-width: 1200px) {
			bottom: 0;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			border-bottom: none;
		}
	}

	.cookiebanner-content {
		width: 100%;
		max-width: var(--max-text-width);

		h2 {
			font-size: var(--font-size-base);
			font-weight: var(--font-weight-bold);
			margin-bottom: var(--gap-md);
		}

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

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

		gap: var(--gap-md);

		.btn {
			width: 100%;
			font-size: var(--font-size-small);
			cursor: pointer;
			padding: var(--padding-2xs) var(--padding-md);
		}

		@media (min-width: 1280px) {
			max-width: var(--size-96);
		}
	}

	@media (min-width: 768px) {
		--max-text-width: 100%;
		--cookiebanner-buttons-dir: row;
	}

	@media (min-width: 1280px) {
		--cookiebanner-padding: var(--padding-md) var(--size-36);
		--max-text-width: 652px;
		--cookiebanner-dir: row;
		--cookiebanner-buttons-dir: column;

		.close {
			top: var(--size-6);
			right: var(--size-6);
		}
	}
}