@import 'values';

@mixin comment() {
  
  > .comment {
    
    background: $comment-bg;
    
    line-height: 160%;

    > .text {
      @include markdown();
      @include markdown-small-headers();
    }

  }

}

@mixin comment-width() {
  width: $comment-width;
  min-width: 24em;
  max-width: 64em;
}

@mixin code() {
  
  > .code {

    > pre {
      white-space: pre-wrap;
      word-wrap: break-all;
      word-break: break-all;
      
      font-size: $code-font-size;

      @include font-mono();
      @include hljs();
      
      line-height: 135%;
    }

  }
  
  &.markdown > .code > .markdown {
    @include markdown();
    @include markdown-code();

    @include font-body();

    line-height: 150%;
  }
  
}
@mixin comment-padding($vert, $left, $right) {

  > .comment > .text {
    padding: $vert $right $vert $left;
  }
  
  &.footer > .comment > .content {
    padding-left: $left;
    padding-right: $right;
  }
  
  @include header-comment-padding($section-two-column-padding, $left, $right);

}

@mixin comment-padding-bottom($padding) {

  > .comment {
    padding-bottom: $padding;
  }
  
}

@mixin comment-padding-top($padding) {

  > .comment {
    padding-top: $padding;
  }
  
}

@mixin code-padding($vert, $left, $right) {
  
  > .code > pre,
  &.footer > .code > .content {
    padding: $vert $right $vert $left;
  }

  &.markdown > .code > .markdown {
    @include markdown-padding($left, $right);
  }
  
}

@mixin code-padding-bottom($padding) {

  > .code {
    padding-bottom: $padding;
  }
  
}

@mixin code-padding-top($padding) {

  > .code {
    padding-top: $padding;
  }
  
}
@mixin section() {
  
  @include comment();
  @include code();
  
}
@mixin comment-single-column() {
  
  > .comment {

    width: 100%;
    min-height: none;
    
    &.empty {
      display: none;
    }

  }

  @include comment-padding($section-single-column-padding-v, $section-single-column-padding-h, $section-single-column-padding-h);
  
  @include narrow() {
    @include comment-padding($section-narrow-v, $section-narrow-h, $section-narrow-h);
  }
  
}

@mixin code-single-column() {
  
  > .code {
    
    border-bottom: 1px solid $code-border-color;
    border-top: 1px solid $code-border-color;

    &.empty {
      display: none !important;
    }
    
  }

  @include code-padding($section-single-column-padding-v, $section-single-column-padding-h, $section-single-column-padding-h);

  @include narrow() {
    @include code-padding($section-narrow-v, $section-narrow-h, $section-narrow-h);
  }
  
  &.footer > .code {
    border-top: 1px solid $code-border-color;
  }

}

@mixin section-single-column() {
  @include comment-single-column();
  @include code-single-column();
}
@mixin comment-two-column($comment-width) {
  
  > .comment {

    @include comment-width();
    
    border-right: 1px solid $code-border-color;

  }

  @include comment-padding($section-two-column-padding, $section-two-column-inner, $section-two-column-inner);

  &.footer > .comment {
    border-top: 1px solid $comment-border-color;
  }
  
}

@mixin code-two-column() {
  
  > .code {
    
    flex: 1;

  }

  @include code-padding($section-two-column-padding, $section-two-column-inner, $section-two-column-outer);
  
  &.footer > .code {
    border-top: 1px solid $code-border-color;
  }
  
}

@mixin section-two-column($comment-width) {
  display: flex;

  @include comment-two-column($comment-width);
  @include code-two-column();
  
}

@mixin section-first() {
  $padding: 128px;

  @include comment-padding-bottom($padding);
  @include code-padding-bottom($padding);
}

@mixin section-last() {
  flex: 1;

  $padding: 64px;

  @include two-column() {
    @include comment-padding-bottom($padding);
    @include code-padding-bottom($padding);
  }
}
@mixin sections() {
  
  display: flex;
  flex-direction: column;

  .section {
    @include section();

    &:first-child {
      @include section-first();
    }
    
    &:nth-last-child(2) {
      @include section-last();
    }
    
    
  }
  
  @include header();

  @include single-column() {
    @include header-single-column();
    
    .section {
      @include section-single-column();
    }
    
  }
  
  @include two-column() {
    @include header-two-column();

    .section {
      @include section-two-column($comment-width);
    }
  }

  @include footer();
}