$snotColorSuccess: #017101 !default;
$snotColorInfo: #0158cc !default;
$snotColorError: #b30c10 !default;
$snotColorWarning: #e2ab02 !default;

$snotTransitionDuration: .2s; // if changed update js
$snotZindex: $z-index-snot;

$snotTop: 24px !default;
$snotBottom: false !default;
$snotLeft: false !default;
$snotRight: 0 !default;

$snotMinWidth: 360px !default;
$snotUseBorderRadius: true !default;
$snotBorderRadius: 8px !default;

.snot {
	position: fixed;
	z-index: $snotZindex;
	font-size: 1.6rem;
	@if $snotTop    { top: $snotTop; }
	@if $snotBottom { bottom: $snotBottom; }
	@if $snotLeft   { left: $snotLeft; }
	@if $snotRight  { right: $snotRight; }
	min-width: $snotMinWidth;
}

.snot-item {
	display: flex;
	column-gap: 8px;
	margin-bottom: 8px;
	padding: 16px 24px;
	@if $snotUseBorderRadius { border-radius: $snotBorderRadius;}

	&-success { color: var(--co-base-1); background-color: $snotColorSuccess; }
	&-info    { color: var(--co-base-1); background-color: $snotColorInfo; }
	&-error   { color: var(--co-base-1); background-color: $snotColorError; }
	&-warning { color: var(--co-base-0); background-color: $snotColorWarning; }

	.snot & {
		max-width: 60rem;
		margin-left: 16px;
		margin-right: 16px;
		box-shadow: 0 0 12px color-mix(in srgb, var(--co-base-0) 30%, transparent);
		transform: scale3d(1,.75,1);
		transform-origin: 50% 0;
		opacity: 0;
		transition: transform $snotTransitionDuration ease-in-out, opacity $snotTransitionDuration linear;
		&-show {
			transform: scale3d(1,1,1);
			opacity: 1;
		}
	}
}

.snot-body {
	max-height: 60vh;
	overflow-y: auto;
	@include scrollBar();

	a {
		color: var(--co-base-1);
		text-decoration: underline;
		@include hover() { text-decoration: none;}
	}
}

.snot-close {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	align-self: flex-start;
	width: 32px;
	min-width: 32px;
	height: 32px;
	margin-right: -12px;
	padding-bottom: .2rem;
	font-size: 1.5em;
	color: inherit;
	font-family: consolas, monospace;
	opacity: .6;
	@include hover() {
		color: currentColor;
		background-color: color-mix(in srgb, var(--co-base-0) 15%, transparent);
	}
}

.snot-group {
	flex-grow: 1;
	padding-top: 4px;
	margin-right: auto;
}

.snot-actions {
	padding-top: 8px;
	button {
		padding: 3px 16px;
		margin-right: 8px;
		color: inherit;
		font-size: 14px;
		text-transform: uppercase;
		background-color: color-mix(in srgb, var(--co-base-0) 15%, transparent);
		@if $snotUseBorderRadius { border-radius: 3px;}
		@include hover() {
			opacity: .7;
		}
	}
}

.snot-page {
	.snot-group { padding: 0;}
}

@include mediaQ(xsMax) {
	.snot {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;

		.snot-item {
			margin: 0;
			box-shadow: none;
			@if $snotUseBorderRadius { border-radius: 0;}

			+ .snot-item { border-top: 1px solid color-mix(in srgb, var(--co-theme-0) 30%, transparent);}
		}
	}
}

@include mediaQ(xs) {
	.snot {
		width: 54rem;
	}
}