@include body-class(true, $widget-prefix) {

	.wpmudui-notice,
	.wpmudui-notice-top {
		p {

			&:first-of-type {
				@include icon( before, info );
	
				&:before {
					position: absolute;
					color: $notice-default-icon-color;
					font-size: 16px;
				}
			}
		}

		// NOTICE info
		&.wpmudui-notice-info {
			border-left: 2px solid $info;

			p:first-of-type {
				
				&:before {
					color: $notice-info-icon-color;
				}
			}
		}

		// NOTICE success
		&.wpmudui-notice-success {
			border-left: 2px solid $success;
			
			p:first-of-type {
				@include icon(before, check-tick, false);
				
				&:before {
					color: $notice-success-icon-color;
				}
			}
		}

		// NOTICE warning
		&.wpmudui-notice-warning {
			border-left: 2px solid $warning;
			
			p:first-of-type {
				@include icon(before, warning-alert, false);

				&:before {
					color: $notice-warning-icon-color;
				}
			}
		}

		// NOTICE error
		&.wpmudui-notice-error {
			border-left: 2px solid $error;

			p:first-of-type {
				@include icon(before, warning-alert, false);

				&:before {
					color: $notice-error-icon-color;
				}
			}
		}
	}

	.wpmudui-notice {
		position: relative;
		display: block;
		margin: 30px 0;
		border: 1px solid #E6E6E6;
		border-left: 2px solid #888;
		border-radius: $border-radius;
		padding: 15px 20px 15px 50px;
		background-color: $notice-default-bg-color;

		p {
			margin: 30px/2 0;
			font: 400 13px/22px $font;
			letter-spacing: -0.25px;

			&:first-child,
			&:first-of-type {
				margin-top: 0;
			}

			&:last-child,
			&:last-of-type {
				margin-bottom: 0;
			}

			&:first-of-type:before {
				top: 18px;
				left: 22px;
			}
		}

		&, p {
			color: palette( gray, dark );

			strong {
				font-weight: 500;
			}
		}

		.wpmudui-notice-dismiss {
			display: block;
			margin: 6px 0 -5px;
			a {
				margin-left: -10px;
				padding: 5px 10px;
				color: palette( gray, light );
				font-size: 12px;
				font-weight: 500;
				text-transform: uppercase;
				text-decoration: none;

				&:hover, &:active {
					color: palette( gray, dark );
				}
			}
		}

		&:first-child {
			margin-top: 0;
		}

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

		&.wpmudui-notice-icon-tick {

			p:first-of-type {
				@include icon(before, check-tick, false);
			}
		}

		.wpmudui-notice-buttons {
			margin-top: 5px;
		}

		&.wpmudui-no-notice-icon {
			padding: 15px 20px;

			p:first-of-type:before {
				content: none;
				margin: 0;
				padding: 0;
			}

			.wpmudui-notice-buttons {
				margin-left: 0;
			}
		}
	}

	.wpmudui-notice-top {
		width: 100%;
		max-width: 600px;
		display: block;
		position: fixed;
		z-index: 99999;
		top: 17px;
		left: 50%;
		margin: 0;
		margin-left: 80px;
		border-radius: $border-radius;
		border-left: 2px solid $notice-default-icon-color;
		padding: 15px 20px 15px 50px;
		background-color: $white;
		box-shadow: rgba(0,0,0,0.15) 0 5px 25px 0;
		transform: translateX(-50%);

		.wpmudui-notice-content {
			position: relative;
		}

		p {
			position: relative;
			margin: 30px/2 10px 30px/2 0;
			color: palette( gray );
			font: 400 13px/22px $font;
			letter-spacing: -0.19px;

			&:first-of-type:before {
				top: 2px;
				left: -28px;
			}

			strong {
				color: palette( gray, dark );
				font-weight: 500;
			}

			&:first-child,
			&:first-of-type {
				margin-top: 0;
			}

			&:last-child,
			&:last-of-type {
				margin-bottom: 0;
			}
		}

		&.wpmudui-can-dismiss {
			display: flex;
			
			.wpmudui-notice-content {
				flex: 1;
				align-self: center;
			}

			.wpmudui-notice-dismiss {
				display: flex;
				flex-direction: column;
				flex: 0 0 60px;
				margin: -#{30px/2} -20px -#{30px/2} 0;
				
				a {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					flex: 1 1 auto;
					border-radius: 0 #{$border-radius} #{$border-radius} 0;
					background-color: palette( silver, light );
					color: palette( gray, light );
					font: 500 11px/13px $font;
					text-transform: uppercase;
					text-align: center;
					transition: 0.3s ease;

					&:before {
						color: palette( gray, light );
						font-size: 13px;
					}

					&:hover, &:active {
						background-color: palette( silver, soft );
					}
				}
			}
		}

		@media (max-width: 782px) {
			width: 90%;
			top: 23px;
			margin-left: 0;
		}
	}

	.wpmudui-notice-floating {
		@extend .wpmudui-notice-top;
		width: auto;
		display: flex;
		padding: 11px 20px 12px 50px;

		p {
			margin: 15px 20px 15px 0;
		}

		.wpmudui-notice-content {
			flex: 1;
			align-self: center;
		}

		.wpmudui-notice-buttons {
			display: flex;
			flex-direction: column;
		}

	}

	&.wp-admin.folded {

		.wpmudui-notice-top {
			margin-left: 18px;

			@media (max-width: 782px) {
				margin-left: 0;
			}
		}
	}
}