/* ═══════════════════════════════════════════════════════════════════════
   Download Button — sits inside the code-block toolbar next to Copy.
   Always visible, same style as the native .md-clipboard button.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hide the original <p> wrapper (before JS relocates it) */
p:has(> a.download-btn) {
  display: none;
}

/* Once inside .highlight, mirror the .md-clipboard positioning & style */
.md-typeset .highlight .download-btn {
  position: absolute;
  top: 0.575em;
  right: 2.4em;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--md-default-fg-color--lightest) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0.1rem;
  cursor: pointer;
  text-decoration: none !important;
  transition: color 0.25s;
  line-height: 1;
}

/* Darken on code-block hover — same behaviour as .md-clipboard */
.md-typeset .highlight:hover .download-btn {
  color: var(--md-default-fg-color--light) !important;
}

/* Accent color on direct icon hover */
.md-typeset .highlight .download-btn:hover {
  color: var(--md-accent-fg-color, #536dfe) !important;
}

/* Center the twemoji span within the button box */
.md-typeset .highlight .download-btn .twemoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* Size the SVG to match the clipboard icon (1.2rem) */
.md-typeset .highlight .download-btn .twemoji svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: currentColor;
}