@use 'uswds-core' as *;

$inline-border-radius: border-radius('sm');
$inline-background-color: #f7f7f7;
$block-border-radius: $inline-border-radius;
$block-background-color: #fafafa;
$block-border-width: 1px;
$block-padding-width: units(2);

pre,
code {
  @include u-font('mono', $theme-body-font-size);
  color: color('ink');
}

code {
  // Override font size to use em so it adjusts appropriately to match nearby text.
  font-size: 0.8931em;
  background-color: $inline-background-color;
  border-radius: $inline-border-radius;
}

pre {
  @include u-border($block-border-width, 'gray-5');
  border-radius: $block-border-radius;
  background-color: $block-background-color;
  padding: $block-padding-width;

  code {
    font-size: unset;
    background-color: transparent;
  }
}

pre.highlight {
  @include u-overflow-x('auto');
}

.highlight {
  position: relative;
  max-width: 90ch;

  &::before,
  &::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    top: $block-border-width;
    bottom: $block-border-width;
    width: 0;
    border-radius: $block-border-radius;
  }

  &::before {
    left: $block-border-width;
    background-image: linear-gradient(to left, transparent, $block-background-color);
  }

  &::after {
    right: $block-border-width;
    background-image: linear-gradient(to right, transparent, $block-background-color);
  }
}

.highlight .hll {
  background-color: color('base-lightest');
}
.highlight .c {
  color: color('base-dark');
  font-style: italic;
} /* comment */
.highlight .err {
  color: color('error-lighter');
  background-color: color('error');
} /* error */
.highlight .k {
  color: color('primary-dark');
} /* keyword */
.highlight .ch {
  color: color('base-dark');
  font-style: italic;
} /* comment.hashbang */
.highlight .cm {
  color: color('base-dark');
  font-style: italic;
} /* comment.multiline */
.highlight .cp {
  color: color('success');
} /* comment.preproc */
.highlight .cpf {
  color: color('base-dark');
  font-style: italic;
} /* comment.preprocfile */
.highlight .c1 {
  color: color('base-dark');
  font-style: italic;
} /* comment.single */
.highlight .cs {
  color: color('primary-dark');
  font-style: italic;
} /* comment.special */
.highlight .gd {
  color: color('secondary-dark');
} /* generic.deleted */
.highlight .ge {
  font-style: italic;
} /* generic.emph */
.highlight .gr {
  color: color('secondary-dark');
} /* generic.error */
.highlight .gh {
  font-weight: bold;
} /* generic.heading */
.highlight .gi {
  color: color('primary-darker');
} /* generic.inserted */
.highlight .go {
  color: color('base-dark');
} /* generic.output */
.highlight .gp {
  color: color('base-dark');
} /* generic.prompt */
.highlight .gs {
  font-weight: bold;
} /* generic.strong */
.highlight .gu {
  font-weight: bold;
} /* generic.subheading */
.highlight .gt {
  color: color('secondary-dark');
} /* generic.traceback */
.highlight .kc {
  color: color('primary-dark');
} /* keyword.constant */
.highlight .kd {
  color: color('primary-dark');
} /* keyword.declaration */
.highlight .kn {
  color: color('primary-dark');
} /* keyword.namespace */
.highlight .kp {
  color: color('primary-dark');
} /* keyword.pseudo */
.highlight .kr {
  color: color('primary-dark');
} /* keyword.reserved */
.highlight .kt {
  color: color('secondary');
} /* keyword.type */
.highlight .m {
  color: color('accent-cool-darker');
} /* literal.number */
.highlight .s {
  color: color('secondary-dark');
} /* literal.string */
.highlight .na {
  color: color('primary');
} /* name.attribute */
.highlight .nb {
  color: color('secondary');
} /* name.builtin */
.highlight .nc {
  color: color('primary-darker');
  text-decoration: underline;
} /* name.class */
.highlight .no {
  color: color('secondary-dark');
} /* name.constant */
.highlight .nd {
  color: color('base-dark');
} /* name.decorator */
.highlight .ni {
  font-weight: bold;
} /* name.entity */
.highlight .nf {
  color: color('primary-darker');
} /* name.function */
.highlight .nn {
  color: color('secondary');
  text-decoration: underline;
} /* name.namespace */
.highlight .nt {
  color: color('primary');
  font-weight: bold;
} /* name.tag */
.highlight .nv {
  color: color('secondary-dark');
} /* name.variable */
.highlight .ow {
  color: color('primary-dark');
} /* operator.word */
.highlight .w {
  color: color('base-light');
} /* text.whitespace */
.highlight .mb {
  color: color('accent-cool-darker');
} /* literal.number.bin */
.highlight .mf {
  color: color('accent-cool-darker');
} /* literal.number.float */
.highlight .mh {
  color: color('accent-cool-darker');
} /* literal.number.hex */
.highlight .mi {
  color: color('accent-cool-darker');
} /* literal.number.integer */
.highlight .mo {
  color: color('accent-cool-darker');
} /* literal.number.oct */
.highlight .sa {
  color: color('secondary-dark');
} /* literal.string.affix */
.highlight .sb {
  color: color('secondary-dark');
} /* literal.string.backtick */
.highlight .sc {
  color: color('secondary-dark');
} /* literal.string.char */
.highlight .dl {
  color: color('secondary-dark');
} /* literal.string.delimiter */
.highlight .sd {
  color: color('secondary-dark');
} /* literal.string.doc */
.highlight .s2 {
  color: color('secondary-dark');
} /* literal.string.double */
.highlight .se {
  color: color('secondary-dark');
} /* literal.string.escape */
.highlight .sh {
  color: color('secondary-dark');
} /* literal.string.heredoc */
.highlight .si {
  color: color('secondary-dark');
} /* literal.string.interpol */
.highlight .sx {
  color: color('secondary-dark');
} /* literal.string.other */
.highlight .sr {
  color: color('accent-cool-darker');
} /* literal.string.regex */
.highlight .s1 {
  color: color('secondary-dark');
} /* literal.string.single */
.highlight .ss {
  color: color('primary-dark');
} /* literal.string.symbol */
.highlight .bp {
  color: color('secondary');
} /* name.builtin.pseudo */
.highlight .fm {
  color: color('primary-darker');
} /* name.function.magic */
.highlight .vc {
  color: color('secondary-dark');
} /* name.variable.class */
.highlight .vg {
  color: color('secondary-dark');
} /* name.variable.global */
.highlight .vi {
  color: color('secondary-dark');
} /* name.variable.instance */
.highlight .vm {
  color: color('secondary-dark');
} /* name.variable.magic */
.highlight .il {
  color: color('accent-cool-darker');
} /* literal.number.integer.long */