// ============================================================
// mkdocs-revealjs — revealjs-plugin.scss
//
// Compiled to:
//   revealjs-plugin.css       (readable — for debugging)
//   revealjs-plugin.min.css   (minified — used in production)
//
// Build:  yarn build   (or yarn scss)
// ============================================================

// ── Variables ─────────────────────────────────────────────────

$border-radius : 4px;
$height        : 600px;

// mkdocs-material CSS custom properties are used directly so the
// toolbar automatically adapts to both light and dark schemes
// without any extra SCSS.

// ── Wrapper ───────────────────────────────────────────────────

.mkdocs-revealjs-wrapper {
  width: 100%;
  position: relative;
  margin: 1.5rem 0;

  // The .reveal div fills the wrapper
  .reveal {
    width:         100% !important;
    height:        $height;
    border:        1px solid var(--md-default-fg-color--lightest, #e0e0e0);
    border-radius: $border-radius;
    overflow:      hidden;
    box-sizing:    border-box;
  }
}

// ── Toolbar (injected by revealjs-plugin.js) ──────────────────

.mkdocs-revealjs-toolbar {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             0.5rem;
  padding:         0.3rem 0.6rem;
  background:      var(--md-default-bg-color, #fff);
  border:          1px solid var(--md-default-fg-color--lightest, #e0e0e0);
  border-bottom:   none;
  border-radius:   $border-radius $border-radius 0 0;

  button {
    display:     inline-flex;
    align-items: center;
    gap:         0.3rem;
    background:  none;
    border:      none;
    cursor:      pointer;
    padding:     0.2rem 0.5rem;
    color:       var(--md-default-fg-color, #333);
    border-radius: 3px;
    font-size:   0.8rem;
    line-height: 1;
    transition:  background 0.15s ease;

    &:hover {
      background: var(--md-accent-fg-color--transparent, rgba(0,0,0,.07));
    }

    svg {
      width:          1em;
      height:         1em;
      vertical-align: middle;
      fill:           currentColor;
    }
  }
}

// ── Fullscreen state ──────────────────────────────────────────

.mkdocs-revealjs-wrapper:fullscreen,
.mkdocs-revealjs-wrapper:-webkit-full-screen,
.mkdocs-revealjs-wrapper:-moz-full-screen {
  background: #000;

  .reveal {
    height:        100vh !important;
    border:        none;
    border-radius: 0;
  }

  .mkdocs-revealjs-toolbar {
    position:      absolute;
    top:           0;
    right:         0;
    z-index:       1000;
    background:    rgba(0,0,0,.5);
    border:        none;
    border-radius: 0;

    button {
      color: #fff;

      &:hover {
        background: rgba(255,255,255,.15);
      }
    }
  }
}

// ── Dark-mode toolbar tint (slate scheme) ─────────────────────
// The Reveal.js presentation theme itself is handled in Python/JS.
// We only need to adjust the toolbar background for the dark scheme.

[data-md-color-scheme="slate"] .mkdocs-revealjs-toolbar {
  background: var(--md-default-bg-color, #1e1e2e);
}
