@arolariu/components/dist/components/ui/toast_module.css

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

.viewport-jvCIkI {
  gap: var(--ac-space-3);
  padding: var(--ac-space-4);
  pointer-events: none;
  z-index: 9999;
  flex-direction: column;
  width: min(100vw - 2rem, 24rem);
  display: flex;
  position: fixed;
}

.viewportTopLeft-Kb0Dxx {
  align-items: flex-start;
  top: 0;
  left: 0;
}

.viewportTopRight-cN2v_K {
  align-items: flex-end;
  top: 0;
  right: 0;
}

.viewportBottomLeft-QsijST {
  align-items: flex-start;
  bottom: 0;
  left: 0;
}

.viewportBottomRight-vFah1i {
  align-items: flex-end;
  bottom: 0;
  right: 0;
}

.viewportTopCenter-N1lhMQ {
  top: 0;
}

.viewportBottomCenter-UYbiwI, .viewportTopCenter-N1lhMQ {
  align-items: center;
  left: 50%;
  transform: translateX(-50%);
}

.viewportBottomCenter-UYbiwI {
  bottom: 0;
}

.root-uwGvth {
  backdrop-filter: blur(16px);
  background: color-mix(in oklab,var(--ac-background),var(--ac-card, var(--ac-background)) 25%);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-xl);
  color: var(--ac-foreground);
  pointer-events: auto;
  width: 100%;
  transition: opacity .16s, transform .16s;
  overflow: hidden;
  box-shadow: 0 18px 40px -24px #0f172a73, 0 10px 18px -12px #0f172a47;

  &[data-starting] {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }

  &[data-ending] {
    opacity: 0;
    transform: translateY(4px) scale(.98);
  }
}

.content-TMHpYm {
  align-items: flex-start;
  gap: var(--ac-space-3);
  padding: var(--ac-space-4);
  grid-template-columns: auto minmax(0, 1fr) auto;
  display: grid;
}

.leading-gM08RM {
  color: inherit;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .125rem;
  display: flex;
}

.body-kFIEHQ {
  gap: var(--ac-space-1);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.title-kXfMGB {
  color: inherit;
  font-weight: 600;
  line-height: 1.4;
}

.description-I8ct1l, .title-kXfMGB {
  font-size: var(--ac-text-sm);
  margin: 0;
}

.description-I8ct1l {
  color: var(--ac-muted-foreground);
  line-height: 1.5;
}

.close-eMrgdZ {
  border-radius: calc(var(--ac-radius-md) - 2px);
  color: var(--ac-muted-foreground);
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  transition: background-color .14s, color .14s;
  display: inline-flex;

  &:focus-visible, &:hover {
    background: color-mix(in oklab,var(--ac-muted) 84%,transparent);
    color: var(--ac-foreground);
    outline: none;
  }
}

.closeIcon-OazeuD, .icon-G29Yjv {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.iconSpin-xicEw2 {
  animation: .9s linear infinite toast-spin-PgaAxf;
}

.actions-ISQ9_4 {
  gap: var(--ac-space-2);
  margin-top: var(--ac-space-2);
  flex-wrap: wrap;
  display: flex;
}

.primaryAction-L_Ifg3, .secondaryAction-Uv1cEU {
  border-radius: var(--ac-radius-md);
  cursor: pointer;
  font-size: var(--ac-text-xs);
  min-height: 2rem;
  padding: 0 var(--ac-space-3);
  border: 1px solid #0000;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  transition: background-color .14s, border-color .14s, color .14s;
  display: inline-flex;
}

.primaryAction-L_Ifg3 {
  background: var(--ac-foreground);
  color: var(--ac-background);

  &:focus-visible, &:hover {
    background: color-mix(in oklab,var(--ac-foreground) 88%,#fff);
    outline: none;
  }
}

.secondaryAction-Uv1cEU {
  border-color: color-mix(in oklab,var(--ac-border) 75%,transparent);
  color: var(--ac-foreground);
  background: none;

  &:focus-visible, &:hover {
    background: color-mix(in oklab,var(--ac-muted) 72%,transparent);
    outline: none;
  }
}

.default-KHMvJy {
  border-color: color-mix(in oklab,var(--ac-border) 88%,transparent);
}

.success-VAn7xf {
  background: color-mix(in oklab,var(--ac-success, #16a34a) 10%,var(--ac-background));
  border-color: color-mix(in oklab,var(--ac-success, #16a34a) 45%,var(--ac-border));
  color: color-mix(in oklab,var(--ac-success, #16a34a) 78%,var(--ac-foreground));
}

.error-fbRDFy {
  background: color-mix(in oklab,var(--ac-destructive) 10%,var(--ac-background));
  border-color: color-mix(in oklab,var(--ac-destructive) 48%,var(--ac-border));
  color: color-mix(in oklab,var(--ac-destructive) 82%,var(--ac-foreground));
}

.info-be_454 {
  background: color-mix(in oklab,var(--ac-primary, #2563eb) 10%,var(--ac-background));
  border-color: color-mix(in oklab,var(--ac-primary, #2563eb) 42%,var(--ac-border));
  color: color-mix(in oklab,var(--ac-primary, #2563eb) 78%,var(--ac-foreground));
}

.warning-EzQWby {
  background: color-mix(in oklab,#f59e0b 12%,var(--ac-background));
  border-color: color-mix(in oklab,#f59e0b 45%,var(--ac-border));
  color: color-mix(in oklab,#f59e0b 80%,var(--ac-foreground));
}

.loading-OTB2rn {
  border-color: color-mix(in oklab,var(--ac-muted-foreground) 34%,var(--ac-border));
}

.error-fbRDFy .description-I8ct1l, .info-be_454 .description-I8ct1l, .success-VAn7xf .description-I8ct1l, .warning-EzQWby .description-I8ct1l {
  color: color-mix(in oklab,currentcolor 68%,var(--ac-muted-foreground));
}

@keyframes toast-spin-PgaAxf {
  0% {
    transform: rotate(0);
  }

  to {
    transform: rotate(1turn);
  }
}


/*# sourceMappingURL=toast_module.css.map */