.eu-ai-label {
  align-items: center;
  gap: 0.4em;
}

.eu-ai-label-block {
  display: flex;
  margin: 0 0 1em;
}

.eu-ai-label-align-left {
  justify-content: flex-start;
}

.eu-ai-label-align-center {
  justify-content: center;
}

.eu-ai-label-align-right {
  justify-content: flex-end;
}

.eu-ai-label-inline {
  display: inline-flex;
  gap: 0.25em;
  vertical-align: middle;
}

.eu-ai-label img.eu-ai-label-icon {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
}

.eu-ai-label img.eu-ai-label-icon-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .eu-ai-label img.eu-ai-label-icon-light {
    display: none;
  }

  .eu-ai-label img.eu-ai-label-icon-dark {
    display: block;
  }
}

/*
 * Themes with their own light/dark switch set data-theme on <html> (PyData, Book) or <body> (Furo). These rules are
 * more specific than the media query above, so the theme's choice wins. Furo's data-theme="auto" matches neither, so
 * falls back to prefers-color-scheme.
 */
[data-theme="light"] .eu-ai-label img.eu-ai-label-icon-light,
[data-theme="dark"] .eu-ai-label img.eu-ai-label-icon-dark {
  display: block;
}

[data-theme="light"] .eu-ai-label img.eu-ai-label-icon-dark,
[data-theme="dark"] .eu-ai-label img.eu-ai-label-icon-light {
  display: none;
}