.components-toast-container {
  position: fixed;
  bottom: 0.5rem;
  right: 0.6rem;
  z-index: 2500;
  max-width: 500px;

  code {
    color: var(--bs-warning);
  }
}

@media screen and (width <= 600px) {
  .components-toast-container {
    max-width: 100%;
    bottom: 0;
    right: 0;
  }
}

.bg-toast {
  @supports (backdrop-filter: blur(12px)) {
    background-color: rgb(var(--karma-toast-bg-rgb, 21, 21, 21), 0.85);
    backdrop-filter: saturate(50%) blur(12px);
  }

  @supports not (backdrop-filter: blur(12px)) {
    background-color: var(--karma-toast-bg);
  }
}

.toast-upgrade-progressbar {
  animation-duration: 20s;
  animation-name: upgrade-progress;
  animation-timing-function: linear;
}

@keyframes upgrade-progress {
  0% {
    width: 100%;
  }

  100% {
    width: 0%;
  }
}
