/* TrinityBrands application identity. Reserved UI sprite IDs exclude user artwork. */
:root { --trinity-wordmark: url('/branding/logo-white.png'); }
.light { --trinity-wordmark: url('/branding/logo.png'); }

svg:has(> use[href='#icon-penpot-logo']),
svg:has(> use[href='#asset-penpot-logo']) {
  background: var(--trinity-wordmark) center / contain no-repeat;
}
svg:has(> use[href='#icon-penpot-logo-icon']),
svg:has(> use[href='#asset-penpot-logo-icon']),
svg:has(> use[href='#icon-penpot-logo-icon-loader']),
svg:has(> use[href='#asset-penpot-logo-subtle']),
svg:has(> use[href='#icon-brand-openid']),
svg:has(> use[href='#asset-brand-openid']) {
  background: url('/branding/icon.png') center / contain no-repeat;
}
use[href='#icon-penpot-logo'], use[href='#asset-penpot-logo'],
use[href='#icon-penpot-logo-icon'], use[href='#asset-penpot-logo-icon'],
use[href='#icon-penpot-logo-icon-loader'], use[href='#asset-penpot-logo-subtle'],
use[href='#icon-brand-openid'], use[href='#asset-brand-openid'] { opacity: 0; }

.main_ui_auth__logo-btn { width: 190px; height: 64px; }
.main_ui_auth__logo-btn svg { width: 100%; height: 100%; }
.main_ui_auth__login-illustration {
  background: url('/branding/icon.png') center / min(48%, 320px) auto no-repeat,
    radial-gradient(ellipse at center, #ffbf0026, transparent 70%);
}
.main_ui_auth__login-illustration img { visibility: hidden; }
/* The authentication logo's original flex container is narrower than our wordmark. */
.main_ui_auth__logo-container { width: 190px; height: 64px; }
.main_ui_auth__logo-btn { flex: none; background: var(--trinity-wordmark) center / contain no-repeat; }
.main_ui_auth__logo-btn svg { visibility: hidden; }