#hs-toast-region {
  position: fixed;
  bottom: var(--hs-space-24);
  inset-inline-end: var(--hs-space-24);
  z-index: var(--hs-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-12);
  width: min(22rem, calc(100vw - var(--hs-space-32)));
  pointer-events: none;
}

.hs-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--hs-space-12);
  padding: var(--hs-space-16);
  background: var(--hs-color-surface);
  border-inline-start: 4px solid var(--hs-color-gray-400);
  border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-shadow-large);
  pointer-events: auto;
  animation: hs-toast-in var(--hs-transition-normal) var(--hs-ease-emphasized);
}

.hs-toast.is-leaving {
  animation: hs-toast-out var(--hs-transition-fast) var(--hs-ease) forwards;
}

.hs-toast--success { border-inline-start-color: var(--hs-color-success-500); }
.hs-toast--warning { border-inline-start-color: var(--hs-color-warning-500); }
.hs-toast--danger  { border-inline-start-color: var(--hs-color-danger-500); }
.hs-toast--info    { border-inline-start-color: var(--hs-color-info-500); }

.hs-toast__body {
  flex: 1;
  font-size: var(--hs-font-size-body-sm);
  color: var(--hs-color-text);
}

.hs-toast__close {
  flex-shrink: 0;
  color: var(--hs-color-text-muted);
}
.hs-toast__close:hover {
  color: var(--hs-color-text);
}

@keyframes hs-toast-in {
  from {
    opacity: 0;
    transform: translateY(.75rem);
  }
}

@keyframes hs-toast-out {
  to {
    opacity: 0;
    transform: translateY(.5rem) scale(.95);
  }
}