karma/ui/src/Styles/Components/_Toast.scss

.components-toast-container {
  position: fixed;
  bottom: 0.5rem;
  right: 0.6rem;

  z-index: 2500;

  max-width: 500px;

  code {
    color: $warning;
  }
}

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

.bg-toast {
  @supports (backdrop-filter: blur(12px)) {
    background-color: rgba(darken($dark, 5%), 0.85);
    backdrop-filter: saturate(50%) blur(12px);
  }
  @supports not (backdrop-filter: blur(12px)) {
    background-color: darken($dark, 5%);
  }
}

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

@keyframes upgradeProgress {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}