[x-cloak] {
    display: none !important;
}

/* Toast animations */
@keyframes toastbar {
    from {
        width: 100%
    }
    to {
        width: 0%
    }
}

/* card shell */
.toast-card {
    border-radius: .875rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
    border: 0;
    padding: 1rem 1.25rem;
    width: 26rem;
    max-width: 90vw;
}

/* variants (use DaisyUI button tokens) */
.t-primary {
    background: var(--p);
    color: var(--pc);
}

.t-success {
    background: var(--su);
    color: var(--suc);
}

.t-warning {
    background: var(--wa);
    color: var(--wac);
}

.t-error {
    background: var(--er);
    color: var(--erc);
}

/* icon: solid pill that inverts colours for contrast */
.toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    border-radius: 9999px;
    font-size: 1.35rem;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06);
}

.t-primary .toast-icon {
    background: var(--pc);
    color: var(--p);
}

.t-success .toast-icon {
    background: var(--suc);
    color: var(--su);
}

.t-warning .toast-icon {
    background: var(--wac);
    color: var(--wa);
}

.t-error .toast-icon {
    background: var(--erc);
    color: var(--er);
}

/* progress bar */
.toast-progress {
    height: .25rem;
    border-bottom-left-radius: .875rem;
    border-bottom-right-radius: .875rem;
    animation: toastbar 5s linear forwards;
    background: currentColor;
    opacity: .55;
    margin-top: 1rem;
    margin-bottom: -.25rem;
}