.alert {
	border-style: $alert-border-style;

	@if ($alert-border-width != 1px) {
		border-width: $alert-border-width;
	}

	display: block;
	font-size: $alert-font-size;
	word-wrap: break-word;

	.close {
		@include clay-close($alert-close);
	}

	.lead {
		font-size: $alert-lead-font-size;
		font-weight: $alert-lead-font-weight;
		margin-right: $alert-lead-spacer-x;
	}

	.component-title {
		@include clay-text-typography($alert-title);
	}

	.component-subtitle {
		@include clay-text-typography($alert-subtitle);
	}
}

.alert-link,
.alert-link.btn-unstyled {
	font-weight: $alert-link-font-weight;
	text-decoration: $alert-link-decoration;

	&:hover,
	&:focus {
		text-decoration: $alert-link-hover-decoration;
	}
}

.alert-indicator {
	font-size: $alert-indicator-font-size;

	+ .lead {
		margin-left: $alert-lead-spacer-x;
	}
}

// Alert Dismissible

.alert-dismissible {
	padding-bottom: $alert-dismissible-padding-bottom;
	padding-left: $alert-dismissible-padding-left;
	padding-right: $alert-dismissible-padding-right;
	padding-top: $alert-dismissible-padding-top;
}

// Alert Fluid

.alert-fluid {
	@include border-radius(0);

	border-width: $alert-fluid-border-width;
	margin-bottom: $alert-fluid-margin-bottom;
	padding: 0;

	&.alert-dismissible {
		.container,
		.container-fluid {
			padding-bottom: $alert-dismissible-padding-bottom;
			padding-left: $alert-dismissible-padding-left;
			padding-right: calc(#{$alert-dismissible-padding-right} + #{$grid-gutter-width / 2});
			padding-top: $alert-dismissible-padding-top;
			position: relative;
		}
	}

	.container,
	.container-fluid {
		padding: $alert-padding-y $alert-padding-x;
	}

	.close {
		right: calc(#{$grid-gutter-width / 2} + #{$nav-btn-margin-x});
	}
}

// Alert Notifications

.alert-container {
	height: 0;
	position: relative;
}

.alert-notifications {
	.alert {
		@include box-shadow($alert-notifications-box-shadow);

		width: $alert-notifications-max-width;

		@include clay-scale-component {
			max-width: none;
			width: 100%;
		}

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

.alert-notifications-absolute {
	bottom: $alert-notifications-absolute-bottom;
	height: 0;
	left: $alert-notifications-absolute-left;
	position: absolute;
	right: $alert-notifications-absolute-right;
	top: $alert-notifications-absolute-top;
	z-index: $zindex-alert-notifications;

	@include clay-scale-component {
		bottom: $alert-notifications-absolute-bottom-mobile;
		left: $alert-notifications-absolute-left-mobile;
		right: $alert-notifications-absolute-right-mobile;
		top: $alert-notifications-absolute-top-mobile;
	}
}

.alert-notifications-fixed {
	bottom: $alert-notifications-fixed-bottom;
	left: $alert-notifications-fixed-left;
	position: fixed;
	right: $alert-notifications-fixed-right;
	top: $alert-notifications-fixed-top;
	z-index: $zindex-alert-notifications;

	@include clay-scale-component {
		bottom: $alert-notifications-fixed-bottom-mobile;
		left: $alert-notifications-fixed-left-mobile;
		right: $alert-notifications-fixed-right-mobile;
		top: $alert-notifications-fixed-top-mobile;
	}
}

// Alert List

.alert-list {
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
	padding-left: 0;

	.close {
		top: 50%;
		transform: translateY(-50%);
	}
}

// Alert in Modal

.modal-body {
	.alert {
		.close {
			right: $modal-inner-padding;
		}
	}

	.alert-list {
		.alert-fluid:last-child {
			margin-bottom: -$alert-fluid-border-bottom-width;
		}
	}
}

// Alert Variants

@each $color, $value in $alert-palette {
	.alert-#{$color} {
		background-color: map-get($value, bg);
		border-color: map-get($value, border-color);
		color: map-get($value, color);

		.close {
			color: map-get($value, close-color);

			&:hover,
			&:focus {
				color: map-get($value, close-hover-color);
			}
		}

		.alert-link {
			color: map-get($value, link-color);

			&:hover,
			&:focus {
				color: map-get($value, link-hover-color);
			}
		}

		.lead {
			color: map-get($value, lead-color);
		}
	}
}