.toast {
	@include type-style-body-sm;
	display: inline-block;
	min-width: rem(288);
	max-width: rem(400);
	padding: spacing('tight');
	border-radius: 2px;
	background-color: $c-text;
	color: $c-white;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

	&.toast-negative {
		background-color: $c-ui-critical-dark;
	}

	&.toast-positive {
		background-color: $c-ui-online-dark;
	}

	&.toast-warn {
		background-color: $c-ui-warn-light;
		color: $c-text;
	}

	&.toast-info {
		background-color: $c-primary;
	}

	.btn {
		@include type-style-body-sm-em;
		position: relative;
		left: rem(-4);
		width: auto;
		padding-left: 0;
		height: rem(32);
		color: inherit;

		.btn__inner {
			align-items: flex-end;
		}
	}

	@include gt('small') {
		margin-right: spacing('tight');
	}
}

.toast__header {
	@include type-style-body-sm-em;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.btn {
		@include type-style-body-sm-em;
		padding: 0;
		min-width: 0;
		height: rem(20);

		.btn__inner {
			align-items: flex-start;
		}
	}

	.btn__icon {
		width: rem(16);
		height: rem(16);
		fill: rgba($c-white, 0.8);

		.toast-warn & {
			fill: $c-text-light;
		}
	}
}

.toasts-wrapper {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10;

	@include gt('small') {
		bottom: spacing('base');
		left: spacing('base');
	}
}

.toast-wrapper + .toast-wrapper {
	margin-top: spacing('base');
}