/*------------------------------------------------------------------
  [Alerts]
*/

.alert {
	padding: 0;
	position: relative;
	line-height: 25px;
	border-width: 0;
	margin-bottom: 18px;
	color: theme-color("light");

	> .icon {
		width: $alert-icon-width - 5;
		font-size: 1.846rem;
		vertical-align: middle;
		text-align: center;
		line-height: 22px;
		display: table-cell;
		cursor: default;
		padding-top: 1px;

			span {
				width: 25px;
			}
	}

	.close {
		position: absolute;
		font-size: 1.538rem;
		right: $alert-padding-x;
		text-shadow: none;
		padding: ($alert-padding-y + .1538rem) 0;
		opacity: .2;
	}

	.message {
		display: table-cell;
		padding: $alert-padding-y ($alert-padding-x + .7692rem) $alert-padding-y ($alert-padding-x - 1.154rem);
		border-left-width: 0;

		@include phone {
			padding: $alert-padding-y ($alert-padding-x + 1.154rem) $alert-padding-y ($alert-padding-x - 1.154rem);
		}

		// Improve alignment and spacing of inner content
	  > p,
	  > ul {
	    margin-bottom: 0;
	  }

	  > p + p {
	    margin-top: 5px;
	  }
	}
}

.alert-primary {
	@include contrast-alert-variation($alert-primary-bg);
}

.alert-success {
	@include contrast-alert-variation($alert-success-bg);
}

.alert-info {
	@include contrast-alert-variation($alert-info-bg);
}

.alert-warning {
	@include contrast-alert-variation($alert-warning-bg);
}

.alert-danger {
	@include contrast-alert-variation($alert-danger-bg);
}

.alert-light {
	background-color: $alert-light-bg;
	outline: 1px solid $light-bg;
	@include text-color-variation($state-light-text);

	> .icon {
		@include text-color-variation($alert-light-icon-color);
	}

	&.alert-contrast > .icon{
		background-color: $light-bg;
	}
}

.alert-dark {
	@include contrast-alert-variation($alert-dark-bg);
}

.alert-dismissible{

	&.alert-primary{
		@include dismissible-variation($alert-primary-bg)
	}

	&.alert-success{
		@include dismissible-variation($alert-success-bg)
	}

	&.alert-info{
		@include dismissible-variation($alert-info-bg)
	}

	&.alert-warning{
		@include dismissible-variation($alert-warning-bg)
	}

	&.alert-danger{
		@include dismissible-variation($alert-danger-bg)
	}

	&.alert-light{
		.close{
			color: $body-color;
			opacity: 0.35;

			&:hover{
				color: $body-color;
				opacity: 0.5;
			}
		}
	}

	&.alert-dark{
		.close{
			color: $body-color;
			opacity: 0.35;

			&:hover{
				color: $body-color;
				opacity: 0.5;
			}
		}
	}
}

.alert-contrast{
	padding: 0;
	position: relative;

	> .icon{
		display: table-cell;
		width: $alert-icon-width;
		text-align: center;
		vertical-align: middle;
		background-color: rgba(255, 255, 255, 0.08);
	}

	> .message{
		display: table-cell;
		padding: $alert-padding-y $alert-padding-x;
		border-left-width: 0;

		@include phone {
			padding: $alert-padding-y ($alert-padding-x + 1.154rem) $alert-padding-y $alert-padding-x;
		}
	}
}

.alert-icon{
	background-color: theme-color("light");
	border: 0;
	padding: 0;
	position: relative;
	width: 100%;
	display: table;
	table-layout: fixed;
	box-shadow: 0.5px 0.9px 0 rgba(0, 0, 0, 0.07);

	> .icon{
		position: relative;
		display: table-cell;
		width: $alert-icon-width;
		text-align: center;
		vertical-align: middle;
		cursor: default;

		&:after{
			position: absolute;
			right: -10px;
			top: 50%;
			margin-top: -10px;
			@include triangle(right, theme-color("light"), 11px);
		}
	}

	> .message{
		display: table-cell;
		padding: $alert-padding-y $alert-padding-x;
		color: $body-color;
		border: 1px solid darken(theme-color("light"), 17%);
		border-left-width: 0;

		@include phone {
			padding: $alert-padding-y ($alert-padding-x + 1.154rem) $alert-padding-y $alert-padding-x;
		}
	}

	&.alert-dismissible{

		.close, .close:focus{
			color: $body-color;
			opacity: 0.35;

			&:hover{
				color: $body-color;
				opacity: 0.5;
			}
		}
	}

	//Colors
	&.alert-primary{
		@include icon-alert-variation($alert-primary-bg);
	}

	&.alert-success{
		@include icon-alert-variation($alert-success-bg);
	}

	&.alert-info{
		@include icon-alert-variation($alert-info-bg);
	}

	&.alert-warning{
		@include icon-alert-variation($alert-warning-bg);
	}

	&.alert-danger{
		@include icon-alert-variation($alert-danger-bg);
	}

	&.alert-light{
		@include icon-alert-variation($alert-light-bg);
		outline-color: darken(theme-color("light"), 17%);

		> .icon {
			border-right: 1px solid darken(theme-color("light"), 17%);

			&:before {
				position: absolute;
				right: -22px;
				top: 50%;
				margin-top: -10px;
				@include special-light-triangle();
			}
		}

		> .message{
			border: 0px;
		}
	}

	&.alert-dark{
		@include icon-alert-variation($alert-dark-bg);
	}
}

.alert-icon-border{

	&.alert-primary{

		.message{
			border-color: $alert-primary-bg;
		}
	}

	&.alert-success{

		.message{
			border-color: $alert-success-bg;
		}
	}

	&.alert-info{

		.message{
			border-color: $alert-info-bg;
		}
	}

	&.alert-warning{

		.message{
			border-color: $alert-warning-bg;
		}
	}

	&.alert-danger{

		.message{
			border-color: $alert-danger-bg;
		}
	}

	&.alert-light{

		.message{
			border-color: $alert-light-bg;
		}
	}

	&.alert-dark{

		.message{
			border-color: $alert-dark-bg;
		}
	}
}

.alert-icon.alert-icon-colored{
	border: 1px solid darken(theme-color("light"), 17%);
	outline-color: transparent;

	> .icon{
		position: relative;
		background-color: darken(theme-color("light"), 2.8%);
		border-width: 0;

		&:before{
			border: unset;
		}

		&:after{
			border-left-color: darken(theme-color("light"), 2.8%);
			position: absolute;
			right: -11px;
			top: 50%;
			margin-top: -11px;
			@include triangle(right, darken(theme-color("light"), 2.8%), 11px);
		}
	}

	> .message{
		border-width: 0;
	}

	&.alert-primary{
		@include alert-icon-colored($alert-primary-bg);
	}

	&.alert-success{
		@include alert-icon-colored($alert-success-bg);
	}

	&.alert-info{
		@include alert-icon-colored($alert-info-bg);
	}

	&.alert-warning{
		@include alert-icon-colored($alert-warning-bg);
	}

	&.alert-danger{
		@include alert-icon-colored($alert-danger-bg);
	}

	&.alert-light{
		@include alert-icon-colored($alert-dark-bg);
	}

	&.alert-dark{
		@include alert-icon-colored($alert-light-icon-color);
	}
}

.alert-simple{

	border: 1px solid darken(theme-color("light"), 17%);
	background-color: theme-color("light");
	color: $body-color;
	box-shadow: 0.5px 0.9px 0 rgba(0, 0, 0, 0.07);

	&.alert-primary{
		@include alert-icon-colored($alert-primary-bg);
	}

	&.alert-success{
		@include alert-icon-colored($alert-success-bg);
	}

	&.alert-info{
		@include alert-icon-colored($alert-info-bg);
	}

	&.alert-warning{
		@include alert-icon-colored($alert-warning-bg);
	}

	&.alert-danger{
		@include alert-icon-colored($alert-danger-bg);
	}

	&.alert-light{
		@include alert-icon-colored($alert-dark-bg);
	}

	&.alert-dark{
		@include alert-icon-colored($alert-light-icon-color);
	}
}
