/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiCodeBlock {
  max-width: 100%;
  display: block;
  position: relative;
  background: $ouiCodeBlockBackgroundColor;
  color: $ouiCodeBlockColor;

  .ouiCodeBlock__pre {
    @include ouiScrollBar;
    height: 100%;
    overflow: auto;
    display: block;
  }

  .ouiCodeBlock__pre--whiteSpacePre {
    white-space: pre;
  }

  .ouiCodeBlock__pre--whiteSpacePreWrap {
    white-space: pre-wrap;
  }

  .ouiCodeBlock__code {
    @include ouiCodeFont;
    display: block;
    line-height: $ouiLineHeight;
    font-weight: $ouiCodeFontWeightRegular;
    font-size: inherit;
  }

  .ouiCodeBlock__controls {
    position: absolute;
    top: 0;
    right: 0;
  }

  .ouiCodeBlock__fullScreenButton + .ouiCodeBlock__copyButton {
    margin-top: $ouiSizeXS;
  }

  .ouiCodeBlock__line {
    display: block;
  }

  &.ouiCodeBlock-isFullScreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .ouiCodeBlock__pre {
      // sass-lint:disable-block no-important
      padding: $ouiSizeXL !important;
    }

    .ouiCodeBlock__controls {
      top: $ouiSizeXS;
      right: $ouiSizeXS;
    }
  }

  &.ouiCodeBlock--fontSmall {
    font-size: $ouiFontSizeXS;
  }

  &.ouiCodeBlock--fontMedium {
    font-size: $ouiFontSizeS;
  }

  &.ouiCodeBlock--fontLarge {
    font-size: $ouiFontSize;
  }

  // Storing for re-use the sizing of controls plus extra padding
  $controlsPadding: $ouiSizeL + $ouiSizeXS;

  &.ouiCodeBlock--hasControls .ouiCodeBlock__pre--whiteSpacePreWrap {
    padding-right: $controlsPadding;
  }

  &.ouiCodeBlock--hasControls .ouiCodeBlock__pre--whiteSpacePre {
    margin-right: $controlsPadding;
  }

  // Small padding
  &.ouiCodeBlock--paddingSmall {
    .ouiCodeBlock__pre {
      padding: $ouiSizeS;
    }

    .ouiCodeBlock__controls {
      top: $ouiSizeS;
      right: $ouiSizeS;
    }

    &.ouiCodeBlock--hasControls .ouiCodeBlock__pre--whiteSpacePreWrap {
      padding-right: $ouiSizeS + $controlsPadding;
    }

    &.ouiCodeBlock--hasControls .ouiCodeBlock__pre--whiteSpacePre {
      margin-right: $ouiSizeS + $controlsPadding;
    }
  }

  // Medium padding
  &.ouiCodeBlock--paddingMedium {
    .ouiCodeBlock__pre {
      padding: $ouiSize;
    }

    .ouiCodeBlock__controls {
      top: $ouiSize;
      right: $ouiSize;
    }

    &.ouiCodeBlock--hasControls .ouiCodeBlock__pre--whiteSpacePreWrap {
      padding-right: $ouiSize + $controlsPadding;
    }

    &.ouiCodeBlock--hasControls .ouiCodeBlock__pre--whiteSpacePre {
      margin-right: $ouiSize + $controlsPadding;
    }
  }

  // Large padding
  &.ouiCodeBlock--paddingLarge {
    .ouiCodeBlock__pre {
      padding: $ouiSizeL;
    }

    .ouiCodeBlock__controls {
      top: $ouiSizeL;
      right: $ouiSizeL;
    }

    &.ouiCodeBlock--hasControls .ouiCodeBlock__pre--whiteSpacePreWrap {
      padding-right: $ouiSizeL + $controlsPadding;
    }

    &.ouiCodeBlock--hasControls .ouiCodeBlock__pre--whiteSpacePre {
      margin-right: $ouiSizeL + $controlsPadding;
    }
  }

  /*
   * 1. Size the code against the text its embedded within.
   */
  &.ouiCodeBlock--inline {
    display: inline-block;
    white-space: pre;
    color: $ouiTextColor;
    font-size: 90%; /* 1 */
    padding: 0 $ouiSizeS;
    background: $ouiCodeBlockBackgroundColor;

    .ouiCodeBlock__pre {
      padding: 0 $ouiSizeXS;
    }

    .ouiCodeBlock__code {
      display: inline;
      white-space: normal;
    }
  }

  &.ouiCodeBlock--transparentBackground {
    background: transparent;
  }

  .prismjs > *::selection {
    // Only change the color if the variable IS a color
    // or else no highlight color shows up at all
    @if type-of($ouiCodeBlockSelectedBackgroundColor) == color {
      background-color: $ouiCodeBlockSelectedBackgroundColor;
    }
  }

  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {
    opacity: .7;
  }

  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata,
  .token.coord,
  .token.blockquote {
    color: $ouiCodeBlockCommentColor;
    font-style: italic;
  }

  .token.selector {
    color: $ouiCodeBlockSelectorTagColor;
  }

  .token.string,
  .token.interpolation,
  .token.interpolation-punctuation,
  .token.doc-comment .token.keyword,
  .token.attr-value,
  .token.url .token.content {
    color: $ouiCodeBlockStringColor;
  }

  .token.number,
  .token.boolean,
  .token.keyword.nil,
  .token.regex,
  .token.variable,
  .token.unit,
  .token.hexcode,
  .token.attr-name,
  .token.attr-equals {
    color: $ouiCodeBlockNumberColor;
  }

  .token.atrule .token.rule,
  .token.keyword {
    color: $ouiCodeBlockKeywordColor;
  }

  .token.function {
    color: $ouiCodeBlockFunctionTitleColor;
  }

  .token.tag {
    color: $ouiCodeBlockTagColor;
  }

  .token.class-name {
    color: $ouiCodeBlockTypeColor;
  }

  .token.property {
    color: $ouiCodeBlockAttributeColor;
  }

  .token.console,
  .token.list-punctuation,
  .token.url-reference,
  .token.url .token.url {
    color: $ouiCodeBlockSymbolColor;
  }

  .token.paramater {
    color: $ouiCodeBlockParamsColor;
  }

  .token.meta,
  .token.important {
    color: $ouiCodeBlockMetaColor;
  }

  .token.title {
    color: $ouiCodeBlockTitleColor;
  }

  .token.section {
    color: $ouiCodeBlockSectionColor;
  }

  .token.prefix.inserted,
  .token.prefix.deleted {
    padding-left: $ouiSizeXS;
    margin-left: -$ouiSizeXS;
  }

  .token.prefix.inserted {
    box-shadow: -$ouiSizeXS 0 $ouiCodeBlockAdditionColor;
    color: $ouiCodeBlockAdditionColor;
  }

  .token.prefix.deleted {
    box-shadow: -$ouiSizeXS 0 $ouiCodeBlockDeletionColor;
    color: $ouiCodeBlockDeletionColor;
  }

  .token.selector .token.class {
    color: $ouiCodeBlockSelectorClassColor;
  }

  .token.selector .token.id {
    color: $ouiCodeBlockSelectorIdColor;
  }

  .token.italic {
    font-style: italic;
  }

  .token.important,
  .token.bold {
    font-weight: $ouiCodeFontWeightBold;
  }

  .token.url-reference,
  .token.url .token.url {
    text-decoration: underline;
  }

  .token.entity {
    cursor: help;
  }
}