@import "@financial-times/o-private-foundation/main";

$n-notification-is-silent: true !default;

@mixin nNotification {
	@include oPrivateFoundation();

	@keyframes load-notice {
		0% {
			max-height: 0;
		}
		100% {
			max-height: 200px;
		}
	}

	.n-notification {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
	}

	.n-notification__item {
		position: relative;
		background-color: rgba(oPrivateFoundationGet('o3-color-palette-paper'), 0.95);
		border-bottom: 3px solid oPrivateFoundationGet('o3-color-palette-black-80');
		color: oPrivateFoundationGet('o3-color-palette-black-80');
		box-sizing: border-box;
		margin: 0;
		padding: 14px 0;
		overflow: hidden;
		animation: load-notice 200ms forwards;
	}

	.n-notification__content-wrapper {
		margin: 0 auto;
		width: 100%;
		position: relative;
		text-align: center;
		padding: 0 30px;
		box-sizing: border-box;
	}

	.n-notification__title {
		@include oPrivateTypographySans($scale: 2, $weight: 'semibold');
		display: inline-block;
		padding-right: 10px;
		margin: 0;
	}

	.n-notification__content {
		@include oPrivateTypographySans($scale: 2);
		display: inline-block;
		margin: 0;

		b,
		strong {
			@include oPrivateTypographySans($scale: 2, $weight: 'semibold');
		}

		a {
			color: oPrivateFoundationGet('o3-color-palette-black-80');
			border-bottom-color: oPrivateFoundationGet('o3-color-palette-black-80');
		}
	}

	.n-notification--error {
		background-color: oPrivateColorsMix('o3-color-palette-crimson', $percentage: 10);
		color: oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-crimson', $percentage: 12.5);

		.n-notification__content a {
			color: oPrivateFoundationGet('o3-color-palette-white');
		}

		.n-notification__close {
			@include oPrivateIconsContent(
					'cross',
					oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-crimson', $percentage: 12.5),
					40,
				$include-base-styles: false
			);
		}
	}

	.n-notification--success {
		background-color: oPrivateColorsMix('o3-color-palette-jade', $percentage: 20);
		color: oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-jade', $percentage: 43);

		.n-notification__content a {
			color: oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-jade', $percentage: 43);
		}

		.n-notification__close {
			@include oPrivateIconsContent(
					'cross',
					oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-jade', $percentage: 43),
					40,
					$include-base-styles: false
			);
			position: absolute;
			right: 0;
			top: 0;
			border: 0;
			cursor: pointer;
			background-size: 20px;
			background-position: 50%;
			margin-top: 5px;
			width: 40px;
			height: 40px;
			text-indent: -999em;
		}
	}

	.n-notification__close {
		@include oPrivateIconsContent('cross', oPrivateFoundationGet('o3-color-palette-black-80'), 40);
		position: absolute;
		right: 0;
		top: 0;
		border: 0;
		cursor: pointer;
		background-size: 20px;
		background-position: 50%;
		margin-top: 5px;
		width: 40px;
		height: 40px;
		text-indent: -999em;
	}
}

@if $n-notification-is-silent == false {
	@include nNotification();

	$n-notification-is-silent: true !global;
}
