#toast-cont {
    position:fixed;
    left:0;
    width:100vw;
    bottom:0;
    display:flex;
    align-items:center;
    justify-content: flex-end;
    flex-direction: column;
    pointer-events: none;
}
.toast {
    background:var(--inv-bg);
    color:var(--inv-text);
    min-width:min(14rem, calc(100vw - 2rem));
    max-width:calc(100vw - 2rem);
    pointer-events:all;
    box-shadow: var(--thm-box-shadow);
    text-align: center;
    display:grid;
    grid-template-columns: 2rem 1fr;
    border-radius:0.25rem;
    overflow:hidden;

    margin-bottom:0.5rem;
    height:0;

    transition: all 0.2s cubic-bezier(.17,.67,.61,1);
    -webkit-transition: all 0.2s cubic-bezier(.17,.67,.61,1);
}

.toast .content {
    padding:0.5rem;
    line-height:1;
    text-shadow: var(--thm-text-shadow);
}
.toast button.content {
    color:var(--inv-blue);
}
.toast .close {
    background:none;
    border:none;
    box-shadow: var(--inv-box-shadow);
    display:grid;
    place-items: center;
    cursor: pointer;
    box-sizing:content-box;
}
.toast .close svg {
    height:1.5rem;
    width:1.5rem;
    fill:var(--inv-text);
    transition:all 0.2s;
}
.toast .close:hover svg {
    fill:var(--thm-blue);
    filter: drop-shadow(var(--glow-text-shadow));
    -webkit-filter: drop-shadow(var(--glow-text-shadow));
}