.vuiCodeContainer {
  position: relative;
  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;
  background-color: var(--vui-color-light-shade) !important;
  border-radius: $sizeXxs;
  // Ensure scrolling in case prism doesn't apply the correct styles.
  overflow: auto;
}

.vuiCode {
  display: block;
  width: 100%;
  padding: $sizeM $sizeL;
  background-color: var(--vui-color-light-shade);
  color: var(--vui-color-text);
  font-family: var(--vui-font-family-monospace);
  // Ensure PrismJS components wrap their lines.
  word-wrap: break-word !important;
  // Ensure PrismJS components wrap their lines instead of making the container super-wide.
  word-break: break-word !important;
  white-space: pre-wrap !important;
  font-size: $fontSizeSmall !important;
  color: var(--vui-color-dark-shade) !important;
}

@keyframes fullscreenIn {
  0% {
    transform: translateY(12px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

$fullscreenMargin: $sizeM;

.vuiCodeFullscreen {
  position: fixed;
  top: $fullscreenMargin;
  left: $fullscreenMargin;
  right: $fullscreenMargin;
  bottom: $fullscreenMargin;
  z-index: $fullscreenZIndex;
  // PrismJS theme color.
  background-color: var(--vui-color-light-shade);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  border-radius: $sizeXxs;
  box-shadow: rgba(57, 57, 75, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  animation: fullscreenIn $transitionSpeed cubic-bezier(0, 1, 1, 1);
}

.vuiCodeFullscreen__actions {
  padding: $sizeXs $sizeXxs 0 $sizeL;
}