@use "sass:color" as color;

$Toast-Color-Default: #007fff;
$Toast-Color-Success: #47b35f;
$Toast-Color-Success-Back: #47b35f;
$Toast-Color-Error: #fb3246;
$Toast-Color-Error-Back: #fb3246;
$Toast-Color-Info: #007fff;
$Toast-Color-Info-Back: #007fff;
$Toast-Color-Text-White: #f9f7f7;
$Toast-Color-Text-OnAccent: #f9f7f7;
$Toast-Color-Text-Secondary: #898989;

/* $Toast-Color-Default: #007fff;
$Toast-Color-Success: hsl(170, 51%, 71%);
$Toast-Color-Success-Back: hsl(170, 20%, 20%);
$Toast-Color-Error: hsl(346, 76%, 76%);
$Toast-Color-Error-Back: hsl(346, 20%, 20%);
$Toast-Color-Info: hsl(220, 76%, 76%);
$Toast-Color-Info-Back: hsl(220, 20%, 20%);
$Toast-Color-Text-White: #f9f7f7;
$Toast-Color-Text-OnAccent: #f9f7f7;
$Toast-Color-Text-Secondary: #898989; */

$Toast-Hover-Slight-Lighten: inset 0 0 999px 999px rgba(255, 255, 255, 0.2);

$Border-Width: 0px;
$Border-Radius: 16px;

$ProgressBar-Height: 3px;

$Responsive-Tablet-Max: 770px;
$Responsive-Mobile-Max: 700px;
$Responsive-MobileSmall-Max: 500px;

@mixin mobile() {
	@media only screen and (max-width: $Responsive-Mobile-Max) {
		@content;
	}
}

@mixin mobile_small() {
	@media only screen and (max-width: $Responsive-MobileSmall-Max) {
		@content;
	}
}

#ToastBox {
	position: fixed;
	bottom: 9px;
	inset-inline-end: 9px;
	width: min(300px, 96vw);
	text-align: center;
	font-size: 1rem;
	z-index: 200;

	@include mobile_small {
		inset-inline: 2%;
		width: 96%;
	}
}

.Toast {
	position: relative;
	display: block;
	min-width: 300px;
	margin-bottom: 9px;
	transform-style: preserve-3d;
	text-align: center;
	font-size: 1rem;
	font-family: inherit;
	border-radius: $Border-Radius;
	/* animation: Toast-FadeIn 0.5s, Toast-FadeOut 0.5s 4.5s forwards; */
	animation: Toast-FadeIn 0.2s ease 1 forwards;
	transition: 500ms ease-in-out;
	z-index: 200;
	// backdrop-filter: blur(6px);
	border: $Border-Width solid transparent;

	&.Success {
		background-color: color.scale($Toast-Color-Success-Back, $alpha: -0%);
		border-color: $Toast-Color-Success;
	}
	&.Error {
		background-color: color.scale($Toast-Color-Error-Back, $alpha: -0%);
		border-color: $Toast-Color-Error;
	}
	&.Info,
	&.Neutral {
		background-color: color.scale($Toast-Color-Info-Back, $alpha: -0%);
		border-color: $Toast-Color-Info;
	}
	&.Bye {
		animation: Toast-FadeOut 0.2s ease 0.1s 1 forwards;
	}

	* {
		margin: 0;
		padding: 0;
		line-height: normal;
		color: $Toast-Color-Text-White;
		place-self: center;
		place-items: center;

		-webkit-transition: background-color 500ms linear;
		-ms-transition: background-color 500ms linear;
		transition: background-color 500ms linear;
	}

	@include mobile {
		width: 96%;
		margin: 2%;
	}
}

.Toast-Body {
	display: grid;
	width: 100%;
	background: inherit;
	padding: 16px 24px;
	grid-template: "loader content" 1fr / auto 1fr;
	border-radius: $Border-Radius;
	overflow: hidden;

	&.Toast-LoaderOnly {
		grid-template: "loader" 1fr / auto;
	}
}

.Toast-Content {
	position: relative;
	width: 100%;
	height: 100%;
	color: $Toast-Color-Text-White;
	// background-color: $Toast-Color-Default;
	grid-area: content;
	display: grid;
	align-items: center;
	justify-content: center;

	/* .Toast.Success & {
		background-color: $Toast-Color-Success;
	}
	.Toast.Error & {
		background-color: $Toast-Color-Error;
	}
	.Toast.Info &,
	.Toast.Neutral & {
		background-color: $Toast-Color-Info;
	} */
}

.Toast-Title {
	width: 100%;
	margin-bottom: 12px;
	text-align: center;
	font-size: 1.3rem;
	font-weight: 700;
	color: $Toast-Color-Text-White;
}

.Toast-Text {
	display: inline-block;
	width: 100%;
	text-align: center;
	font-size: 1rem;
	color: $Toast-Color-Text-White;

	/* .Toast.Success & {
		color: $Toast-Color-Success;
	}
	.Toast.Error & {
		color: $Toast-Color-Error;
	}
	.Toast.Info &,
	.Toast.Neutral & {
		color: $Toast-Color-Info;
	} */
}

.Toast-ButtonBox {
	position: relative;
	display: flex;
	width: 100%;
	justify-content: flex-end;
	align-content: flex-end;
	margin-top: 16px;
	box-sizing: border-box;
}

.Toast-Button {
	position: relative;
	display: block;
	width: fit-content;
	min-width: 45px;
	max-width: 100%;
	margin-inline-start: 12px;
	padding: 8px 16px;
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	font-family: inherit;
	text-decoration: none;
	color: $Toast-Color-Text-OnAccent;
	background-color: transparent;
	border: 1px solid $Toast-Color-Text-OnAccent;
	border-radius: 50px;
	outline: 0;
	transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
	box-sizing: border-box;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;

	&.Filled {
		color: $Toast-Color-Default;
		background-color: $Toast-Color-Text-OnAccent;
		border-color: $Toast-Color-Default;
	}
	&.Outlined {
		color: $Toast-Color-Text-OnAccent;
		background-color: transparent;
		border: 1px solid $Toast-Color-Text-OnAccent;
	}
	&.Low {
		color: $Toast-Color-Text-OnAccent;
		background-color: transparent;
		border: none;
	}
	&:hover {
		box-shadow: $Toast-Hover-Slight-Lighten;
	}
	&:disabled,
	&.Disabled {
		opacity: 0.75;
		background-color: $Toast-Color-Text-Secondary;
		border-color: $Toast-Color-Text-Secondary;
		cursor: default;
	}
	&:focus {
		color: $Toast-Color-Default;
		background-color: $Toast-Color-Text-White;
	}
}

.Toast-ActionBox {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	padding: 4px 8px 10px;
	visibility: hidden;
	opacity: 0;
	transform: translateZ(-1px);
	font-size: 0;
	background-color: $Toast-Color-Default;
	border-radius: $Border-Radius $Border-Radius 0 0;
	animation: none;
	transition: 300ms;
	line-height: 0;
	z-index: -1;
	margin-inline-end: calc(-1 * $Border-Width / 1);
	border: $Border-Width solid transparent;
	scale: 1 0.8;

	.Toast.Success & {
		background-color: $Toast-Color-Success-Back;
		border-color: $Toast-Color-Success;
	}
	.Toast.Error & {
		background-color: $Toast-Color-Error-Back;
		border-color: $Toast-Color-Error;
	}
	.Toast.Info &,
	.Toast.Neutral & {
		background-color: $Toast-Color-Info-Back;
		border-color: $Toast-Color-Info;
	}
}

.Toast-ActionBox:hover,
.Toast:hover .Toast-ActionBox {
	visibility: visible;
	opacity: 1;
	transform: translateZ(-1px) translateY(-60%);
	scale: 1;

	@include mobile {
		transform: translateZ(-1px) translateY(-70%);
	}
}

.Toast-Action {
	width: 18px;
	height: 18px;
	aspect-ratio: 1 / 1;
	margin: 2px 6px 8px;
	background: transparent;
	color: #fff;
}

.Toast-ProgressBar {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 100%;
	height: $ProgressBar-Height;
	background-color: transparent;
}

.Toast-ProgressBar-Value {
	position: absolute;
	width: 0;
	left: 0;
	bottom: 0;
	height: $ProgressBar-Height;
	background-color: #fff;
}

.Toast-LoaderBox {
	display: flex;
	grid-area: loader;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.Toast-Loader {
	$Size: 1.5rem;
	width: $Size;
	height: $Size;
	border: 3px solid $Toast-Color-Text-White;
	// border: 3px solid $Toast-Color-Info;
	border-bottom-color: transparent;
	border-radius: 50%;
	display: block;
	animation: loaderRotation 1s linear infinite;
}

@keyframes loaderRotation {
	0% {
		rotate: 0deg;
	}
	100% {
		rotate: 360deg;
	}
}

@keyframes Toast-FadeIn {
	from {
		bottom: -32px;
		opacity: 0;
	}
	to {
		bottom: 0;
		opacity: 1;
	}
}

@keyframes Toast-FadeOut {
	from {
		opacity: 1;
		// height: auto;
		// bottom: 0;
		// visibility: visible;
	}
	to {
		opacity: 0;
		transform: translateY(100%);
		// height: 0;
		// bottom: -32px;
		// visibility: hidden;
	}
}