@use "theme/globals" as *;

:host {
    ion-content,
    ion-list {
        --background: var(--core-login-background);
        --ion-item-background: var(--core-login-background);
        --color: var(--core-login-text-color);
    }

    ion-item ion-label {
        --color: var(--core-login-text-color);

        p, h2, h3, .core-oauth-icon {
            color: var(--color);
        }
    }

    ion-button.core-button-as-link {
        --color: var(--core-login-text-color);
        text-decoration-color: var(--color);
    }

    .core-login-reconnect-warning {
        margin: 0px 0px 32px 0px;
    }

    .core-login-info-box {
        margin-bottom: 32px;

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

                img {
                    max-width: 100%;
                    max-height: 104px;
                }
            }

            .core-sitename {
                font-size: 1.2rem;
                margin-bottom: 8px;
            }

            .core-siteurl {
                margin-top: 8px;
                margin-bottom: 0px;
            }
        }

        .core-login-site + .core-login-user {
            margin-top: 24px;
        }
    }

    core-user-avatar.large-avatar {
        --core-avatar-size: var(--core-large-avatar-size);
    }

    .core-login-fullname {
        margin-top: 8px;
        margin-bottom: 0px;
    }

    .core-login-methods {
        form .item,
        form .item ion-label {
            --background: var(--core-login-input-background);
            --color: var(--core-login-input-color);
        }
    }

    ion-button {
        margin-left: 0px;
        margin-right: 0px;
    }

    .core-login-forgotten-password {
        text-decoration: underline;
    }

    @if ($core-login-hide-forgot-password) {
        .core-login-forgotten-password {
            display: none;
        }
    }

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

    @if ($core-login-button-outline) {
        form ion-button {
            --background: white;
            --color: var(--core-login-background);
        }
    }

    @if ($core-login-loading-color) {
        core-loading {
            --loading-background: var(--core-login-background);
            --loading-text-color: #{$core-login-loading-color};
            --loading-spinner: #{$core-login-loading-color};
        }
    }

    .core-login-methods-separator {
        position: relative;
        padding: 8px 0;

        span {
            background: var(--core-login-background);
            padding: 0 8px;
        }

        &::before {
            height: 1px;
            position: absolute;
            top: 50%;
            left: 0px;
            right: 0px;
            border-bottom: 1px solid var(--gray-300);
            content: "";
            z-index: -1;
        }
    }


    @if ($core-login-hide-qrcode) {
        .core-login-site-qrcode,
        .core-login-methods-separator {
            display: none;
        }
    }

    .core-login-login-button {
        margin-top: 32px;
    }

    .core-login-login-inbrowser-button {
        margin-bottom: 8px;
    }

    p.core-login-inbrowser {
        font-size: 12px;
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .core-login-sign-up {
        margin-top: 8px;
        border-top: 1px solid var(--gray-300);
    }

    .core-login-identity-providers h2,
    .core-login-sign-up h2 {
        margin-top: 16px;
        margin-bottom: 8px;
        font-size: 16px;
    }

}

:host-context(html.dark) {
    @if ($core-login-button-outline-dark) {
        form ion-button {
            --background: white;
            --color: var(--core-login-background-dark);
        }
    }

    @if ($core-login-loading-color-dark) {
        core-loading {
            --loading-background: var(--core-login-background-dark);
            --loading-text-color: #{$core-login-loading-color-dark};
            --loading-spinner: #{$core-login-loading-color-dark};
        }
    }
}