.alert-progress {
  transform-origin: left;
  animation: alertCountdown var(--alert-duration) linear;
  animation-fill-mode: forwards;
}

.custom-toast .toast-text {
  color: #2d3748;
}

.dark-mode .custom-toast .toast-text {
  color: #bababa;
}

.dark-mode .custom-toast .toast-header {
  background: #111;
}

.toast-hide-notice {
  background: #ededed;
  font-size: 10px;
  padding: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: right;
}

.dark-mode .toast-hide-notice {
  background: #11141c;
  color: #ababab;
}

@keyframes alertCountdown {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}