// Base cookie message styles
@mixin _oCookieMessageBase() {
	// These are passed into oTypography which hasn't been migrated as it will be part of o-private-foundation soon.
	// Make sure to update these colours to new ones when it is.
	$link-theme: (
		'base': 'teal',
		'hover': 'teal',
		'context': 'white',
	);

	.o-cookie-message {
		position: fixed;
		bottom: 0;
		left: 0;
		display: block;
		width: 100%;
		margin: 0;

		@include oPrivateGridRespondTo(S) {
			width: oPrivateGridColspan(7);
			margin: div($_o-cookie-message-spacing, 2);
		}

		@include oPrivateGridRespondTo(M) {
			width: oPrivateGridColspan(6);
		}

		@include oPrivateGridRespondTo(L) {
			width: oPrivateGridColspan(5);
		}

		@include oPrivateGridRespondTo(XL) {
			width: div(map-get($o-pf-grid-layouts, XL), 2.5); // width is 40% grid
			left: calc(
				(100vw - #{map-get($o-pf-grid-layouts, XL)}) / 2
			); // ((viewport - grid width) / 2)
		}
	}

	.o-cookie-message--active {
		display: block;
	}

	.o-cookie-message--closed {
		display: none;
	}

	.o-cookie-message__outer {
		@include oPrivateVisualEffectsShadowContent('high');
		background: oPrivateFoundationGet('o3-color-palette-white');
		color: oPrivateFoundationGet('o3-color-palette-black');
	}

	.o-cookie-message__inner {
		@include oPrivateVisualEffectsShadowContent('high');
		@include oPrivateTypographySans($scale: 0);
		// sass-lint:disable no-vendor-prefixes
		-webkit-font-smoothing: antialiased;
		// sass-lint:enable no-vendor-prefixes
		position: relative;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		box-sizing: border-box;
		background: white;
		display: block;
		padding: $_o-cookie-message-spacing;
		padding-top: oPrivateSpacingByIncrement(7);
		max-width: none;
		max-height: 50vh;
		overflow-y: auto;
	}

	.o-cookie-message__content {
		padding: 0;

		p {
			margin-top: 0;
			margin-bottom: 0;
		}

		// Styling h1 elements within cookie message content
		// is redundant but may be relied upon by users who
		// have chosen to use custom markup.
		// @breaking - remove `.o-cookie-message__content h1` styles
		h1 {
			@include oPrivateTypographySans($scale: 0);
		}
	}

	.o-cookie-message__heading {
		padding-right: $_o-cookie-message-spacing;

		&:after {
			content: '';
			display: block;
			width: 60px;
			margin-top: oPrivateSpacingByName('s2');
			margin-bottom: oPrivateSpacingByName('s3');
			border-bottom: oPrivateSpacingByIncrement(1) solid;
			border-color: oPrivateFoundationGet('o3-color-palette-teal');
		}
	}

	// default headings used to include a h1,
	// so style for backward compatibility for users with custom cookie message markup
	.o-cookie-message__heading,
	.o-cookie-message__heading h1,
	.o-cookie-message__heading h2 {
		@include oPrivateTypographySans($scale: 2, $weight: 'semibold');
		@include oPrivateGridRespondTo($until: M) {
			@include oPrivateTypographySans($scale: 3, $weight: 'semibold');
		}
		margin: 0;
	}

	.o-cookie-message__actions {
		@include oPrivateTypographySans($scale: 2);
		display: flex;
		align-items: center;
		margin-top: oPrivateSpacingByName('s6');
		justify-content: space-between;

		@include oPrivateGridRespondTo($until: M) {
			flex-direction: column;
			align-items: flex-start;
			margin-top: 0;
			.o-cookie-message__action {
				align-self: stretch;

				.o-cookie-message__button {
					width: 100%;
					margin-top: oPrivateSpacingByName('s6');
				}
			}
		}
	}

	.o-cookie-message__action--secondary {
		order: -1;
		@include oPrivateGridRespondTo($until: M) {
			margin-top: div($_o-cookie-message-spacing, 4);
		}
	}

	.o-cookie-message__action {
		padding: 0;
	}

	.o-cookie-message__button {
		@include oPrivateButtonsContent(
			$opts: (
				'type': 'primary',
				'size': 'big',
			)
		);
		white-space: nowrap;
	}

	.o-cookie-message__link {
		@include oPrivateTypographySans($scale: 0);
		@include oPrivateTypographyLink();
		@include oPrivateTypographyLinkThemeOverride($theme: $link-theme);
		white-space: nowrap;
	}
}

// Alternative cookie message styles (for whitelabel/specialist titles)
@mixin _oCookieMessageAlternative() {
	$link-theme: (
		'base': 'black',
		'hover': 'black',
		'context': 'white',
	);

	.o-cookie-message.o-cookie-message--alternative {
		.o-cookie-message__button {
			@include oPrivateButtonsContentWithThemeOverride(
				$opts: (
					'type': 'primary',
					'size': 'big',
				),
				$theme-override: (
					'color': oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', 89),
					'context': 'o3-color-palette-white',
				)
			);
		}

		.o-cookie-message__heading:after {
			border-color: oPrivateFoundationGet('o3-color-palette-jade');
		}

		.o-cookie-message__link {
			@include oPrivateTypographyLink();
			@include oPrivateTypographyLinkThemeOverride($theme: $link-theme);
		}
	}
}