$core-login-page-background-color: $white !default;
$core-login-page-text-color: $text-color !default;
$core-login-button-outline: false !default;
$core-login-loading-color: false !default;
$core-login-input-item-background-color: $core-login-page-background-color !default;
$core-login-input-item-text-color: $core-login-page-text-color !default;

// Dark.
$core-dark-login-page-background-color: $black !default;
$core-dark-login-page-text-color: $core-dark-text-color !default;
$core-dark-login-button-outline: $core-login-button-outline !default;
$core-dark-login-loading-color: $core-dark-text-color !default;
$core-dark-input-login-item-background-color: $core-dark-login-page-background-color !default;
$core-dark-input-login-item-text-color: $core-dark-login-page-text-color !default;

ion-app.app-root page-core-login-credentials,
ion-app.app-root page-core-login-reconnect,
ion-app.app-root page-core-login-site {
    .scroll-content {
        background: $core-login-page-background-color;
        color: $core-login-page-text-color;

        @include darkmode() {
            background: $core-dark-login-page-background-color;
            color: $core-dark-login-page-text-color;
        }
    }

    .item p, .item h2, .item h3, .list .item.core-oauth-icon .label, .text-input {
        color: $core-login-page-text-color;
        @include darkmode() {
            color: $core-dark-login-page-text-color;
        }
    }

    img {
        max-width: 100%;
    }

    .core-sitename, .core-siteurl {
        @if $core-fixed-url { display: none; }
    }

    .core-sitename + .core-siteurl  {
        margin-top: 0;
    }

    .core-sitename {
        font-size: 1.8rem;
    }

    @if $core-login-button-outline {
        .button-md.button-default-md, .button-ios.button-default-ios {
            @extend .button-md-light;
        }
    }

    @if $core-login-loading-color {
        .core-loading-container {
            color: $core-login-loading-color;

            .spinner circle, .spinner line {
                stroke: $core-login-loading-color;
            }
        }
    }

    @if $core-dark-login-button-outline {
        .button-md.button-default-md, .button-ios.button-default-ios {
            @extend .button-md-light;
        }
    }

    @include darkmode() {
        .core-loading-container {
            color: $core-dark-login-loading-color;

            .spinner circle, .spinner line {
                stroke: $core-dark-login-loading-color;
            }
        }
    }

    .item-input {
        margin-bottom: 20px;
    }


    .core-login-form .item,
    .core-login-form .item-inner {
        background-color: $core-login-input-item-background-color;
        @include darkmode() {
            background-color: $core-dark-input-login-item-background-color;
        }

        p, input {
            color: $core-login-input-item-text-color;
            @include darkmode() {
                color: $core-dark-input-login-item-text-color;
            }
        }
    }

    ion-list.core-login-forgotten-password {
        margin-top: 0;
        margin-bottom: 0;

        a.item {
            background: transparent;
            text-decoration: underline;

            @include darkmode() {
                background: transparent;
            }

            color: $core-login-page-text-color;
        }
    }

    .core-login-site-logo {
        width: 90%;
        max-width: 300px;
        margin: 5px auto;
    }

    .item.item-block {
        background: transparent;

        @include darkmode() {
            background: transparent;
        }
    }

    .core-login-site-qrcode-separator {
        text-align: center;
        margin-top: 12px;
        font-size: 1.2em;
    }
}