%base--pre-build {
  direction: ltr;
  display: block;
  font-family: var(--font-mono);
  font-weight: $font-weight-normal;
  hyphens: none;
  letter-spacing: normal;
  overflow-y: overlay;
  tab-size: 2;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-all;
  word-spacing: normal;
  word-wrap: break-word;
}

%base--pre {
  @extend %base--pre-build;
  border-radius: 3px;
  overflow: auto;

  code,
  .base--code {
    @extend %base--pre-build;
    line-height: 1.45;
    outline: 0;
    padding: 1rem;
    white-space: pre;
    word-break: normal;
    word-wrap: normal;
  }
}

pre {
  @extend %base--pre;
  background: map-get($google-colors, 'grey-900');
  max-width: calc(100vw - 4rem);

  > code {
    color: map-get($google-colors, 'grey-50');

    [data-theme='dark'] & {
      border: 2px solid var(--phosphor-green);
    }
  }
}

// .token.prolog,
// .token.doctype,
// .token.cdata,
// .token.punctuation {
//   color: map-get($google-colors, 'grey-50');
// }

// .token.comment {
//   color: map-get($google-colors, 'grey-500');
// }

// .token.tag,
// .token.constant,
// .token.symbol,
// .token.deleted,
// .token.keyword,
// .token.important {
//   color: map-get($google-colors, 'cyan-400');
// }

// .token.boolean,
// .token.number {
//   color: map-get($google-colors, 'green-300');
// }

// .token.selector,
// .token.attr-name,
// .token.char,
// .token.builtin,
// .token.inserted,
// .token.function {
//   color: map-get($google-colors, 'purple-200');
// }

// .token.atrule,
// .token.string,
// .token.attr-value {
//   color: map-get($google-colors, 'yellow-200');
// }

// .token.operator,
// .token.entity,
// .token.url,
// .language-css .token.string,
// .style .token.string,
// .token.variable {
//   color: map-get($google-colors, 'pink-500');
// }

// .token.property {
//   color: map-get($google-colors, 'cyan-400');
// }

// .token.regex {
//   color: map-get($google-colors, 'orange-300');
// }

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

// .token.entity {
//   cursor: help;
// }
