/*
 * Temporary read-only Mix365 authentication diagnostic.
 */

.mix365-auth-diagnostic {
    width:
        min(760px, 100%);

    min-height: 76px;

    display: flex;
    align-items: center;
    gap: 15px;

    margin:
        -30px auto 52px;

    padding:
        16px 18px;

    border:
        1px solid
        rgba(255,255,255,0.12);

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            rgba(24,25,30,0.94),
            rgba(6,6,8,0.97)
        );

    box-shadow:
        0 22px 60px
        rgba(0,0,0,0.42);

    text-align: left;
}

.mix365-auth-light {
    width: 13px;
    height: 13px;

    flex: 0 0 13px;

    border-radius: 50%;

    background: #a6a6a6;

    box-shadow:
        0 0 15px
        rgba(255,255,255,0.18);
}

.mix365-auth-copy {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mix365-auth-copy strong {
    color: #ffffff;

    font-size: 14px;
    line-height: 1.3;
    font-weight: 900;
}

.mix365-auth-copy span {
    color:
        rgba(255,255,255,0.64);

    font-size: 12px;
    line-height: 1.5;
}

.mix365-auth-diagnostic button {
    flex: 0 0 auto;

    padding: 10px 13px;

    border:
        1px solid
        rgba(255,255,255,0.14);

    color: #ffffff;

    background:
        rgba(255,255,255,0.06);

    font-family: inherit;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    cursor: pointer;
}

.mix365-auth-diagnostic button:hover {
    border-color: #ff1956;
    background: #e90043;
}

.mix365-auth-diagnostic.is-checking
.mix365-auth-light {
    background: #ffb020;

    box-shadow:
        0 0 18px
        rgba(255,176,32,0.55);

    animation:
        mix365AuthPulse
        1.1s ease-in-out infinite;
}

.mix365-auth-diagnostic.is-authenticated {
    border-color:
        rgba(42,210,120,0.44);
}

.mix365-auth-diagnostic.is-authenticated
.mix365-auth-light {
    background: #2ad278;

    box-shadow:
        0 0 20px
        rgba(42,210,120,0.62);
}

.mix365-auth-diagnostic.is-guest {
    border-color:
        rgba(255,176,32,0.38);
}

.mix365-auth-diagnostic.is-guest
.mix365-auth-light {
    background: #ffb020;

    box-shadow:
        0 0 18px
        rgba(255,176,32,0.48);
}

.mix365-auth-diagnostic.is-error {
    border-color:
        rgba(255,25,86,0.56);
}

.mix365-auth-diagnostic.is-error
.mix365-auth-light {
    background: #ff1956;

    box-shadow:
        0 0 20px
        rgba(255,25,86,0.6);
}

@keyframes mix365AuthPulse {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.88);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@media (max-width: 650px) {
    .mix365-auth-diagnostic {
        align-items: flex-start;
        flex-wrap: wrap;

        margin-bottom: 38px;
    }

    .mix365-auth-copy {
        width:
            calc(100% - 32px);
    }

    .mix365-auth-diagnostic button {
        width: 100%;
    }
}