/* Custom styles for configurator containers that adapt to MkDocs theme */

.widget-configurator-container {
  /* Light theme styles (default) */
  background-color: var(--md-default-bg-color, #ffffff);
  border: 1px solid var(--md-default-fg-color--lightest, rgba(0, 0, 0, 0.12));
  color: var(--md-default-fg-color, #000000);
}

/* Dark theme styles when slate scheme is active */
[data-md-color-scheme="slate"] .widget-configurator-container {
  background-color: #111;
  border: 1px solid
    var(--md-default-fg-color--lightest, rgba(255, 255, 255, 0.12));
  color: var(--md-default-fg-color, #ffffff);
}

/* Alternative approach using CSS custom properties that MkDocs Material sets */
.widget-configurator-container {
  background-color: var(--md-code-bg-color, #f5f5f5);
  border: 1px solid var(--md-typeset-table-color, rgba(0, 0, 0, 0.12));
}

[data-md-color-scheme="slate"] .widget-configurator-container {
  background-color: #111;
  border: 1px solid var(--md-typeset-table-color, rgba(255, 255, 255, 0.12));
}