/*
========================================
Login page styles
Version 2 (versioned to bust cache) 
========================================
*/
[data-page-id="login-login"],
[data-page-id="login-login-username"] {
    /* Flex row for Remember me and Forgot password link */
    div:has(>#kc-form-options) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .5rem;

        /* Right align the "Forgot password" link */
        &>div:nth-child(2) {
            text-align: right;
        }
        &>div:nth-child(2) a {
            color: var(--primary-400);
        }
    }

    #kc-registration span {
        visibility: hidden;
        height: 0px;
        overflow: hidden;

        a {
            margin-top: 1rem;
            visibility: visible;
            overflow: visible;
        }
        a::before {
            content: 'OR';
            color: var(--text-faint);
            height: 1px;
            pointer-events: none;
            position: absolute;
            transform: translateY(-3rem);
            width: 100%;
        }
    }


    #kc-social-providers {
        padding-top: 1.5rem;
    }

    #kc-social-providers::before {
        content: 'OR';
        color: var(--text-faint);
        height: 1px;
        pointer-events: none;
        position: absolute;
        text-align: center;
        transform: translateY(-1rem);
        width: 100%;
    }

    #kc-social-providers {
        h2, h4 {
            visibility: hidden;
            height: 0;
            overflow: hidden;
        }

        hr {
            visibility: hidden;
            height: 0;
            overflow: hidden;
            padding: 0.25rem 0;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        a#social-google,
        a#social-saml {
            position: relative;
        }

        a#social-saml {
            margin-top: 0.5rem;
        }

        a#social-google > span::before,
        a#social-saml > span::before {
            content: 'Sign in with ';
        }

        a#social-google > span::after,
        a#social-saml > span::after {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-left: 0.5rem;
            position: relative;
            top: 3px;
        }

        a#social-google > span::after {
            content: url("../../img/google.svg");
        }

        a#social-saml > span::after {
            content: url("../../img/onelogin.svg");
        }
    }

    a[href^="/realms/myrealm/login-actions/reset-credentials"] {
        color: var(--text-primary);
    }

    .terms-and-privacy {
        text-align: center;
        margin-top: 1rem;
        font-size: 0.75rem;
        color: var(--text-faint);
        line-height: 1.5;
    }

    .terms-and-privacy a {
        color: var(--primary-400);
    }
}