$_theme: () !default

@use "sass:selector"
@use "sass:map"

@keyframes toast-fade-out
	0%
		opacity: 1
	80%
		opacity: 1
	100%
		opacity: 0
		display: none

#toast-container
	position: fixed
	right: 1em
	bottom: 1em
	display: flex
	flex-direction: column

	.toast-container
		$container: &
		position: relative
		align-self: end

		&:not(.nofade)
			animation: toast-fade-out 5s forwards

		input[type="checkbox"]
			display: none

		input[type="checkbox"]:checked + .toast
			display: none

		.toast
			font-size: 22px
			border: 1px solid #938b04
			background-color: #4d4503
			display: flex
			flex-direction: row
			padding: 0.25em
			margin: 0.25em
			max-width: fit-content

			*
				padding: 0 0.25em

			&.green
				border-color: #189304
				background-color: #104404

			&.red
				border-color: #930f04
				background-color: #440604

			.icon
				width: 22px
				height: 22px
				background-size: 22px 22px
				background-repeat: no-repeat

				&.loading
					background-image: url(/static/images/loading.gif)

				&.check
					background-image: url(/static/images/check.svg)

				&.x
					background-image: url(/static/images/x.svg)

		.close-overlay
			display: none

		// Don't ask me how this works...
		@at-root
			.toast
				#{$container}:hover &
					filter: brightness(0.5)

			.close-overlay
				#{$container}:hover &
					position: absolute
					top: 0
					left: 0
					display: block
					width: 100%
					height: 100%
					z-index: 1
					background-image: url(/static/images/x.svg)
					background-size: 11px 11px
					background-repeat: no-repeat
					background-position: 50% 50%
					cursor: pointer