@import "style_variables.css";

/* ===== Logging On Modal ===== */
.modal.logging-on {
    width: 480px;
}

.modal.logging-on .modal-title-container img {
    height: 84px;
}

.modal-body.logging-on {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-12);
    padding: 0 var(--spacing-20) var(--spacing-20);
    align-self: stretch;
}

.icon-loading {
    padding-top: var(--spacing-12);
}

.loader {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.loader img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
    padding-top: var(--spacing-6);
    align-self: stretch;
    text-align: center;
    color: var(--color-text-gray-900);
    font-family: var(--font-family-base);
    font-size: 18px;
    line-height: 28px;
    font-weight: var(--font-weight-semibold);
}