@use '../../../style/elements/ui-spacing.scss';
@use '../../../components/space/style/space-mixins.scss' as space-mixins;

@mixin codeStyle() {
  $code-scale: 0.875;
  display: inline-block;

  // Used by properties tables
  del & {
    text-decoration: line-through;
  }

  &:not([class*='dnb-space']) {
    margin: calc(-0.25em / #{$code-scale}) 0;
  }
  padding: calc(0.25em / #{$code-scale});

  font-size: #{$code-scale}em;
  text-decoration: inherit;
  line-height: calc(var(--line-height-xx-small--em) / #{$code-scale});

  color: var(--token-color-text-neutral);
  background-color: var(--token-color-background-positive-subtle);
  box-shadow: inset 0 0 0 0.0625rem
    var(--token-color-stroke-neutral-subtle);

  border-radius: var(--token-radius-sm);

  &--surface-dark {
    color: var(--token-color-text-neutral-ondark);
    background-color: inherit;
    box-shadow: inset 0 0 0 0.0625rem
      var(--token-color-stroke-action-disabled-ondark);
  }

  & .dnb-anchor {
    font-size: inherit;
  }
}

@mixin preStyle() {
  display: block;
  overflow: auto;

  @include space-mixins.spaceReset();
  padding: 1rem;

  border-radius: var(--token-radius-md);

  // make a base reset
  white-space: pre;
  vertical-align: baseline;
  outline: none;
  text-shadow: none;
  hyphens: none;
  word-wrap: normal;
  word-break: normal;
  text-align: left;
  word-spacing: normal;
  tab-size: 2;

  font-size: inherit;
  font-family: var(--font-family-monospace);

  // Pre is using syntax highlighting to determine the text color, this property works as a fallback color in case of no highlighting
  color: var(--color-white);
  background-color: var(--color-black-80);

  pre {
    padding: 1rem;
  }

  .dnb-spacing pre {
    @include ui-spacing.defaultSpacing();
  }
}