@mixin auth-form-light {
    .login {
        .box {
            border-color: rgba(255, 255, 255, 0.5);
            background: rgba(255, 255, 255, 0.92);
            box-shadow:
                0 8px 24px rgba(27, 58, 107, 0.12),
                0 2px 8px rgba(27, 58, 107, 0.06);
        }

        .control .input,
        .control.has-icons-left .input,
        .control.has-icons-right .input,
        .control .select select {
            background-color: #ffffff !important;
            border-color: #c6d3e1 !important;
            color: #0f172a !important;

            &::placeholder { color: #64748b !important; }
        }

        .control .icon         { color: #64748b !important; }
        .control .icon.is-left { color: #475569 !important; }

        .checkbox,
        .help,
        .label { color: #1e293b !important; }

        .auth-footer-link {
            color: #334155;
            &:hover { color: #0f172a; }
        }
    }
}

@mixin auth-form-dark {
    .login {
        .box {
            border-color: #344052;
            background: #181e28;
        }

        .control .input,
        .control.has-icons-left .input,
        .control.has-icons-right .input,
        .control .select select {
            background-color: #0f131a !important;
            border-color: #344052 !important;
            color: #f3f6fb !important;

            &::placeholder { color: #94a3b8 !important; }
        }

        .control .icon         { color: #94a3b8 !important; }
        .control .icon.is-left { color: #94a3b8 !important; }

        .checkbox,
        .help,
        .label { color: #d7deea !important; }

        .auth-footer-link {
            color: #d7deea;
            &:hover { color: #f3f6fb; }
        }
    }
}

.login {
    max-width: 400px;
    margin: auto;

    .box {
        border-radius: 1.25rem;
        border: 1px solid;
        box-shadow: var(--bulma-box-shadow);
        backdrop-filter: blur(14px);
    }

    form {
        margin-bottom: 0;
    }

    .control :is(.input, .textarea, .select select):hover {
        border-color: var(--bulma-border-hover);
    }

    .control :is(.input, .textarea, .select select):focus,
    .control :is(.input, .textarea, .select select):focus-visible,
    .control :is(.input, .textarea, .select select).is-focused,
    .control :is(.input, .textarea, .select select).is-active {
        border-color: var(--bulma-border-active);
        box-shadow: none;
    }

    .checkbox {
        font-size: 0.9rem;
    }

    .auth-footer-link {
        font-weight: 600;
        text-decoration: none;
        text-shadow: none;
    }

    .is-spaced {
        margin-right: 1.6em;
    }
}

[data-theme='light'],
:root:not([data-theme='dark']) {
    @include auth-form-light;
}

[data-theme='dark'] {
    @include auth-form-dark;
}

@media (prefers-color-scheme: dark) {
    @include auth-form-dark;
}

@media (prefers-color-scheme: light) {
    @include auth-form-light;
}