// COMPONENT : Notifications

@mixin mini-notification($color) {
	color: $color;
	svg.icon {
		@include svg-icon;
		fill: $color;
	}
}
@mixin notification($color) {
	color: $color;

	// give light gray background for info notification
	background: if($color != $soft-black, $white, $grey-1);

	box-shadow: inset 3.5em 0 0 2px $color, inset 0 0 0 2px $color;

	> svg.icon {
		@include svg-icon;
		fill: $white;
	}

	.close {
		// Needed for IE10
		display: block;

		svg.icon {
			@include svg-icon;
			fill: $text-color;
		}
	}
}

uniform-notification,
.uniform-notification,
edlio-notification,
.edlio-notification {
	@extend %flexbox;
	@include align-items(center);

	border-radius: $default-border-radius;

	color: $white;

	&.mini {
		display: inline-block;
	}

	&.info:not(.mini) {
		@include notification($info-notification-color);
	}
	&.info.mini {
		@include mini-notification($info-notification-color);
	}

	&.alert:not(.mini) {
		@include notification($alert-notification-color);
	}
	&.alert.mini {
		@include mini-notification($alert-notification-color);
	}

	&.confirmation:not(.mini) {
		@include notification($confirmation-notification-color);
	}
	&.confirmation.mini {
		@include mini-notification($confirmation-notification-color);
	}

	.message {
		margin: 0 1em;
		padding: 0 0 0 1em;
	}
	&.mini .message {
		margin: 0 1em;
		padding: 0;
	}

	&:not(.mini) .message {
		@include flex(1);

		text-align: center;

		h1,
		h3 {
			@include font-size(normal);
			font-weight: $bold;
			margin: 0.5em 0;
		}

		p {
			margin-bottom: 0.5em;

			color: $notification-secondary-text-color;
		}

		.disclaimer {
			@include font-size(small);
		}
	}

	.close {
		@include align-self(flex-start);

		padding: 0;
		cursor: pointer;

		.icon {
			border-radius: $default-border-radius;
		}
	}
}

// Badge --------------------------------------------------------------------------
uniform-badge {
	@include font-size(small);
	background-color: $grey-2;
	color: $dark-grey;
	padding: 0.3em 0.5em;
	margin: 0 0.5em;

	&.badge-info {
		background-color: $grey-2;
		color: $dark-grey;
	}

	&.badge-alert {
		background-color: $orange;
		color: $white;
	}

	&.badge-success {
		background-color: $green;
		color: $white;
	}
}