ToastCG.min.css

:root{--s-0:0;--s-10:10%;--s-20:20%;--s-30:30%;--s-40:40%;--s-50:50%;--s-60:60%;--s-70:70%;--s-80:80%;--s-90:90%;--s-100:100%;--black:var(--black-100);--black-0:hsl(0,0%,var(--s-100));--black-10:hsl(0,0%,var(--s-90));--black-20:hsl(0,0%,var(--s-80));--black-30:hsl(0,0%,var(--s-70));--black-40:hsl(0,0%,var(--s-60));--black-50:hsl(0,0%,var(--s-50));--black-60:hsl(0,0%,var(--s-40));--black-70:hsl(0,0%,var(--s-30));--black-80:hsl(0,0%,var(--s-20));--black-90:hsl(0,0%,var(--s-10));--black-100:hsl(0,0%,var(--s-0));--white:var(--white-100);--white-0:hsl(0,0%,var(--s-0));--white-10:hsl(0,0%,var(--s-10));--white-20:hsl(0,0%,var(--s-20));--white-30:hsl(0,0%,var(--s-30));--white-40:hsl(0,0%,var(--s-40));--white-50:hsl(0,0%,var(--s-50));--white-60:hsl(0,0%,var(--s-60));--white-70:hsl(0,0%,var(--s-70));--white-80:hsl(0,0%,var(--s-80));--white-90:hsl(0,0%,var(--s-90));--white-100:hsl(0,0%,var(--s-100));--background-light:var(--white);--background:var(--white-90);--background-dark:var(--white-80);--success-hue:140;--success:var(--success-50);--success-10:hsl(var(--success-hue),100%,var(--s-10));--success-20:hsl(var(--success-hue),100%,var(--s-20));--success-30:hsl(var(--success-hue),100%,var(--s-30));--success-40:hsl(var(--success-hue),100%,var(--s-40));--success-50:hsl(var(--success-hue),100%,var(--s-50));--success-60:hsl(var(--success-hue),100%,var(--s-60));--success-70:hsl(var(--success-hue),100%,var(--s-70));--success-80:hsl(var(--success-hue),100%,var(--s-80));--success-90:hsl(var(--success-hue),100%,var(--s-90));--success-100:hsl(var(--success-hue),100%,var(--s-100));--info-hue:200;--info:var(--info-50);--info-10:hsl(var(--info-hue),100%,var(--s-10));--info-20:hsl(var(--info-hue),100%,var(--s-20));--info-30:hsl(var(--info-hue),100%,var(--s-30));--info-40:hsl(var(--info-hue),100%,var(--s-40));--info-50:hsl(var(--info-hue),100%,var(--s-50));--info-60:hsl(var(--info-hue),100%,var(--s-60));--info-70:hsl(var(--info-hue),100%,var(--s-70));--info-80:hsl(var(--info-hue),100%,var(--s-80));--info-90:hsl(var(--info-hue),100%,var(--s-90));--info-100:hsl(var(--info-hue),100%,var(--s-100));--warning-hue:40;--warning:var(--warning-50);--warning-10:hsl(var(--warning-hue),100%,var(--s-10));--warning-20:hsl(var(--warning-hue),100%,var(--s-20));--warning-30:hsl(var(--warning-hue),100%,var(--s-30));--warning-40:hsl(var(--warning-hue),100%,var(--s-40));--warning-50:hsl(var(--warning-hue),100%,var(--s-50));--warning-60:hsl(var(--warning-hue),100%,var(--s-60));--warning-70:hsl(var(--warning-hue),100%,var(--s-70));--warning-80:hsl(var(--warning-hue),100%,var(--s-80));--warning-90:hsl(var(--warning-hue),100%,var(--s-90));--warning-100:hsl(var(--warning-hue),100%,var(--s-100));--error-hue:10;--error:var(--error-50);--error-10:hsl(var(--error-hue),100%,var(--s-10));--error-20:hsl(var(--error-hue),100%,var(--s-20));--error-30:hsl(var(--error-hue),100%,var(--s-30));--error-40:hsl(var(--error-hue),100%,var(--s-40));--error-50:hsl(var(--error-hue),100%,var(--s-50));--error-60:hsl(var(--error-hue),100%,var(--s-60));--error-70:hsl(var(--error-hue),100%,var(--s-70));--error-80:hsl(var(--error-hue),100%,var(--s-80));--error-90:hsl(var(--error-hue),100%,var(--s-90));--error-100:hsl(var(--error-hue),100%,var(--s-100));--primary-hue:190;--primary:var(--primary-50);--primary-10:hsl(var(--primary-hue),100%,var(--s-10));--primary-20:hsl(var(--primary-hue),100%,var(--s-20));--primary-30:hsl(var(--primary-hue),100%,var(--s-30));--primary-40:hsl(var(--primary-hue),100%,var(--s-40));--primary-50:hsl(var(--primary-hue),100%,var(--s-50));--primary-60:hsl(var(--primary-hue),100%,var(--s-60));--primary-70:hsl(var(--primary-hue),100%,var(--s-70));--primary-80:hsl(var(--primary-hue),100%,var(--s-80));--primary-90:hsl(var(--primary-hue),100%,var(--s-90));--primary-100:hsl(var(--primary-hue),100%,var(--s-100));--accent-hue:160;--accent:var(--accent-50);--accent-10:hsl(var(--accent-hue),100%,var(--s-10));--accent-20:hsl(var(--accent-hue),100%,var(--s-20));--accent-30:hsl(var(--accent-hue),100%,var(--s-30));--accent-40:hsl(var(--accent-hue),100%,var(--s-40));--accent-50:hsl(var(--accent-hue),100%,var(--s-50));--accent-60:hsl(var(--accent-hue),100%,var(--s-60));--accent-70:hsl(var(--accent-hue),100%,var(--s-70));--accent-80:hsl(var(--accent-hue),100%,var(--s-80));--accent-90:hsl(var(--accent-hue),100%,var(--s-90));--accent-100:hsl(var(--accent-hue),100%,var(--s-100));--text:var(--black-80);--text-secondary:var(--black-40);--text-button:var(--white-100);--highlight-primary:var(--primary);--highlight-accent:var(--accent);--highlight-secondary:var(--text-secondary);--transition-duration:.3s;--edge:0;--circle:200px;--rounded-s:5px;--rounded-m:8px;--rounded-l:12px}.toast{min-width:20rem;width:auto;max-width:30rem;height:3rem;overflow:hidden;border-radius:var(--rounded-m);border-left:5px solid var(--background-dark);display:flex;align-items:center;justify-content:start;gap:1rem;background-color:var(--background-light);z-index:10000000}.toast-primary{border-left:5px solid var(--primary-50)!important;background-color:var(--primary-90)}.toast-accent{border-left:5px solid var(--accent-50)!important;background-color:var(--accent-90)}.toast-info{border-left:5px solid var(--info-50)!important;background-color:var(--info-90)}.toast-success{border-left:5px solid var(--success-50)!important;background-color:var(--success-90)}.toast-warning{border-left:5px solid var(--warning-50)!important;background-color:var(--warning-90)}.toast-error{border-left:5px solid var(--error-50)!important;background-color:var(--error-90)}.toast-left-top{position:absolute;top:1rem;left:1rem}.toast-left-bottom{position:absolute;bottom:1rem;left:1rem}.toast-right-top{position:absolute;top:1rem;right:1rem}.toast-right-bottom{position:absolute;bottom:1rem;right:1rem}.toast-right-center{position:absolute;top:calc(50% - 3rem);right:1rem}.toast-left-center{position:absolute;top:calc(50% - 3rem);left:1rem}.toast .toast-icon{position:relative;margin-left:1rem;font-size:22px}.toast-primary>.toast-icon{color:var(--primary-50)}.toast-accent>.toast-icon{color:var(--accent-50)}.toast-info>.toast-icon{color:var(--info-50)}.toast-success>.toast-icon{color:var(--success-50)}.toast-warning>.toast-icon{color:var(--warning-50)}.toast-error>.toast-icon{color:var(--error-50)}.toast .toast-text{position:relative;margin-left:1rem;font-weight:600;max-width:calc(100% - 2rem);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}