// ============================================================================
// :: Alert
// ============================================================================
// Styling for alerts
.a-alert {
	position: fixed;
	left: 50%;

	display: flex;
	justify-content: space-between;
	align-items: center;
	width: calc(100% - 4rem);
	max-width: $container-width;
	margin: 0 auto;
	padding: 1.5rem 1.5rem 1.5rem 3rem;

	opacity: 0;

	background: $gradient-primary;
	border-radius: $border-radius-l;

	transform: translateX(-50%) translateY(-1rem);

	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;

	pointer-events: none;

	@include respond-at(1360px) {
		width: 100%;

		transform: translateX(-50%) translateY(8rem);
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.a-alert__description {
	padding-right: 1rem;

	font-family: $font-family-beausans;
	font-weight: $font-weight-bold;
	font-size: $font-size-1x-small;

	color: $text-color-white;
}

.a-alert__action {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	align-self: stretch;
	padding: 0 2rem;

	cursor: pointer;

	&:hover {

		.a-alert__close {
			transform: rotate(90deg) scale(0.8);
		}
	}
}

.a-alert__close {
	background: transparent;
	border: none;
	color: $text-color-white;

	transition: transform 0.3s ease-in-out;

	cursor: pointer;
}

// ============================================================================
// :: Modifiers
// ============================================================================
.a-alert--warning {
	background: $gradient-warning;
	background-position: 100%;
	background-size: 200%;
}

// ============================================================================
// :: States
// ============================================================================
.a-alert {

	&.is-open {
		z-index: $z-index-high;

		opacity: 1;

		transform: translateX(-50%) translateY(1rem);

		pointer-events: auto;

		@include respond-at($screen-medium-base) {
			transform: translateX(-50%) translateY(10rem);
		}
	}
}