/* ============================================================
   Cookie policy overlay - bottom bar, bottom-left modal, center modal
   ============================================================ */

.cookie-policy-overlay {
	&.drawer--bottom,
	.modal__content {
		background-color: color-mix(
			in var(--mp-color-space),
			transparent,
			var(--mp-cookie-bar-bg-color, var(--mp-body-bg-color))
				calc(var(--mp-cookie-bar-bg-color-opacity, 1) * 100%)
		);
	}

	&.drawer--bottom {
		border-block-width: var(--mp-cookie-bar-border-width, var(--mp-border-width)) 0;
		border-color: var(--mp-cookie-bar-border-color, transparent);
		border-inline-width: 0;
		border-radius: 0;
		border-style: solid;
		box-shadow: var(
			--mp-cookie-bar-box-shadow,
			0 0 15px var(--mp-box-shadow-color),
			0 0 6px var(--mp-box-shadow-color)
		);
		height: auto;

		.drawer__body {
			margin-inline: 0;
			max-width: none;
			width: 100%;
		}
	}

	&.drawer--bottom .drawer__body,
	.modal__dialog:is(
			.modal__dialog--bottom-left,
			.modal__dialog--bottom-right,
			.modal__dialog--centered
		)
		.modal__body {
		padding-block: var(--mp-cookie-bar-modal-padding-block, calc(var(--mp-gap) * 1.5));
		padding-inline: var(--mp-cookie-bar-modal-padding-inline, calc(var(--mp-gap) * 1.5));
	}

	.modal__content {
		border: var(--mp-cookie-bar-border-width, var(--mp-border-width)) solid
			var(--mp-cookie-bar-border-color, transparent);
		border-radius: var(--mp-cookie-bar-border-radius, var(--mp-border-radius));
		box-shadow: var(
			--mp-cookie-bar-box-shadow,
			0 0 15px var(--mp-box-shadow-color),
			0 0 6px var(--mp-box-shadow-color)
		);
	}

	.modal__header--transparent {
		display: none;
	}

	:is(.modal__dialog--bottom-left, .modal__dialog--bottom-right) {
		--mp-modal-width: var(--mp-cookie-bar-side-modal-width);
	}

	.modal__dialog--centered {
		--mp-modal-width: var(--mp-modal-width-lg);

		.cookie-policy-overlay__preferences--desktop {
			display: none;
		}

		.cookie-policy-overlay__preferences--mobile {
			display: inline-flex;
			justify-content: center;
			margin-block-end: calc(
				var(--mp-cookie-bar-gap, calc(var(--mp-gap) * 1.25)) *
				-0.25
			);
			margin-inline: auto;
		}

		.modal__body {
			align-items: stretch;
			display: flex;
			flex-direction: column;
			gap: var(--mp-cookie-bar-gap, calc(var(--mp-gap) * 1.25));
			text-align: start;

			@media (width < 576px) {
				padding-block: var(
					--mp-cookie-bar-center-modal-mobile-padding-block,
					var(--mp-spacer-150)
				);
				padding-inline: var(
					--mp-cookie-bar-center-modal-mobile-padding-inline,
					var(--mp-spacer-125)
				);
			}
		}

		.cookie-policy-overlay__actions {
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			width: 100%;

			& > .btn:not(.btn-link) {
				flex: 1 1 calc(50% - var(--mp-cookie-bar-gap, calc(var(--mp-gap) * 1.25)) * 0.25);
				min-width: 0;
			}

			@media (width < 576px) {
				flex-direction: column;
				flex-wrap: nowrap;

				& > .btn:not(.btn-link) {
					flex: none;
					white-space: normal;
				}
			}
		}

		@media (width < 992px) {
			margin-inline: var(
				--mp-cookie-bar-center-modal-mobile-margin,
				var(--mp-spacer-125)
			);
			max-width: calc(
				100dvw -
				var(--mp-cookie-bar-center-modal-mobile-margin, var(--mp-spacer-125)) *
				2
			);
		}
	}

	&.drawer--bottom .drawer__body,
	:is(.modal__dialog--bottom-left, .modal__dialog--bottom-right) .modal__body {
		align-items: center;
		display: flex;
		flex-direction: row;
		gap: var(--mp-cookie-bar-gap, calc(var(--mp-gap) * 1.25));
		justify-content: space-between;

		@media (width < 576px) {
			flex-direction: column;
		}
	}
}

.cookie-policy-overlay__content {
	color: var(--mp-cookie-bar-color);
	flex: 1 1 auto;
	font-size: var(--mp-cookie-bar-font-size, var(--mp-font-size-small));
	min-width: 0;

	a {
		color: inherit;
	}
}

.cookie-policy-overlay__title {
	color: var(--mp-cookie-bar-title-color, var(--mp-body-color));
	font-size: var(--mp-cookie-bar-title-font-size, var(--mp-font-size-biggest));
	margin-block-end: calc(var(--mp-cookie-bar-gap, calc(var(--mp-gap) * 1.25)) * 0.5);
}

.cookie-policy-overlay__actions {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: calc(var(--mp-cookie-bar-gap, calc(var(--mp-gap) * 1.25)) * 0.5);

	& > .btn:not(.btn-link) {
		--mp-btn-padding-block: var(--mp-cookie-bar-btn-padding-block);
		--mp-btn-padding-inline: var(--mp-cookie-bar-btn-padding-inline);
		min-width: var(--mp-cookie-bar-btn-min-width, calc(var(--mp-spacer) * 14));
		white-space: nowrap;
	}

	.drawer--bottom & > .btn:not(.btn-link) {
		--mp-btn-padding-block: calc(var(--mp-cookie-bar-btn-padding-block) * 0.5);
		--mp-btn-padding-inline: calc(var(--mp-cookie-bar-btn-padding-inline) * 0.5);
	}

	@media (width < 576px) {
		width: 100%;

		& > .btn:not(.btn-link) {
			min-width: 0;
			width: 100%;
		}
	}
}

.cookie-policy-overlay__preferences.btn-link {
	align-self: start;
}

.cookie-policy-overlay__preferences--desktop {
	display: flex;
	margin-block-end: calc(var(--mp-cookie-bar-gap, calc(var(--mp-gap) * 1.25)) * -0.25);
	margin-block-start: calc(var(--mp-cookie-bar-gap, calc(var(--mp-gap) * 1.25)) * 0.25);
	margin-inline-start: calc(var(--mp-btn-padding-inline) * -1);

	@media (width < 576px) {
		display: none;
	}
}

.cookie-policy-overlay__preferences--mobile {
	display: none;

	@media (width < 576px) {
		align-self: center;
		display: inline-flex;
		margin-inline: auto;
	}
}

:is(.drawer-backdrop, .modal-backdrop).cookie-policy-block {
	--mp-drawer-backdrop-opacity: var(--mp-cookie-bar-backdrop-opacity);
	--mp-modal-backdrop-opacity: var(--mp-cookie-bar-backdrop-opacity);
	background-color: var(--mp-modal-backdrop-bg-color);
}

/* Cookie settings modal (privacy preferences) */
.cookie-policy-modal {
	.modal__body {
		padding-block-end: calc(var(--mp-modal-body-padding) * 2);
	}

	.cookie-settings__buttons {
		display: inherit;
		gap: inherit;
	}
}