/* The official logo (<x-brand-logo>). Shared by the app layout and the sign-in pages.
   Each placement sets the size of its parts; the artwork keeps its own proportions. */

.brand-logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    line-height: 0;
}

.brand-logo-part {
    display: block;
    flex: 0 0 auto;
    min-width: 0;
}

/* Defaults; each placement sets its own size. */
.brand-logo-part-icon {
    width: 40px;
}

.brand-logo-part-wordmark {
    width: 150px;
}

.brand-logo-part-lockup {
    width: 260px;
}

.brand-logo-art {
    display: block;
    width: 100%;
    height: auto;
    -webkit-user-drag: none;
    user-select: none;
}

/* surface="auto" follows the app theme with the same rules the theme tokens use (tokens.css):
   light unless dark is chosen, or the system is dark and light is not chosen. The theme attribute
   is set in <head> before the body renders, so the right artwork is the first one painted. */
.brand-logo-on-auto .brand-logo-art-dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-logo-on-auto .brand-logo-art-dark {
        display: block;
    }

    :root:not([data-theme="light"]) .brand-logo-on-auto .brand-logo-art-light {
        display: none;
    }
}

:root[data-theme="dark"] .brand-logo-on-auto .brand-logo-art-dark {
    display: block;
}

:root[data-theme="dark"] .brand-logo-on-auto .brand-logo-art-light {
    display: none;
}