@acrool/react-toaster/dist/react-toaster.css

Toaster library based for Reactjs

.acrool-react-toaster__toaster-wrapper{--default-success-color: #07bc0c;--default-warning-color: #f1c40f;--default-error-color: #e74c3c;--default-info-color: #3498db;display:flex;flex-direction:row;gap:8px;background:#fff;padding:10px;color:#000;border-radius:5px;width:auto;height:100%;margin:0 auto;cursor:pointer;user-select:none;border:1px solid #333}.acrool-react-toaster__content{flex:1;text-align:left}.acrool-react-toaster__status-success{background:var(--success-color, var(--default-success-color));border-color:var(--success-color, var(--default-success-color));color:#fff}.acrool-react-toaster__status-warning{background:var(--warning-color, var(--default-warning-color));border-color:var(--warning-color, var(--default-warning-color));color:#fff}.acrool-react-toaster__status-error{background:var(--error-color, var(--default-error-color));border-color:var(--error-color, var(--default-error-color));color:#fff}.acrool-react-toaster__status-info{background:var(--info-color, var(--default-info-color));border-color:var(--info-color, var(--default-info-color));color:#fff}.acrool-react-toaster__icon{width:20px;height:20px;flex:0 0 auto}.acrool-react-toaster__icon svg{vertical-align:top}.acrool-react-toaster__icon>*{width:100%;height:100%}.acrool-react-toaster__root *,.acrool-react-toaster__root *:before,.acrool-react-toaster__root *:after{box-sizing:border-box;-webkit-box-sizing:border-box;line-height:normal}.acrool-react-toaster__root{--default-portal-index: 910}.acrool-react-toaster__root{position:fixed;max-width:100%;width:auto;margin:0 auto;z-index:var(--toaster-portal-index, var(--default-portal-index));display:flex;flex-direction:column-reverse}.acrool-react-toaster__root.acrool-react-toaster__position-vertical-top{top:20px}.acrool-react-toaster__root.acrool-react-toaster__position-vertical-bottom{bottom:20px;flex-direction:column}.acrool-react-toaster__root.acrool-react-toaster__position-horizontal-left{left:20px}.acrool-react-toaster__root.acrool-react-toaster__position-horizontal-center{left:50%;transform:translate(-50%)}.acrool-react-toaster__root.acrool-react-toaster__position-horizontal-right{right:20px}