.htmlPre {
  color: #d6deeb;
  code {
    font-size: var(--font-size);
  }
}

.htmlPre,
.codeFigure {
  --padding: 1em;
  --radius: 5px;
  --font-size: 14px;
  @include m(null, m) {
    --font-size: 12px;
  }
  position: relative;
  figcaption {
    font-size: 14px;
  }
}

.codeFigureTitle {
  border-bottom: 1px solid #637777;
  background-color: #021627;
  padding: var(--padding);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  // @include m(m) {
  //   margin-right: calc(var(--outer-right) / -1);
  //   margin-left: calc(var(--outer-left) / -1);
  // }
}

.codeFigureTitle,
.codeFigureMeta {
  color: #637777;
}

.codeFigureMeta {
  padding: calc(var(--padding) / 2);
  position: absolute;
  top: 0;
  right: 0;
}
.codeFigureLanguage,
.copyButton {
  display: inline-block;
  padding: calc(var(--padding) / 2);
  border: none;
  cursor: pointer;
  vertical-align: baseline;
}

.copyButton {
  padding-right: calc(var(--padding) / 2);
  padding-left: calc(var(--padding) / 2);
  border-radius: var(--radius);
  transition: color 200ms;
  &:enter {
    background: #1e3a53;
  }
}

.htmlPre,
.codeFigurePre {
  border-radius: var(--radius);
  background-color: #021627;
  overflow: auto;
  padding: var(--padding);
  // @include m(m) {
  //   margin-right: calc(var(--outer-right) / -1);
  //   margin-left: calc(var(--outer-left) / -1);
  // }
  // max-height: 50em; // TODO: consider limiting height
}

.codePreHasTitle {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.codeFigureLines {
  white-space: pre;
  float: left;
  min-width: 100%;
  padding: var(--padding);
}

@media print {
  .codeFigureLines {
    white-space: pre-wrap;
  }
}