.toast {
	position: fixed;
	bottom: -100px;
	right: $space-4;
	max-width: 420px;

	background: $color-dark;
	border: 2px solid $color-text-light;
	padding: 0;
	opacity: 0;

	transition-duration: .25s;
	transition-property: opacity, top, bottom;

	&.a-show {
		bottom: $space-4;
		opacity: 1;
	}

	&.a-hide {
		bottom: $space-4 + 100px;
		opacity: 0;
	}

	.toast-content {
		display: flex;
		flex-direction: column;
		gap: 0;

		.toast-title {
			font-size: $font-size-h3;
			display: flex;
			flex-direction: row;
			gap: $space-2;
			align-items: center;
			color: $color-black;
			background: $color-primary;
			padding: $space-1 $space-2;
			padding-right: $space-9;
		}

		.toast-text {
			font-size: $font-size-base;
			padding: $space-6 $space-4;
			margin: 0;
		}
	}

	.toast-close {
		position: absolute;
		top: 0;
		right: 0;
		color: $color-black;
		height: 40px;
		width: 40px;

		&:hover {
			color: $color-dark;
		}
	}

	&.toast-info {
		// default info styles (inherits primary)
	}

	&.toast-success {
		border-color: $color-success;

		.toast-title {
			background: $color-success;
		}
	}

	&.toast-warning {
		border-color: $color-warning;

		.toast-title {
			background: $color-warning;
		}
	}

	&.toast-danger {
		border-color: $color-error;

		.toast-title {
			background: $color-error;
		}
	}
}