/*
 |--------------------------------------------------------------------------
 | Guest view styles
 |--------------------------------------------------------------------------
 */

:root {
    --wb-cms-brand-primary: #118AB2;
    --wb-cms-brand-primary-hover: #0B6482;
    --wb-cms-brand-soft: #D9F0F7;
    --wb-primary: var(--wb-cms-brand-primary);
    --wb-primary-hover: var(--wb-cms-brand-primary-hover);
    --wb-accent: var(--wb-cms-brand-primary);
    --wb-accent-hover: var(--wb-cms-brand-primary-hover);
    --wb-accent-soft: var(--wb-cms-brand-soft);
    --wb-accent-text: var(--wb-cms-brand-primary-hover);
    --wb-accent-on: #fff;
    --wb-accent-contrast: #fff;
}

.wb-auth-brand {
    align-items: center;
    display: inline-flex;
    gap: var(--wb-space-3, 0.75rem);
}

.wb-auth-brand-mark,
svg.wb-auth-brand-mark {
    block-size: 3rem;
    display: block;
    flex: 0 0 auto;
    inline-size: 3rem;
}

.wb-auth-brand-mark svg {
    block-size: 100%;
    display: block;
    inline-size: 100%;
}

.wb-auth-brand-mark-sm,
svg.wb-auth-brand-mark-sm {
    block-size: 2rem;
    inline-size: 2rem;
}

.wb-auth-brand-mark-on-accent {
    color: var(--wb-accent-on);
}

.wb-auth-brand-mark-on-surface {
    color: var(--wb-accent);
}

.wb-password-field {
    align-items: stretch;
}

.wb-password-field-toggle {
    min-width: 2.75rem;
}