:root.light {
    --login-cover-image: url("/ui/cover/light");
}

:root.dark {
    --login-cover-image: url("/ui/cover/dark");
}

body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

/* Logo */
:root:not(.light) .logo-light {
    display: none;
}

:root:not(.dark) .logo-dark {
    display: none;
}

/* Content */
.login-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    color: var(--color-login-text);
    background-color: var(--color-login-background);
    box-shadow: var(--shadow-content);
    text-align: center;
    overflow: auto;
}

.login-title {
    font-size: var(--font-size-lg);
    font-weight: 500;
}

.login-description {
    font-size: var(--font-size-md);
    opacity: 75%;
}

.login-form-container {
    padding: var(--spacing-xl);
}

.login-form-loading {
    display: flex;
    justify-content: center;
}

/* Logo */
.login-logo {
    display: flex;
    justify-content: center;
    padding: var(--spacing-xl) 0;
}

.login-logo img {
    max-width: 12.5em;
}

/* Footer */
.login-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    margin-top: auto;
}

.login-actions {
    display: flex;
    align-items: start;
}

.login-actions dw-live-color-scheme-selector::part(toggle) {
    color: var(--color-login-text);
}

.login-copyright {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    opacity: 50%;
}

/* Cover Image */
.login-cover {
    display: none;
    background-image: var(--login-cover-image);
    background-size: cover;
    background-position: center;
}

/* Screen: Large */
@media screen and (min-width: 60em) {
    body {
        grid-template-columns: 30em minmax(0, 1fr);
    }

    .login-title {
        font-size: 1.5rem;
    }

    .login-cover {
        display: block;
    }
}

@media screen and (max-width: 60em) {
    .login-form-container {
        display: flex;
        justify-content: center;
    }
}