@spaced-out/ui-design-system/lib/components/Toast/ToastContainer.module.css

Sense UI components library

@value (
  spaceSmall,
  spaceMedium, 
  spaceHalfFluid, 
  spaceNegHalfFluid
) from '../../styles/variables/_space.css';

.toastContainer {
  position: fixed;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: spaceSmall;
}
.toastContainer.topCenter {
  top: spaceMedium;
  left: spaceHalfFluid;
  transform: translateX(spaceNegHalfFluid);
}
.toastContainer.topLeft {
  top: spaceMedium;
  left: spaceMedium;
}
.toastContainer.topRight {
  top: spaceMedium;
  right: spaceMedium;
}
.toastContainer.bottomCenter {
  bottom: spaceMedium;
  left: spaceHalfFluid;
  transform: translateX(spaceNegHalfFluid);
}

.toastContainer.bottomLeft {
  bottom: spaceMedium;
  left: spaceMedium;
}
.toastContainer.bottomRight {
  bottom: spaceMedium;
  right: spaceMedium;
}