/**
 * Alert
 *
 * Description: Styles for alert bloxes.
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents:
 *
 * 1.0 - Alert
 *   1.1 - Alert (responsive)
 * -----------------------------------------------------------------------------
 */


/**
 * 1.0 - Alert
 * -----------------------------------------------------------------------------
 */

.alert {
	position: relative;
	display: block;
	color: $text-color;
	margin: $margin-standard / 2 0;
	border: em(8px) solid $gold-light;
	background-color: $sepia-lightest;
	padding: em(36px) em(70px) em(36px) em(36px);

	.media-image {
		margin-right: em(35px);
	}

	.icon {
		display: block;
		color: $gold-light;
		font-size: em(86px);
		line-height: 1em;
		padding-top: em(4px, 86px);
	}

	p {
		$font-size: 32px;
		font-size: em($font-size);
		line-height: em(48px, $font-size);
		font-family: $font-family-alt;
		margin: 0;
	}

	&.alert-dotted, &.alert-small {
		$font-size: 16px;
		font-size: em($font-size);
		line-height: em(24px, $font-size);
		border-style: dotted;
		border-width: em(2px, $font-size);
		padding: em(22px, $font-size);
		margin-top: $margin-standard * 1.5;
		margin-bottom: $margin-standard * 1.5;

		&:after {
			display: none;
		}

		&:hover p {
			text-decoration: none;
		}

		.icon {
			font-size: em(76px);
			padding-top: em(4px, 76px);
		}

		p {
			font-size: 1em;
			line-height: em(24px, $font-size);
		}

		h1 {
			font-size: em(24px, $font-size);
			line-height: em(28px, 24px);
			margin-bottom: em(3px, 24px);
		}
	}

	&.alert-small {
		border-style: solid;
	}

	&.alert-green {
		border-color: $green;
		background-color: $green-lightest;

		.icon {
			color: $green;
		}
	}


	&.alert-blue {
		border-color: $blue;
		background-color: $blue-lightest;

		.icon {
			color: $blue;
		}
	}

	&.alert-gold {
		border-color: $gold-light;
		background-color: $sepia-lightest;

		.icon {
			color: $gold-light;
		}
	}

	&.alert-pink {
		border-color: $pink;
		background-color: $pink-lightest;

		.icon {
			color: $pink;
		}
	}
}


/**
 * 1.1 - Alert (responsive)
 * -----------------------------------------------------------------------------
 */

@media (max-width: $device-small-max) {
	.alert {
		border-width: em(6px);
		padding: em(15px) em(40px) em(15px) em(15px);

		&:hover {
			text-decoration: none;
		}

		&:after {
			font-size: em(28px);
			right: em(10px, 28px);
			margin-top: em(-14px, 28px);
		}

		.media-image {
			display: none;
		}

		p {
			$font-size: 18px;
			font-size: em($font-size);
			line-height: em(26px, $font-size);
			font-family: $font-family-alt;
			margin: 0;
		}
	}
}