@zenithui/toast/dist/components/toast-container/toast-container.css

A modern, lightweight toast notification system for React applications. ZenithUI Toast provides a simple and customizable way to display notifications, alerts, and messages to users with smooth animations and flexible styling options.

.zenithui-toast-container {
  z-index: 999;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
  display: flex;
  position: fixed;
  overflow: hidden;
}

.zenithui-top-left {
  top: var(--y-offset);
  left: var(--x-offset);
  align-items: flex-start;
}

.zenithui-top-right {
  top: var(--y-offset);
  right: var(--x-offset);
  align-items: flex-end;
}

.zenithui-bottom-left {
  bottom: var(--y-offset);
  left: var(--x-offset);
  align-items: flex-start;
}

.zenithui-bottom-right {
  bottom: var(--y-offset);
  right: var(--x-offset);
  align-items: flex-end;
}

.zenithui-top-center {
  top: var(--y-offset);
  left: calc(50% - var(--x-offset));
  align-items: center;
  transform: translateX(-50%);
}

.zenithui-bottom-center {
  bottom: var(--y-offset);
  left: calc(50% - var(--y-offset));
  align-items: center;
  transform: translateX(-50%);
}