:root {
	--success: rgba(0, 128, 0, 1);
	--warning: rgba(255, 165, 0, 1);
	--error: rgba(255, 0, 0, 1);

	--success-light: rgba(0, 128, 0, 0.4);
	--warning-light: rgba(255, 165, 0, 0.4);
	--error-light: rgba(255, 0, 0, 0.4);
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

body {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ecf0f1;
}

.control button {
	padding: 8px 16px;
	border-radius: 4px;
	border: none;
	outline: navajowhite;
	font-size: 28px;
	color: white;
	margin: 0 10px;
	cursor: pointer;
}

.success {
	background: var(--success);
}

.warning {
	background: var(--warning);
}

.error {
	background: var(--error);
}

#toasts {
	position: fixed;
	top: 10px;
	right: 10px;
}

.toast {
	padding: 20px;
	border: none;
	border-radius: 6px;
	color: white;
	font-size: 26px;
	overflow: hidden;
	animation: slide_show 2s ease forwards;
  margin-bottom: 10px;
}

.toast i {
	margin: 0 10px;
}

.toast .countdown {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 4px;
	width: 100%;
	animation: countdown 3s linear forwards;
	z-index: 0;
}

.toast.success {
	border-left: 6px solid var(--success);
	background: var(--success-light);
}

.toast.warning {
	border-left: 6px solid var(--warning);
	background: var(--warning-light);
}

.toast.error {
	border-left: 6px solid var(--error);
	background: var(--error-light);
}

.toast.success .countdown {
	background: var(--success);
}

.toast.warning .countdown {
	background: var(--warning);
}

.toast.error .countdown {
	background: var(--error);
}

@keyframes countdown {
	20% {
		width: 100%;
	}
	100% {
		width: 0%;
	}
}

@keyframes slide_show {
	0% {
		transform: translateX(100%);
	}
	25% {
		transform: translateX(-10%);
	}
	50% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-10px);
	}
}

@keyframes slide_hide {
  0% {
		transform: translateX(0%);
	}
  10% {
    transform: translateX(3%);
  }
	35% {
		transform: translateX(-5%);
	}
	100% {
		transform: translateX(110%);
	}
}