.vuiCodeContainer {
  position: relative;
  border-left: $sizeXxs solid $colorMediumShade;
  max-height: 480px;
}

.vuiCodeContainer--fullHeight {
  max-height: 100%;
}

.vuiCodeActions {
  position: absolute;
  right: $sizeS;
  top: $sizeXxs;
}

.vuiCodePre {
  padding: 0 !important;
  margin: 0 !important;
  max-height: inherit;
}

.vuiCode {
  display: block;
  width: 100%;
  padding: $sizeM $sizeL;
  background-color: $colorLightShade;
  color: $colorText;
  font-family: "Roboto Mono", monospace;
  // Ensure PrismJS components wrap their lines.
  word-wrap: break-word !important;
  white-space: pre-wrap !important;
  font-size: $fontSizeSmall !important;
}

.vuiCodeFullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: $fullscreenZIndex;
  // PrismJS theme color.
  background-color: #f5f2f0;
  overflow: auto;
}

.vuiCodeFullscreen__closeButton {
  position: absolute;
  right: $sizeS;
  top: $sizeXxs;
}