/* jupyterlite-sphinx ships no CSS for the interactive-example buttons
   (.try_examples_button: "Try it live", "Go Back", "Open In Tab"), so they fall
   back to raw browser button styling that clashes with the sphinx-book-theme.
   Style them with the theme's pydata CSS variables so they match the theme and
   follow light/dark mode automatically. */

.try_examples_button_container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}

.try_examples_button {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  font-family: var(--pst-font-family-base);
  font-size: var(--pst-font-size-milli, 0.85rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--pst-color-primary-text, #fff);
  background-color: var(--pst-color-primary);
  border: 1px solid var(--pst-color-primary);
  border-radius: 0.25rem;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.try_examples_button:hover,
.try_examples_button:focus {
  background-color: var(
    --pst-color-primary-highlight,
    var(--pst-color-primary)
  );
  border-color: var(--pst-color-primary-highlight, var(--pst-color-primary));
  color: var(--pst-color-primary-highlight-text, #fff);
  box-shadow: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.25);
}

.try_examples_button:focus-visible {
  outline: 2px solid var(--pst-color-accent, currentColor);
  outline-offset: 2px;
}