.ui-toast-container {
  position: fixed;
  z-index: var(--ui-z-toast);

  bottom: 0;
  right: 0;
  top: auto;
  left: auto;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--ui-space-2);
  padding: var(--ui-space-4);
  pointer-events: none;
  max-width: 22rem;
  width: 100%;
  box-sizing: border-box;
}
.ui-toast-container[data-pos^="bottom"] {
  bottom: 0;
  top: auto;
  flex-direction: column-reverse;
}
.ui-toast-container[data-pos^="top"] {
  top: 0;
  bottom: auto;
  flex-direction: column;
}
.ui-toast-container[data-pos$="right"] {
  right: 0;
  left: auto;
}
.ui-toast-container[data-pos$="left"] {
  left: 0;
  right: auto;
}
.ui-toast-container[data-pos$="center"] {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.ui-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-4);
  background: var(--ui-color-surface);
  border: var(--ui-border-width) var(--ui-border-style) var(--ui-color-border);
  font-size: var(--ui-font-size-s);
  color: var(--ui-color-text);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(var(--ui-space-2));
  transition:
    opacity var(--ui-duration-fast) var(--ui-easing-default),
    transform var(--ui-duration-fast) var(--ui-easing-default);
}
.ui-toast-container[data-pos^="top"] .ui-toast {
  transform: translateY(calc(-1 * var(--ui-space-2)));
}
.ui-toast.is-active {
  opacity: 1;
  transform: translateY(0);
}
.ui-toast-body {
  flex: 1;
}
.ui-toast-close {
  flex-shrink: 0;
  background: none;
  cursor: pointer;
  color: var(--ui-color-text-muted);
  font-size: var(--ui-font-size-l);
  line-height: 1;
  padding: 0;
  transition: color var(--ui-duration-fast);
}
.ui-toast-close:hover {
  color: var(--ui-color-text);
}
.ui-toast[data-type="success"] {
  border-left: 3px solid var(--color-success);
}
.ui-toast[data-type="danger"] {
  border-left: 3px solid var(--color-danger);
}
.ui-toast[data-type="warning"] {
  border-left: 3px solid var(--color-warning);
}
.ui-toast[data-type="info"] {
  border-left: 3px solid var(--color-info);
}