:root {
  --asteron-logo-dark: #171912;
  --asteron-logo-accent: #cfff50;
  --asteron-logo-tile: var(--asteron-logo-dark);
  --asteron-logo-mark: var(--asteron-logo-accent);
}

:root[data-theme="dark"] {
  --asteron-logo-dark: #171912;
  --asteron-logo-accent: #cfff50;
  --asteron-logo-tile: var(--asteron-logo-accent);
  --asteron-logo-mark: var(--asteron-logo-dark);
}

:root[data-theme="ocean"] {
  --asteron-logo-dark: #16353d;
  --asteron-logo-accent: #8dd6de;
  --asteron-logo-tile: var(--asteron-logo-dark);
  --asteron-logo-mark: var(--asteron-logo-accent);
}

:root[data-theme="forest"] {
  --asteron-logo-dark: #1c3324;
  --asteron-logo-accent: #b9d56b;
  --asteron-logo-tile: var(--asteron-logo-dark);
  --asteron-logo-mark: var(--asteron-logo-accent);
}

:root[data-theme="sunset"] {
  --asteron-logo-dark: #3d251b;
  --asteron-logo-accent: #e5aa78;
  --asteron-logo-tile: var(--asteron-logo-dark);
  --asteron-logo-mark: var(--asteron-logo-accent);
}

:root[data-theme="violet"] {
  --asteron-logo-dark: #2c213c;
  --asteron-logo-accent: #b9a5d8;
  --asteron-logo-tile: var(--asteron-logo-dark);
  --asteron-logo-mark: var(--asteron-logo-accent);
}

:root[data-theme="rose"] {
  --asteron-logo-dark: #3c2228;
  --asteron-logo-accent: #d9a2a8;
  --asteron-logo-tile: var(--asteron-logo-dark);
  --asteron-logo-mark: var(--asteron-logo-accent);
}

:is(
  .logo-mark,
  .settings-brand-mark,
  .asx-platform-brand > span:first-child,
  .asx-platform-loading > span:first-child,
  .owner-brand-mark,
  .asteron-pwa-install__mark,
  .asteron-brand-mark-v267,
  .brand > .mark,
  body > main.card > .brand > .logo
) {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  background: var(--asteron-logo-tile) !important;
  font-size: 0 !important;
  text-indent: -9999px;
}

:is(
  .logo-mark,
  .settings-brand-mark,
  .asx-platform-brand > span:first-child,
  .asx-platform-loading > span:first-child,
  .owner-brand-mark,
  .asteron-pwa-install__mark,
  .asteron-brand-mark-v267,
  .brand > .mark,
  body > main.card > .brand > .logo
)::after {
  display: block;
  width: 76%;
  height: 76%;
  margin: auto;
  background: var(--asteron-logo-mark);
  content: "";
  -webkit-mask: url("/brand/asteron-crm-mark.svg?v=267") center / contain no-repeat;
  mask: url("/brand/asteron-crm-mark.svg?v=267") center / contain no-repeat;
}

.asx-platform-brand:not(.dark) > span:first-child,
.asteron-pwa-install__mark {
  --asteron-logo-tile: var(--asteron-logo-accent);
  --asteron-logo-mark: var(--asteron-logo-dark);
}

.settings-brand-mark::after,
.asx-platform-loading > span:first-child::after {
  width: 72%;
  height: 72%;
}

.asteron-brand-mark-v267::after {
  width: 72%;
  height: 72%;
}

.owner-brand-mark::after,
.brand > .mark::after,
body > main.card > .brand > .logo::after {
  width: 74%;
  height: 74%;
}

@media (forced-colors: active) {
  :is(
    .logo-mark,
    .settings-brand-mark,
    .asx-platform-brand > span:first-child,
    .asx-platform-loading > span:first-child,
    .owner-brand-mark,
    .asteron-pwa-install__mark,
    .asteron-brand-mark-v267,
    .brand > .mark,
    body > main.card > .brand > .logo
  ) {
    border: 1px solid CanvasText;
    background: Canvas !important;
  }

  :is(
    .logo-mark,
    .settings-brand-mark,
    .asx-platform-brand > span:first-child,
    .asx-platform-loading > span:first-child,
    .owner-brand-mark,
    .asteron-pwa-install__mark,
    .asteron-brand-mark-v267,
    .brand > .mark,
    body > main.card > .brand > .logo
  )::after {
    background: CanvasText;
  }
}