@use "sass:math";

@include body-class(true) {

	.sui-notice {
		margin: 0 0 $sui-gutter;

		.sui-notice-content {
			display: flex;
			align-items: flex-start;
			margin: 0;
			padding: #{math.div($sui-gutter-md, 2) + 1px} $sui-gutter-md;
			border: 0;
			border-radius: $border-radius;
			background-color: $white;
			box-shadow: inset 2px 0 0 0 palette(silver, medium), inset 0 0 0 1px palette(silver, soft);

			p {
				margin: 0 0 math.div($sui-gutter-md, 2);
				padding: 0;
				border: 0;
				color: palette(gray, dark);
				font-size: 13px;
				line-height: 22px;

				&:last-child {
					margin-bottom: 0;
				}
			}

			.sui-notice-icon {
				width: 30px;
				display: block;
				color: palette(gray, light);
				text-align: center;

				&:before {
					display: block;
					color: inherit;
				}

				~ *:not(.sui-notice-icon) {
					padding-left: #{$sui-gutter - 4px};
				}
			}

			.sui-notice-message {
				flex: 1;
				position: relative;
				padding: 5px 0 3px;

				.sui-notice-icon {
					position: absolute;
					top: 8px;
					left: -7px;

					&.sui-sm {
						top: 9px;
					}

					&.sui-md {
						top: 7px;
					}

					&.sui-lg {
						top: 5px;
					}
				}

				+ .sui-notice-actions {
					flex: 0 0 auto;
					margin-right: -#{math.div($sui-gutter-md, 2) - 1px};
					margin-left: math.div($sui-gutter-md, 2);
				}
			}
		}

		&[role="alert"],
		&[aria-live="assertive"] {
			display: none;
		}

		&.sui-notice-blue,
		&.sui-notice-info {

			.sui-notice-content {
				box-shadow: inset 2px 0 0 0 $blue, inset 0 0 0 1px palette(silver, soft);

				.sui-notice-icon {
					color: $blue;
				}
			}
		}

		&.sui-notice-green,
		&.sui-notice-success {

			.sui-notice-content {
				box-shadow: inset 2px 0 0 0 $green, inset 0 0 0 1px palette(silver, soft);

				.sui-notice-icon {
					color: $green;
				}
			}
		}

		&.sui-notice-yellow,
		&.sui-notice-warning {

			.sui-notice-content {
				box-shadow: inset 2px 0 0 0 palette(yellow, default), inset 0 0 0 1px palette(silver, soft);

				.sui-notice-icon {
					color: palette(yellow, default);
				}
			}
		}

		&.sui-notice-red,
		&.sui-notice-error {

			.sui-notice-content {
				box-shadow: inset 2px 0 0 0 $red, inset 0 0 0 1px palette(silver, soft);

				.sui-notice-icon {
					color: $red;
				}
			}
		}

		&.sui-notice-purple,
		&.sui-notice-upsell {

			.sui-notice-content {
				box-shadow: inset 2px 0 0 0 palette(purple, default), inset 0 0 0 1px palette(silver, soft);

				.sui-notice-icon {
					color: palette(purple, default);
				}
			}
		}

		&:last-child {
			margin: 0;
		}
	}

	.sui-floating-notices {
		pointer-events: none;
		position: fixed;
		z-index: 99999;
		top: 0;
		right: 0;
		bottom: 0;
		padding: math.div($sui-gutter-md, 2);

		.sui-notice {
			width: 100%;
			max-width: 600px;
			pointer-events: initial;
			z-index: 1;
			margin: 0 auto math.div($sui-gutter-md, 2);

			.sui-notice-content {
				box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15), inset 2px 0 0 0 palette(silver, medium);
			}

			&.sui-notice-blue,
			&.sui-notice-info {

				.sui-notice-content {
					box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15), inset 2px 0 0 0 $blue;
				}
			}

			&.sui-notice-green,
			&.sui-notice-success {

				.sui-notice-content {
					box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15), inset 2px 0 0 0 $green;
				}
			}

			&.sui-notice-yellow,
			&.sui-notice-warning {

				.sui-notice-content {
					box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15), inset 2px 0 0 0 palette(yellow, default);
				}
			}

			&.sui-notice-red,
			&.sui-notice-error {

				.sui-notice-content {
					box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15), inset 2px 0 0 0 $red;
				}
			}

			&.sui-notice-purple,
			&.sui-notice-upsell {

				.sui-notice-content {
					box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15), inset 2px 0 0 0 palette(purple, default);
				}
			}

			&:last-child {
				margin-bottom: 0;
			}

			@media only screen and (max-width: 640px) {
				max-width: 100%;
			}
		}
	}

	// VARIATION: Color Accessibility.
	&.sui-color-accessible {

		.sui-notice {

			.sui-notice-content {
				box-shadow: inset 2px 0 0 0 $black, inset 0 0 0 1px palette(silver, soft);

				p {
					color: $black;
				}
			}

			&.sui-notice-blue,
			&.sui-notice-info,
			&.sui-notice-green,
			&.sui-notice-success,
			&.sui-notice-yellow,
			&.sui-notice-warning,
			&.sui-notice-red,
			&.sui-notice-error,
			&.sui-notice-purple,
			&.sui-notice-upsell {

				.sui-notice-content {
					box-shadow: inset 2px 0 0 0 $black, inset 0 0 0 1px palette(silver, soft);
				}
			}
		}

		.sui-floating-notices {

			.sui-notice {

				.sui-notice-content {
					box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15), inset 2px 0 0 0 $black;
				}

				&.sui-notice-blue,
				&.sui-notice-info,
				&.sui-notice-green,
				&.sui-notice-success,
				&.sui-notice-yellow,
				&.sui-notice-warning,
				&.sui-notice-red,
				&.sui-notice-error,
				&.sui-notice-purple,
				&.sui-notice-upsell {

					.sui-notice-content {
						box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15), inset 2px 0 0 0 $black;
					}
				}
			}
		}
	}
}

// RTL Support.
@include body-class(true, true) {

	.sui-notice {
		direction: rtl;

		.sui-notice-content {
			flex-direction: row;
			box-shadow: inset -2px 0 0 0 palette(silver, medium), inset 0 0 0 1px palette(silver, soft);

			p {
				padding-right: #{$sui-gutter - 4px};
				padding-left: 0;
			}

			.sui-notice-message {

				.sui-notice-icon {
					left: auto;
					right: -7px;
				}

				+ .sui-notice-actions {
					margin-right: math.div($sui-gutter-md, 2);
					margin-left: -#{math.div($sui-gutter-md, 2) - 1px};
				}
			}
		}

		&.sui-notice-blue,
		&.sui-notice-info {

			.sui-notice-content {
				box-shadow: inset -2px 0 0 0 $blue, inset 0 0 0 1px palette(silver, soft);
			}
		}

		&.sui-notice-green,
		&.sui-notice-success {

			.sui-notice-content {
				box-shadow: inset -2px 0 0 0 $green, inset 0 0 0 1px palette(silver, soft);
			}
		}

		&.sui-notice-yellow,
		&.sui-notice-warning {

			.sui-notice-content {
				box-shadow: inset -2px 0 0 0 palette(yellow, default), inset 0 0 0 1px palette(silver, soft);
			}
		}

		&.sui-notice-red,
		&.sui-notice-error {

			.sui-notice-content {
				box-shadow: inset -2px 0 0 0 $red, inset 0 0 0 1px palette(silver, soft);
			}
		}

		&.sui-notice-purple,
		&.sui-notice-upsell {

			.sui-notice-content {
				box-shadow: inset -2px 0 0 0 palette(purple, default), inset 0 0 0 1px palette(silver, soft);
			}
		}
	}

	.sui-floating-notices {

		.sui-notice {

			.sui-notice-content {
				box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15), inset -2px 0 0 0 palette(silver, medium);
			}

			&.sui-notice-blue,
			&.sui-notice-info {

				.sui-notice-content {
					box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15), inset -2px 0 0 0 $blue;
				}
			}

			&.sui-notice-green,
			&.sui-notice-success {

				.sui-notice-content {
					box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15), inset -2px 0 0 0 $green;
				}
			}

			&.sui-notice-yellow,
			&.sui-notice-warning {

				.sui-notice-content {
					box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15), inset -2px 0 0 0 palette(yellow, default);
				}
			}

			&.sui-notice-red,
			&.sui-notice-error {

				.sui-notice-content {
					box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15), inset -2px 0 0 0 $red;
				}
			}

			&.sui-notice-purple,
			&.sui-notice-upsell {

				.sui-notice-content {
					box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15), inset -2px 0 0 0 palette(purple, default);
				}
			}
		}
	}

	// VARIATION: Color Accessibility.
	&.sui-color-accessible {

		.sui-notice {

			.sui-notice-content {
				box-shadow: inset -2px 0 0 0 $black, inset 0 0 0 1px palette(silver, soft);

				p {
					color: $black;
				}
			}

			&.sui-notice-blue,
			&.sui-notice-info,
			&.sui-notice-green,
			&.sui-notice-success,
			&.sui-notice-yellow,
			&.sui-notice-warning,
			&.sui-notice-red,
			&.sui-notice-error,
			&.sui-notice-purple,
			&.sui-notice-upsell {

				.sui-notice-content {
					box-shadow: inset -2px 0 0 0 $black, inset 0 0 0 1px palette(silver, soft);
				}
			}
		}

		.sui-floating-notices {

			.sui-notice {

				.sui-notice-content {
					box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15), inset -2px 0 0 0 $black;
				}

				&.sui-notice-blue,
				&.sui-notice-info,
				&.sui-notice-green,
				&.sui-notice-success,
				&.sui-notice-yellow,
				&.sui-notice-warning,
				&.sui-notice-red,
				&.sui-notice-error,
				&.sui-notice-purple,
				&.sui-notice-upsell {

					.sui-notice-content {
						box-shadow: 0 5px 25px 0 rgba(0,0,0,0.15), inset -2px 0 0 0 $black;
					}
				}
			}
		}
	}
}

// WordPress Support.
@include body-class {

	&.wp-admin {

		.sui-floating-notices {
			left: map-get($wordpress, adminmenu);
		}

		// Folded sidebar.
		&.folded {

			.sui-floating-notices {
				left: map-get($wordpress, adminmenu-sm);
			}
		}

		// Auto-folded sidebar.
		&.auto-fold {

			.sui-floating-notices {

				@media only screen and (max-width: 960px) {
					left: map-get($wordpress, adminmenu-sm);
				}

				@media only screen and (max-width: 782px) {
					left: 0;
				}
			}
		}
	}
}