/* Use the supplied artwork at its original proportions, without a logo badge. */
.brand .brand-logo,
.brand-link .brand-logo,
.login-panel-brand .brand-logo {
  display: inline-flex;
  align-items: center;
  width: var(--brand-logo-width, 168px);
  max-width: 100%;
  padding: 6px 8px;
  box-sizing: border-box;
  background: transparent;
  flex-shrink: 0;
}
.brand-logo .brand-wordmark,
.login-panel-brand .brand-wordmark {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] .brand-wordmark {
  /* Remove the image's white backing against dark chrome. Rotate the inverted
     hue back to turquoise and lift it along with the now-white lettering. */
  filter: invert(1) hue-rotate(180deg) brightness(1.6);
  mix-blend-mode: screen;
}
.workspace-rail .brand-link { --brand-logo-width: 164px; }
.workspace-rail .brand-link small { margin-top: 7px; padding-left: 8px; }
.login-panel-brand { --brand-logo-width: 260px; }
.auth-page .login-panel-brand { align-items: flex-start; gap: 10px; }
.auth-page .login-panel-brand > span:last-child { padding-left: 8px; }
.admin-console .brand .product-lockup { gap: 3px; }
.admin-console .brand .product-lockup small { padding-left: 8px; }
@media (max-width: 560px) {
  .brand, .brand-link { --brand-logo-width: 144px; }
  .workspace-rail .brand-link { --brand-logo-width: 152px; }
  .login-panel-brand { --brand-logo-width: 236px; }
}