/* IN-APP NOTIFICATION */
/* =================== */
#notifs_container{
  position:fixed;
  top:20px;
  right:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:9999;
}

.notif{
  position:relative;
  display:flex;
  gap:12px;
  align-items:flex-start;
  width:300px;
  max-height:300px;
  border-radius:var(--element-radius);
  box-shadow:0 10px 30px var(--box-shadow);
  padding:10px;
  overflow:hidden;
  overflow-y:auto;
  transform:translateX(120%);
  opacity:0;
  animation:slideIn 0.35s ease forwards;
}

.notif.hide{
  animation:slideOut 0.35s ease forwards;
}

.notif_message{
  flex:1;
  white-space:pre-line;
}

.notif_close_btn{
  background:transparent;
  border:none;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  padding:0;
  margin-left:8px;
  opacity:.7;
  flex-shrink:0;
}

.notif_close_btn:hover{
  opacity:1;
  transform:scale(1.1);
}

.notif_progress_bar{
  position:absolute;
  left:0;
  bottom:0;
  height:4px;
  width:100%;
  transform-origin:left;
}

/* Error style */
.notif.error{
  color:var(--error-dark);
  background-color:var(--error-light);
  border:1px solid var(--error-dark);
}

.notif.error .notif_progress_bar{
  background-color:var(--error-dark);
}

.notif.error .notif_close_btn{
  color:var(--error-dark);
}

/* Success style */
.notif.success{
  color:var(--success-dark);
  background-color:var(--success-light);
  border:1px solid var(--success-dark);
}

.notif.success .notif_progress_bar{
  background-color:var(--success-dark);
}

.notif.success .notif_close_btn{
  color:var(--success-dark);
}

/* Warning style */
.notif.warning{
  color:var(--warning-dark);
  background-color:var(--warning-light);
  border:1px solid var(--warning-dark);
}

.notif.warning .notif_progress_bar{
  background-color:var(--warning-dark);
}

.notif.warning .notif_close_btn{
  color:var(--warning-dark);
}

.notif.info{
  color:var(--info-dark);
  background-color:var(--info-light);
  border:1px solid var(--info-dark);
}

.notif.info .notif_progress_bar{
  background-color:var(--info-dark);
}

.notif.info .notif_close_btn{
  color:var(--info-dark);
}

/* Animation */
@keyframes slideIn{
  to{
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut{
  to{
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes progress{
  from{
    transform: scaleX(1);
  }
  to{
    transform: scaleX(0);
  }
}


/* CONFIRM NOTIFICATIONS */
/* ===================== */

.confirm-box{
  color:var(--warning-dark);
  background-color:var(--warning-light);
  border:1px solid #ae9c78;
	border-radius:var(--box-radius);
	padding:8px 25px;
}

.confirm-box .icon{
	width:35px;
	height:35px;
	margin-right:15px;
}

.confirm-form{
	display:flex;
	flex-direction:row;
	align-items:center;
}

	/* Danger Zone indicator */
.danger-zone{
  color:var(--error-dark);
  background-color:var(--error-light);
  border:1px solid var(--error-dark);
  padding-left:5px;
  padding-right:5px;
}

/* btn for delete item or clear db */
.notif-confirm-btn,
.notif-cancel-btn{
  display:inline;
  border:1px solid var(--black);
  border-radius:var(--element-radius);
  box-shadow:1px 1px 3px #888;
  cursor:pointer;
  padding-left:10px;
  padding-right:10px;
  padding-top:2px;
  padding-bottom:2px;
}

.notif-confirm-btn{
  margin-left:5px;
}

.notif-cancel-btn{
  margin-left:30px;
}

.clear-input-style{
  width:40px;
  padding:2px;
}

/* FORM NOTIFICATIONS */
/* ================== */

.alert-error-box{
	margin-bottom:20px;
	padding:14px 16px;
	border-radius:var(--element-radius);
	background-color:var(--error-input-bg);
	border:1px solid var(--error-light);
	color:var(--error-dark);
	font-size:14px;
}

.alert-success-box {
	margin-bottom: 20px;
	padding:14px 16px;
	border-radius:var(--element-radius);
	background-color:var(--success-light);
	border:1px solid var(--success-dark);
	color:var(--success-dark);
	font-size:14px;
}

.alert-error-inline{
	color:var(--error-dark);
	font-size:14px;
}

.alert-success-inline{
  color:var(--primary-color);
  font-size:14px;
}


/* WIGGLE ANIMATION */
/* ================ */

@keyframes wiggle {
	0% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(4px); }
	100% { transform: translateX(0); }
}

.wiggle {
	animation: wiggle 0.4s ease;
}