@use "sass:color";

@use "../vars/vars";

@layer vetools {
	.toast {
		@include vars.mix-shadow-1;

		z-index: vars.$z-temp-effect;
		right: 0;
		bottom: 200px;
		left: 0;
		padding: 5px 15px;
		min-height: 40px;
		max-width: 850px;
		display: flex;
		width: 90vw;
		justify-content: space-between;
		align-items: center;
		border: 1px solid transparent;
		border-radius: 4px;
		opacity: 1;
		transition: bottom vars.$time-5-frames;

		&--animate {
			bottom: 0;
			margin-bottom: (vars.$spacer * 0.5);
			transition: bottom vars.$time-5-frames;
		}

		&--deleted {
			z-index: vars.$z-temp-effect - 1;
		}

		&__container {
			position: fixed;
			z-index: vars.$z-temp-effect;
			top: 0;
			right: 0;
			left: 0;
			height: 200px;
		}

		&__wrp-control {
			margin: -5px -15px -5px 0;
			flex: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			align-self: stretch;
		}

		&__btn-close {
			margin: 0;
			height: 100%;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			border-top: 0;
			border-right: 0;
			border-bottom: 0;
			border-left: 1px solid #80808040;
			background: transparent;

			&:hover,
			&:focus {
				background: #80808020;
			}
		}

		&--type-info {
			color: vars.$rgb-alert-text-info;
			background-color: #d9edf7;
			border-color: #bce8f1;
		}

		&--type-danger {
			color: vars.$rgb-alert-text-danger;
			background-color: #f2dede;
			border-color: #ebccd1;
		}

		&--type-warning {
			color: vars.$rgb-alert-text-warning;
			background-color: #fcf8e3;
			border-color: #faebcc;
		}

		&--type-success {
			color: vars.$rgb-alert-text-success;
			background-color: #dff0d8;
			border-color: #d6e9c6;
		}
	}

	@include vars.mix-is-print {
		.toast {
			display: none !important;
		}
	}
}
