.fw-toast-region {
  position: fixed;
  inset-block-end: var(--toast-offset);
  inset-inline-end: var(--toast-offset);
  display: flex;
  flex-direction: column;
  gap: var(--toast-gap);
  pointer-events: none;
}

.fw-toast {
  --toast-state-color: var(--color-highlight);
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--inner-spacing-xs);
  max-width: var(--toast-max-width);
  padding: var(--inner-spacing-sm) var(--inner-spacing-md);
  border: var(--line-thickness) solid var(--toast-state-color);
  border-radius: var(--border-radius-sm);
  background-color: color-mix(in srgb, var(--toast-state-color) 8%, var(--color-white));
  color: var(--color-type-body);
  box-shadow: var(--box-shadow-lg);
  transition: opacity var(--transition-timing-fast) var(--transition-ease-1), transform var(--transition-timing-fast) var(--transition-ease-1);
}

.fw-toast-success {
  --toast-state-color: var(--color-success-500);
}

.fw-toast-warning {
  --toast-state-color: var(--color-warning-500);
}

.fw-toast-error {
  --toast-state-color: var(--color-error-500);
}

@media (prefers-reduced-motion: reduce) {
  .fw-toast {
    transition: none;
  }
}