// ========== Global ========== //
// Color of the border
$border-color: #f0f0f0;
$border-color-dark: #363636;

// ========== Code ========== //
// Color of the code
$code-color: #E74C3C !default;
$code-color-dark: #E5BF78 !default;

// Color of the code background
$code-background-color: #f5f5f5 !default;
$code-background-color-dark: #272C34 !default;

@mixin overflow-wrap($value) {
  word-wrap: $value;
  overflow-wrap: $value;
}

.v[data-class=v] {
  .vcount {
    z-index: 60;
  }
  .vcards .vcard .vcontent.expand {
    &::before, &::after {
      z-index: 50;
    }
  }

  .vwrap,
  .vwrap .vheader .vinput,
  .vcards .vcard .vh,
  .vcards .vcard .vquote,
  blockquote {
    border-color: $border-color;

    [data-theme=dark] & {
      border-color: $border-color-dark;
    }
  }

  code, pre, pre code {
    font-size: 90%;
    tab-size: 4;
    color: $code-color;
    background-color: $code-background-color;
    @include overflow-wrap(break-word);

    [data-theme=dark] & {
      color: $code-color-dark;
      background-color: $code-background-color-dark;
    }
  }
}
