@import url("./basis-cursor.css");

/* Soft Horizon. React and every static shell use these same vector assets. */
:root {
  --basis-mark-color: url("/brand/soft-horizon.svg");
  --basis-mark-white: url("/brand/soft-horizon-white.svg");
}
.basis-logo {
  --basis-logo-size: 26px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--basis-logo-size) * 0.32);
  flex: none;
  vertical-align: middle;
  line-height: 1;
}
.basis-logo-mark {
  display: block;
  flex: none;
  width: var(--basis-logo-size);
  height: var(--basis-logo-size);
  background: var(--basis-mark-image, var(--basis-mark-color)) center / contain no-repeat;
}
.basis-logo-wordmark {
  display: block;
  flex: none;
  width: calc(var(--basis-logo-size) * 2.537808);
  height: calc(var(--basis-logo-size) * 0.833333);
  background-color: currentColor;
  -webkit-mask: url("/brand/wordmark.svg") center / 100% 100% no-repeat;
  mask: url("/brand/wordmark.svg") center / 100% 100% no-repeat;
}
.basis-logo--white .basis-logo-mark {
  background-image: var(--basis-mark-white);
}

/* Match the existing text-color states of sample, legal and React navbars.
   The wordmark already follows currentColor; the symbol must switch too. */
.basis-logo.brand-name,
.glass-nav .basis-logo,
.nav-wrap nav .basis-logo {
  --basis-mark-image: var(--basis-mark-white);
}
.pill-nav.is-light .basis-logo,
nav.nav-light .basis-logo,
.glass-nav.is-light .basis-logo,
.portal-shell .glass-nav .basis-logo {
  --basis-mark-image: var(--basis-mark-color);
}
[data-theme="dark"] .pill-nav .basis-logo,
[data-theme="dark"] .glass-nav .basis-logo,
[data-theme="dark"] .portal-shell .glass-nav .basis-logo {
  --basis-mark-image: var(--basis-mark-white);
}