/* The Run link playground-button.js adds after the copy button, colored and shown like it.
   The selectors start at .doc to outweigh the UI bundle's toolbox and external-link rules. */
.doc .source-toolbox .play-button {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin-left: 1.25ch;
  color: inherit;
  text-decoration: none;
}

/* Filled like the copy icon, larger, so the triangle reads as one.
   Centering aligns it with the line box, whose middle sits below the middle of the letters. */
.doc .source-toolbox .play-icon {
  flex: none;
  width: 1.4em;
  height: 1.4em;
  fill: currentColor;
  transform: translateY(-0.15em);
}

/* The bundle marks every new-tab link of a page with an icon, a toolbox entry needs none. */
.doc .source-toolbox .play-button::after {
  content: none;
}

/* The copy button stacks its children, so the separator the bundle gives it as no longer the
   last entry would sit below its icon: the gap before Run is a margin instead. */
.doc .source-toolbox .copy-button::after {
  content: none;
}