dvn-highlighted-code {
  display: inline-block;
  box-sizing: border-box;
  margin: calc(4 * var(--spacing-unit));
  border-radius: var(--corner-radius);
  background: var(--color-highlighted-code-background);
  padding: calc(2 * var(--spacing-unit)) calc(4 * var(--spacing-unit));
  position: relative;
  max-width: 100%;
  overflow: auto;
}

dvn-highlighted-code.condensed {
  padding: 0;
}

dvn-highlighted-code.condensed pre.prettyprint {
  margin: 8px;
}

dvn-highlighted-code.condensed .controls {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

dvn-highlighted-code pre.prettyprint {
  background: var(--color-highlighted-code-background);
}

dvn-highlighted-code.leaned {
  margin: 0;
}

dvn-highlighted-code:hover .controls {
  opacity: 1;
}

dvn-highlighted-code .controls {
  opacity: 0;
  transition: opacity .3s;
}

dvn-highlighted-code:not(.condensed) .controls dvn-button {
  position: absolute;
  bottom: calc(1 * var(--spacing-unit));
  right: calc(1 * var(--spacing-unit));
}
