.msc-consent-banner {
	--msc-consent-surface: var(--theme-palette-color-1, var(--wp--preset--color--contrast, #1d2327));
	--msc-consent-text: var(--theme-palette-color-8, var(--wp--preset--color--base, #f0f0f1));
	--msc-consent-accent: var(--theme-button-background-initial-color, var(--wp--preset--color--primary, var(--wc-primary, #2f455d)));
	--msc-consent-accent-hover: var(--theme-button-background-hover-color, color-mix(in srgb, var(--msc-consent-accent) 86%, #000));
	--msc-consent-accent-text: var(--theme-button-text-initial-color, var(--wp--preset--color--base, #fff));
	--msc-consent-reject-border: var(--theme-border-color, color-mix(in srgb, var(--msc-consent-text) 30%, var(--msc-consent-surface)));
	--msc-consent-reject-hover: color-mix(in srgb, var(--msc-consent-text) 12%, transparent);
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	background: var(--msc-consent-surface);
	color: var(--msc-consent-text);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, .2);
	font-size: 14px;
	line-height: 1.5;
}

.msc-consent-banner__text {
	margin: 0;
	flex: 1 1 320px;
}

.msc-consent-banner__actions {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

.msc-consent-banner__actions button {
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 8px 16px;
	font-size: 14px;
}

.msc-consent-banner__accept {
	background: var(--msc-consent-accent);
	color: var(--msc-consent-accent-text);
}

.msc-consent-banner__accept:hover {
	background: var(--msc-consent-accent-hover);
}

.msc-consent-banner__reject {
	background: transparent;
	color: var(--msc-consent-text);
	border-color: var(--msc-consent-reject-border);
}

.msc-consent-banner__reject:hover {
	background: var(--msc-consent-reject-hover);
}

@media (max-width: 600px) {
	.msc-consent-banner {
		flex-direction: column;
		align-items: stretch;
	}

	.msc-consent-banner__actions {
		justify-content: flex-end;
	}
}