@import 'values';
@import 'code';

@mixin markdown-header($element, $font-size, $height: 48px, $margin-top: 24px, $margin-bottom: 12px, $border: false) {
  
  #{$element} {
    @include font-mono();
    font-size: $font-size;
    
    min-height: $height;
    line-height: $height;

    @if $border {
      border-bottom: 1px solid $code-border-color;
    }
    
    margin-bottom: $margin-bottom;
  }

  * + #{$element} {
    margin-top: $margin-top;
  }
  
}

@mixin markdown() {

  a {
    color: hsl($hue, $saturation, 40%);
    text-decoration: underline;
  }

  em {
    text-style: italic;
  }

  strong {
    font-weight: bold;
  }

  code {
    @include font-mono();    

    display: inline;

    background: $code-bg;
    border: 1px solid $code-border-color;
    
    border-radius: 2px;
    
    padding: 0px 2px;
    margin: 0 1px;
  }

  pre {
    @include hljs();
    margin: 24px 0;
    
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  p + p {
    //text-indent: 1em;
    margin-top: 8px;
  }

  blockquote p {
    text-indent: 0;
  }

  h1, h2, h3, h4, h5, h6, pre {

    code {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0;
      margin: 0;
      text-transform: none;
    }
    
  }

  table {

    min-width: 50%;

    border-spacing: 0;
    border-collapse: collapse;

    margin-top: 16px;
    margin-bottom: 16px;

    td, th {
      padding: 4px 8px;
    }

    thead {
      border-bottom: 2px solid $table-border-color;
    }

    th {
      text-align: left;
      font-weight: bold;
    }

    td + td {
      border-left: 5px solid $code-bg;
    }

    tr:nth-child(even) {
      background-color: lighten($code-bg, 3%);
    }

  }

  
  @include markdown-header(h1, 24px, 64px, 48px, 16px, true);
  @include markdown-header(h2, 21px, 48px, 38px, 14px, true);
  @include markdown-header(h3, 18px, 36px, 22px, 12px, true);
  @include markdown-header(h4, 16px, 32px, 16px, 10px);

  h1, h2, h3 {
    font-weight: bold;
  }

  ul, ol {
    margin-left: 18px;
    margin-top: 8px;
    margin-bottom: 8px;
  }

}

@mixin markdown-small-headers() {
  @include markdown-header(h1, 24px, 38px, 24px, 14px, true);
  @include markdown-header(h2, 19px, 34px, 20px, 12px, true);
  @include markdown-header(h3, 17px, 28px, 18px, 10px, true);
  @include markdown-header(h4, 14px, 22px, 16px, 8px);

  h1, h2, h3, h4 {
    color: hsl($hue, $saturation, 40%);
  }
  
  h1, h2 {
    //text-transform: uppercase;
  }

}

@mixin markdown-padding($left, $right) {

  p, pre, h1, h2, h3, h4, h5, h6 {
    padding-left: $left;
    padding-right: $right;
  }

  ul, ol {
    padding-left: $left;
    padding-right: $right;
  }

  pre {
    margin-left: $left;
    border-left: 4px solid $code-border-color;
  }

  blockquote {
    margin-top: 24px;
    margin-bottom: 24px;
    padding-left: $left;
    padding-right: $right;
    
    background-color: $code-border-color;
    
    p {
      padding: 12px;
      font-style: italic;
    }

  }
  
  pre {
    padding-left: 16px;
  }

  table {
    margin-left: $left;
  }
  
}

@mixin markdown-code() {
  
  p code {
    background-color: $code-border-color;
    font-weight: bold;
    color: rgba(black, 0.8);
  }
  
}