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

.alert-heading {
	// Specified to prevent conflicts of changing $headings-color

	color: inherit;
}

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

.alert-link,
.alert-link.btn-unstyled {
	@include clay-link($alert-link);
}

.alert-indicator {
	@include clay-css($alert-indicator);

	.lexicon-icon {
		@include clay-css(map-get($alert-indicator, lexicon-icon));
	}

	+ .lead {
		@include clay-css(map-get($alert-indicator, lead));
	}
}

// Alert Dismissible

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

// Alert Fluid

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

// Alert Notifications

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

.alert-notifications {
	.alert {
		@include clay-css($alert-notification);

		@include media-breakpoint-down(sm) {
			@include clay-css($alert-notification-sm-down);
		}

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

	.alert-fluid {
		padding-bottom: 0;
		padding-top: 0;
	}
}

.alert-notifications-absolute {
	$breakpoint-down: map-get($alert-notifications-absolute, breakpoint-down);

	@include clay-css($alert-notifications-absolute);

	@include clay-scale-component(null, $breakpoint-down) {
		@include clay-css(map-get($alert-notifications-absolute, mobile));
	}
}

.alert-notifications-fixed {
	$breakpoint-down: map-get($alert-notifications-fixed, breakpoint-down);

	@include clay-css($alert-notifications-fixed);

	@include clay-scale-component(null, $breakpoint-down) {
		@include clay-css(map-get($alert-notifications-fixed, 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: if(
				variable-exists(modal-inner-padding),
				$modal-inner-padding,
				null
			);
		}
	}

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

// Alert Autofit Row

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

// Alert Feedback

.alert-feedback.alert {
	@include clay-css($alert-feedback);

	.alert-autofit-row,
	.autofit-row {
		display: inline;
		margin-left: 0;
		margin-right: 0;

		> .autofit-col {
			display: inline;
			padding-left: 0;
			padding-right: 0.25em;

			> .autofit-section {
				display: inline;
			}
		}
	}

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

	.lead {
		margin-right: 0;

		+ .component-text {
			margin-left: 0.25em;
		}
	}
}

// .alert-inline

.alert-inline.alert {
	@include clay-css($alert-inline);

	&.alert-dismissible {
		@include clay-css(map-get($alert-inline, alert-dismissible));

		&.alert-fluid {
			$alert-dismissible-alert-fluid: setter(
				map-get($alert-inline, alert-dismissible-alert-fluid),
				()
			);

			@include clay-css($alert-dismissible-alert-fluid);

			> .container,
			> .container-fluid {
				$container-fluid: setter(
					map-get($alert-dismissible-alert-fluid, container-fluid),
					()
				);

				@include clay-css($container-fluid);

				> .alert-autofit-row {
					@include clay-css(
						setter(
							map-get($container-fluid, alert-autofit-row),
							map-get($alert-inline, alert-autofit-row)
						)
					);

					.btn-group {
						@include clay-css(
							map-get($alert-autofit-row, btn-group)
						);
					}
				}
			}
		}
	}

	> .alert-autofit-row {
		$alert-autofit-row: setter(
			map-get($alert-inline, alert-autofit-row),
			()
		);

		@include clay-css($alert-autofit-row);

		.btn-group {
			@include clay-css(map-get($alert-autofit-row, btn-group));
		}
	}

	.close {
		@include clay-close(map-get($alert-inline, close));
	}
}

// Alert Autofit Stacked

.alert-autofit-stacked.alert {
	@include clay-css($alert-autofit-stacked);

	> .alert-autofit-row {
		$alert-autofit-row: setter(
			map-get($alert-autofit-stacked, alert-autofit-row),
			()
		);

		@include clay-css($alert-autofit-row);

		> .autofit-col {
			@include clay-css(map-get($alert-autofit-row, autofit-col));
		}

		.btn-group {
			@include clay-css(map-get($alert-autofit-row, btn-group));
		}
	}

	.close {
		@include clay-close(map-get($alert-autofit-stacked, close));
	}
}

// Alert Autofit Stacked Sm Down

.alert-autofit-stacked-sm-down.alert {
	@include clay-css($alert-autofit-stacked-sm-down);

	> .alert-autofit-row {
		$alert-autofit-row: setter(
			map-get($alert-autofit-stacked-sm-down, alert-autofit-row),
			()
		);

		@include media-breakpoint-down(sm) {
			@include clay-css($alert-autofit-row);
		}

		> .autofit-col {
			@include media-breakpoint-down(sm) {
				@include clay-css(map-get($alert-autofit-row, autofit-col));
			}
		}

		.btn-group {
			@include media-breakpoint-down(sm) {
				@include clay-css(map-get($alert-autofit-row, btn-group));
			}
		}
	}

	.close {
		@include media-breakpoint-down(sm) {
			@include clay-css(map-get($alert-autofit-stacked-sm-down, close));
		}
	}
}

// Alert Autofit Stacked Xs Down

.alert-autofit-stacked-xs-down.alert {
	@include clay-css($alert-autofit-stacked-xs-down);

	> .alert-autofit-row {
		$alert-autofit-row: setter(
			map-get($alert-autofit-stacked-xs-down, alert-autofit-row),
			()
		);

		@include media-breakpoint-down(xs) {
			@include clay-css($alert-autofit-row);
		}

		> .autofit-col {
			@include media-breakpoint-down(xs) {
				@include clay-css(map-get($alert-autofit-row, autofit-col));
			}
		}

		.btn-group {
			@include media-breakpoint-down(xs) {
				@include clay-css(map-get($alert-autofit-row, btn-group));
			}
		}
	}

	.close {
		@include media-breakpoint-down(xs) {
			@include clay-css(map-get($alert-autofit-stacked-xs-down, close));
		}
	}
}

// Alert Indicator Start

.alert-indicator-start.alert {
	@include clay-css($alert-indicator-start);

	&.alert-fluid {
		$alert-fluid: setter(map-get($alert-indicator-start, alert-fluid), ());

		@include clay-css($alert-fluid);

		> .container,
		> .container-fluid {
			@include clay-css(map-get($alert-fluid, container-fluid));
		}
	}

	&.alert-feedback {
		@include clay-css(map-get($alert-indicator-start, alert-feedback));
	}

	.alert-indicator {
		$alert-indicator: setter(
			map-get($alert-indicator-start, alert-indicator),
			()
		);

		@include clay-css($alert-indicator);

		+ .lead {
			@include clay-css(map-get($alert-indicator, lead));
		}
	}

	.alert-autofit-row {
		$alert-autofit-row: setter(
			map-get($alert-indicator-start, alert-autofit-row),
			()
		);

		@include clay-css($alert-autofit-row);

		.alert-indicator:only-child {
			@include clay-css(
				map-get($alert-autofit-row, alert-indicator-only-child)
			);
		}
	}
}

// Alert Variants

@each $color, $value in $alert-palette {
	@if not clay-is-map-unset($value) {
		$selector: if(
			starts-with($color, '.') or
				starts-with($color, '#') or
				starts-with($color, '%'),
			$color,
			str-insert($color, '.alert-', 1)
		);

		@if (starts-with($color, '%') or map-get($value, extend)) {
			#{$selector} {
				@include clay-alert-variant($value);
			}
		} @else if (starts-with($color, 'alert-')) {
			$placeholder: '%alert-#{$color}';

			#{$placeholder} {
				@include clay-alert-variant($value);
			}

			#{$selector} {
				@extend %alert-#{$color} !optional;
			}
		} @else {
			#{$selector} {
				@include clay-alert-variant($value);
			}
		}
	}
}