// Preformatted text.
pre {
  background-color: var(--color-background-code-block);
  border: 1px solid var(--color-background-code-block);
  border-radius: 4px;
  color: var(--color-code-text);
  display: block;
  font-family: var(--font-monospace);
  font-size: var(--font-size-16);
  line-height: var(--line-height-paragraphs-blog);
  margin-bottom: var(--margin-between-text-elements);
  margin-top: var(--margin-between-text-elements);
  overflow: auto;
  padding: 15px 16px 14px;
  position: relative;
  white-space: pre;
  word-wrap: break-word;

  code {
    background-color: transparent;
    border-radius: 4px;
    color: var(--color-code-text);
  }
}

// Core/code block
.wp-block-code {
  pre {
    padding-left: var(--padding-container-horizontal);
    padding-right: var(--padding-container-horizontal);
  }

  @media (max-width: $width-grid-base + 40px) {
    margin-left: var(--padding-container-horizontal);
    margin-right: var(--padding-container-horizontal);
    width: calc(100% - calc(var(--padding-container-horizontal) * 4));
  }
}