.alert {
	background-color: $color-neutral-6;
	padding: 1rem $grid-spacer;

	@include inline-flex;
	@include flex-just(space-between);
	@include border-radius;
	@include transition;

	.icon-button {
		color: inherit;
		margin: -2% -2% -2% 2%;
	}

	a {
		
		&:hover {
			background-image: linear-gradient(currentColor 0px, currentColor 100%);
		}
	}

	&.-block {

		@include flex;
	}

	&.-success {
		background-color: rgba($color-success, 0.15);
		color: $color-success;
	}

	&.-warning {
		background-color: rgba($color-warning, 0.15);
		color: $color-warning;
	}

	&.-danger {
		background-color: rgba($color-danger, 0.15);
		color: $color-danger;
	}

	&.-small {
		padding: 0.5rem 1rem;
		font-size: $font-size-small;
	}

	&.-large {
		padding: 1.25rem 1.5rem;
		font-size: $font-size-large;
	}

	&.-fixed {
		position: fixed;
		transform: translateX(-50%);
		left: 50%;
		z-index: 51;

		a {
			font-weight: 600;
		}

		@include spacer(bottom);
		@include box-shadow(false, 0px, 5px, 10px, 0px, $color-neutral-6);

		@include lg-screen { 

			.icon-button {
				margin: -0.2rem -0.6rem -0.2rem 0.6rem;
			}
		}

		@include sm-screen {

			transform: none;

			@include spacer(left);
			@include spacer(right);
		}

		&.-success {
			background-color: lighten($color-success, 50%);
		}

		&.-danger {
			background-color: lighten($color-danger, 40%);
		}
	}
}

.minimal-scheme {

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