// ========== 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;
}

@mixin line-break($value) {
  -webkit-line-break: $value;
  -ms-line-break: $value;
  line-break: $value;
}

@mixin tab-size($value) {
  -moz-tab-size: $value;
  -o-tab-size: $value;
  tab-size: $value;
}

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

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

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

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

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

  .emoji, .vemoji {
    max-width: 1.5em;
    vertical-align: text-bottom;
  }
}