/* Used by account auth views rendered through Views/Shared/_AuthLoginLayout.cshtml; emitted as ~/features/auth-login.css. */
@layer components {
    #login-form .login-hero-icon {
        float: left;
        inline-size: 100px;
        block-size: 100px;
        color: var(--app-auth-button-text);
        font-size: 38px;
        box-shadow: none !important;
    }

    #login-form .login-hero-icon + div {
        float: right;
        inline-size: 318px;
    }

    #login-form .login-hero-icon + div > :first-child {
        margin: 0 0 10px;
        font-size: 24px;
        font-weight: 300;
        line-height: 1.2;
    }

    #login-form .login-errors {
        margin: 9px 0 12px;
    }

    #login-form .login-error-item {
        margin: 0 0 8px;
        font-size: 13px;
        line-height: 1.35;
    }

    .qr-login-card {
        padding: 15px 17px 18px;
    }

    .qr-login-card h2 {
        margin-block: 0 9px;
        text-align: center;
    }

    .qr-login-card p {
        margin-block-end: 12px;
    }

    .qr-code-frame {
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 238px;
        block-size: 238px;
        margin: 0 auto 14px;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--app-auth-card-border) 72%, var(--app-base-white) 28%);
        border-radius: var(--auth-control-radius);
        background: var(--app-base-white);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-base-black) 4%, transparent);
    }

    .qr-code-frame.qr-code-expired img,
    .qr-code-frame.qr-code-expired canvas,
    .qr-code-frame.qr-code-expired svg {
        opacity: 0.55;
        filter: blur(6px);
        transition: filter 0.18s ease, opacity 0.18s ease;
    }

    .qr-code-frame > svg,
    .qr-code-frame > canvas,
    .qr-code-frame > img {
        display: block;
        inline-size: 220px;
        block-size: 220px;
        border-radius: 2px;
        background: var(--app-base-white);
    }

    .qr-code-frame > svg {
        color: var(--app-base-black);
        fill: var(--app-base-black);
    }

    .qr-display-code {
        margin-block-end: 7px;
        color: var(--app-auth-button-text);
    }

    .qr-status {
        min-block-size: 22px;
        margin-block-end: 10px;
        color: var(--app-text-muted);
        text-align: center;
    }

    .qr-status.qr-status-error {
        color: var(--app-auth-error-text);
    }

    .qr-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-block-start: 12px;
    }

    @media (max-width: 520px) {
        #login-form .login-hero-icon {
            float: none;
            inline-size: 76px;
            block-size: 76px;
            margin: 0 auto 14px;
            border-radius: var(--auth-icon-radius);
            font-size: 30px;
        }

        #login-form .login-hero-icon + div {
            float: none;
            inline-size: 100%;
        }
    }
}