:root {
    --zbl-primary:#2563eb;
}

#toast-container {
    position: fixed;
    z-index: 999999;
    max-width: 320px;
    width: 100%;
}

.zbl-loading {
    position: relative;
    cursor: wait;
}

button.zbl-loading {
    color: transparent;
}

.text-white.zbl-loading:before {
    filter: brightness(1000%);
}

.zbl-loading::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.01);
    box-shadow: -38px 10px 0 0 var(--zbl-primary), -24px 10px 0 0 var(--zbl-primary), -10px 10px 0 0 var(--zbl-primary);
    animation: zbl-loading 1s infinite linear;
    left: calc(50% + 18px);
    top: calc(50% - 5px);
}

@keyframes zbl-loading {
    0% {
        box-shadow: -38px 0 0 0 var(--zbl-primary), -24px 0 0 0 var(--zbl-primary), -10px 0 0 0 var(--zbl-primary);
    }
    16.667% {
        box-shadow: -38px -5px 0 0 var(--zbl-primary), -24px 0 0 0 var(--zbl-primary), -10px 0 0 0 var(--zbl-primary);
    }
    33.333% {
        box-shadow: -38px -10px 0 0 var(--zbl-primary), -24px -5px 0 0 var(--zbl-primary), -10px 0 0 0 var(--zbl-primary);
    }
    50% {
        box-shadow: -38px -5px 0 0 var(--zbl-primary), -24px -10px 0 0 var(--zbl-primary), -10px -5px 0 0 var(--zbl-primary);
    }
    66.667% {
        box-shadow: -38px 0 0 0 var(--zbl-primary), -24px -5px 0 0 var(--zbl-primary), -10px -10px 0 0 var(--zbl-primary);
    }
    83.333% {
        box-shadow: -38px 0 0 0 var(--zbl-primary), -24px 0 0 0 var(--zbl-primary), -10px -5px 0 0 var(--zbl-primary);
    }
    100% {
        box-shadow: -38px 0 0 0 var(--zbl-primary), -24px 0 0 0 var(--zbl-primary), -10px 0 0 0 var(--zbl-primary);
    }
}