#toast-container {
  position: fixed;
  bottom: var(--semibreve);
  right: var(--body-padding);
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: var(--crotchet);
}

.toast {
  background-color: var(--status-green);
  padding: var(--crotchet) var(--minim);
  border-radius: var(--crotchet);
  font-family: var(--font-sans);
  font-size: 1.2em;
  color: var(--shw);
  animation: appear-then-fade 4s both;
  max-width: 100%;

  &.alert {
    background-color: var(--status-red);
    color: var(--shw);
  }
}

@media (max-width: 640px) {
  .toast {
    font-size: 1em;
  }
}

@keyframes appear-then-fade {
  0%,
  100% {
    opacity: 0;
  }
  5%,
  85% {
    opacity: 1;
  }
}