@layer components {
  .ui-logo {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: var(--logo-size-md);
    height: var(--logo-size-md);
    border-radius: var(--logo-radius);
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-weight: 700;
    font-size: var(--logo-font-size-md);
    line-height: 1;
    user-select: none;
  }

  .ui-logo-glyph {
    --logo-glyph-advance-width: max(
      var(--logo-glyph-fullwidth-width),
      calc(
        var(--logo-glyph-fullwidth-count, 0) * var(--logo-glyph-fullwidth-width) +
          var(--logo-glyph-wide-count, 0) * var(--logo-glyph-wide-width) +
          var(--logo-glyph-narrow-count, 0) * var(--logo-glyph-narrow-width) +
          var(--logo-glyph-space-count, 0) * var(--logo-glyph-space-width)
      )
    );

    white-space: nowrap;
    font-size: min(
      var(--logo-font-size-md),
      calc(var(--logo-size-md) * var(--logo-glyph-fit-max-width) / var(--logo-glyph-advance-width))
    );
    translate: 0 var(--logo-glyph-optical-offset, 0em);
  }

  .ui-logo[data-size="xs"] .ui-logo-glyph {
    font-size: min(
      var(--logo-font-size-xs),
      calc(var(--logo-size-xs) * var(--logo-glyph-fit-max-width) / var(--logo-glyph-advance-width))
    );
  }

  .ui-logo[data-size="sm"] .ui-logo-glyph {
    font-size: min(
      var(--logo-font-size-sm),
      calc(var(--logo-size-sm) * var(--logo-glyph-fit-max-width) / var(--logo-glyph-advance-width))
    );
  }

  .ui-logo[data-size="lg"] .ui-logo-glyph {
    font-size: min(
      var(--logo-font-size-lg),
      calc(var(--logo-size-lg) * var(--logo-glyph-fit-max-width) / var(--logo-glyph-advance-width))
    );
  }

  .ui-logo-glyph[data-ink="cap-baseline"] {
    translate: 0 var(--logo-glyph-optical-offset, var(--logo-glyph-cap-baseline-optical-offset));
  }

  .ui-logo-glyph[data-ink="cap-descender"] {
    translate: 0 var(--logo-glyph-optical-offset, var(--logo-glyph-cap-descender-optical-offset));
  }

  .ui-logo-glyph[data-ink="x-baseline"] {
    translate: 0 var(--logo-glyph-optical-offset, var(--logo-glyph-x-baseline-optical-offset));
  }

  .ui-logo-glyph[data-ink="x-descender"] {
    translate: 0 var(--logo-glyph-optical-offset, var(--logo-glyph-x-descender-optical-offset));
  }

  .ui-logo[data-size="xs"] {
    width: var(--logo-size-xs);
    height: var(--logo-size-xs);
    font-size: var(--logo-font-size-xs);
  }

  .ui-logo[data-size="sm"] {
    width: var(--logo-size-sm);
    height: var(--logo-size-sm);
    font-size: var(--logo-font-size-sm);
  }

  .ui-logo[data-size="lg"] {
    width: var(--logo-size-lg);
    height: var(--logo-size-lg);
    font-size: var(--logo-font-size-lg);
  }

  .ui-logo[data-tone="success"] {
    background: hsl(var(--logo-success-background, var(--brand)));
    color: hsl(var(--logo-success-foreground, var(--logo-identity-foreground)));
  }

  .ui-logo[data-mark="godx"] {
    width: var(--logo-godx-size, var(--logo-godx-size-md));
    height: var(--logo-godx-size, var(--logo-godx-size-md));
    border-radius: 0;
    background: transparent;
  }

  .ui-logo[data-mark="godx"][data-size="xs"] {
    width: var(--logo-godx-size, var(--logo-godx-size-xs));
    height: var(--logo-godx-size, var(--logo-godx-size-xs));
  }

  .ui-logo[data-mark="godx"][data-size="sm"] {
    width: var(--logo-godx-size, var(--logo-godx-size-sm));
    height: var(--logo-godx-size, var(--logo-godx-size-sm));
  }

  .ui-logo[data-mark="godx"][data-size="lg"] {
    width: var(--logo-godx-size, var(--logo-godx-size-lg));
    height: var(--logo-godx-size, var(--logo-godx-size-lg));
  }

  .ui-logo[data-mark="godx-lockup"] {
    width: auto;
    height: var(--logo-godx-size, var(--logo-godx-size-md));
    border-radius: 0;
    background: transparent;
  }

  .ui-logo[data-mark="godx-lockup"][data-size="xs"] {
    height: var(--logo-godx-size, var(--logo-godx-size-xs));
  }

  .ui-logo[data-mark="godx-lockup"][data-size="sm"] {
    height: var(--logo-godx-size, var(--logo-godx-size-sm));
  }

  .ui-logo[data-mark="godx-lockup"][data-size="lg"] {
    height: var(--logo-godx-size, var(--logo-godx-size-lg));
  }

  .ui-logo[data-mark="godx-lockup"] [data-slot="logo-artwork"] {
    display: block;
    height: 100%;
    width: auto;
  }

  .ui-logo[data-mark="godx"] [data-slot="logo-artwork"] {
    display: block;
    width: 100%;
    height: 100%;
  }

  .ui-logo-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--logo-wordmark-gap);
  }

  .ui-logo-lockup .ui-logo-wordmark {
    font-family: var(--logo-wordmark-font-family, var(--font-family-display));
    font-size: var(--logo-wordmark-font-size-md);
    font-weight: var(--logo-wordmark-font-weight);
    letter-spacing: var(--logo-wordmark-letter-spacing);
    line-height: 1;
    color: hsl(var(--logo-wordmark-color, var(--foreground)));
    white-space: nowrap;
  }

  .ui-logo-lockup[data-size="xs"] .ui-logo-wordmark,
  .ui-logo-lockup[data-size="xs"] .ui-logo-product-suffix {
    font-size: var(--logo-wordmark-font-size-xs);
  }

  .ui-logo-lockup[data-size="sm"] .ui-logo-wordmark,
  .ui-logo-lockup[data-size="sm"] .ui-logo-product-suffix {
    font-size: var(--logo-wordmark-font-size-sm);
  }

  .ui-logo-lockup[data-size="lg"] .ui-logo-wordmark,
  .ui-logo-lockup[data-size="lg"] .ui-logo-product-suffix {
    font-size: var(--logo-wordmark-font-size-lg);
  }

  .ui-logo-lockup[data-mark="godx"] .ui-logo-wordmark,
  .ui-logo-lockup[data-tone="success"] .ui-logo-wordmark {
    color: hsl(var(--logo-wordmark-color, var(--logo-godx-color, var(--brand))));
  }

  .ui-logo-lockup .ui-logo-product-suffix {
    display: inline-flex;
    align-items: center;
    gap: var(--logo-product-suffix-gap);
    font-family: var(--logo-wordmark-font-family, var(--font-family-display));
    font-size: var(--logo-wordmark-font-size-md);
    font-weight: var(--logo-product-suffix-font-weight);
    letter-spacing: var(--logo-wordmark-letter-spacing);
    line-height: 1;
    color: hsl(var(--logo-product-suffix-color, var(--foreground)));
    white-space: nowrap;
  }

  .ui-logo-lockup .ui-logo-product-suffix::before {
    content: "";
    flex: 0 0 auto;
    inline-size: var(--logo-divider-width);
    block-size: var(--logo-divider-height);
    border-radius: var(--logo-divider-width);
    background: hsl(
      var(--logo-divider-color, var(--logo-godx-ink-color)) / var(--logo-divider-alpha)
    );
  }
}

[data-slot="logo-artwork"][data-scheme="dark"] {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-slot="logo-artwork"][data-scheme="light"] {
    display: none;
  }
  :root:not([data-theme="light"]) [data-slot="logo-artwork"][data-scheme="dark"] {
    display: block;
  }
}

.dark [data-slot="logo-artwork"][data-scheme="light"],
:root[data-theme="dark"] [data-slot="logo-artwork"][data-scheme="light"] {
  display: none;
}

.dark [data-slot="logo-artwork"][data-scheme="dark"],
:root[data-theme="dark"] [data-slot="logo-artwork"][data-scheme="dark"] {
  display: block;
}