/* ==========================================================================
   1. Labels
   ========================================================================== */

#kc-form-login .pf-c-form__label {
    display: none;
}

/* ==========================================================================
    2. Validation
   ========================================================================== */
#kc-passwd-update-form:invalid #kc-login {
    pointer-events: none;
    opacity: 0.5;
}

/* ==========================================================================
    3. Google sign-in
   ========================================================================== */

/* Google draws its button late, so keep exactly its space free to stop the page from jumping. */
#kc-google-sign-in .g_id_signin {
    min-height: 40px;
}

/* Google's button sits in an iframe it hangs 10px over each side of its box. PatternFly's
   reset caps every iframe at its box, which cuts that overhang, and with it the button's
   right edge. */
#kc-google-sign-in iframe {
    max-width: none;
}

/* Drawn like Google's own button, which it stands in for. */
#kc-google-sign-in-fallback {
    background-color: #FFFFFF;
    border: 1px solid #DADCE0;
    border-radius: 2.2rem;
    color: #3C4043;
    font-size: 1.4rem;
    padding: 1rem 2.4rem;
}

/* The button classes carry their own display, which beats the browser's rule for [hidden]. */
#kc-google-sign-in-fallback[hidden] {
    display: none;
}

/* ==========================================================================
    4. Microsoft sign-in
   ========================================================================== */

/* Border, radius and transition are Google's, so the button beside it looks the same. */
#kc-social-providers .kc-microsoft-sign-in {
    align-items: center;
    border: 1px solid #DADCE0;
    border-radius: 20px;
    color: #5E5E5E;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 12px;
    height: 40px;
    padding: 0 12px;
    text-decoration-line: none;
    transition: background-color .218s, border-color .218s;
}

/* Google's hover: its blue tint over white, and its lighter border. */
#kc-social-providers .kc-microsoft-sign-in:hover {
    background-color: #F0F5FE;
    border-color: #D2E3FC;
}

.kc-microsoft-sign-in__logo {
    height: 18px;
    width: 18px;
}

/* ==========================================================================
    5. Identity provider links
   ========================================================================== */

/* The theme drops the focus outline on every link, and both of these are links. */
#kc-google-sign-in-fallback:focus,
.kc-microsoft-sign-in:focus {
    outline: .2rem solid #2580db;
    outline-offset: .2rem;
}

/* Side by side, the buttons need more room than the card's padding leaves them, so the
   section reclaims it. The divider inside follows along. */
#kc-social-providers {
    margin: 0 -10rem;
}

/* The theme's row already centres and wraps; it only needs room between the buttons and
   their middles lined up. */
#kc-social-providers .kc-social-links {
    align-items: center;
    gap: 12px;
}

/* The password step of the email-first flow (readonly email) already offered them on step one. */
body:has(#username[readonly]) #kc-social-providers {
    display: none;
}