.gl-markdown {
  @include gl-font-size-markdown;
  @include gl-line-height-24;
  @include gl-text-gray-900;
  @include gl-font-regular;
  @include gl-font-weight-normal;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .gl-h1,
  .gl-h2,
  .gl-h3,
  .gl-h4,
  .gl-h5,
  .gl-h6 {
    @include gl-font-weight-bold;
  }

  h1,
  .gl-h1,
  h2,
  .gl-h2 {
    @include gl-pb-5;
    @include gl-border-b-solid;
    @include gl-border-b-1;
    @include gl-border-b-gray-200;
    @include gl-mb-5;
  }

  h3,
  h4,
  h5,
  h6,
  .gl-h3,
  .gl-h4,
  .gl-h5,
  .gl-h6 {
    @include gl-mt-6;
    @include gl-mb-3;
  }

  h1,
  .gl-h1 {
    @include gl-font-size-markdown-h1;
    @include gl-line-height-32;
    @include gl-fluid-font-size(
      $min: $gl-font-size-markdown-h1-md,
      $max: $gl-font-size-markdown-h1-xl
    );
    @include gl-fluid-line-height($min: $gl-line-height-36, $max: $gl-line-height-52);
    @include gl-mt-0;
  }

  h2,
  .gl-h2 {
    @include gl-font-size-markdown-h2;
    @include gl-line-height-28;
    @include gl-fluid-font-size(
      $min: $gl-font-size-markdown-h2-md,
      $max: $gl-font-size-markdown-h2-xl
    );
    @include gl-fluid-line-height($min: $gl-line-height-28, $max: $gl-line-height-36);
    @include gl-mt-6;
  }

  h3,
  .gl-h3 {
    @include gl-font-size-markdown-h3;
    @include gl-line-height-24;
    @include gl-fluid-font-size(
      $min: $gl-font-size-markdown-h3-md,
      $max: $gl-font-size-markdown-h3-xl
    );
    @include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28);
  }

  h4,
  .gl-h4 {
    @include gl-font-size-markdown;
    @include gl-line-height-20;
  }

  h5,
  .gl-h5,
  h6,
  .gl-h6 {
    @include gl-font-size-markdown-sm;
    @include gl-line-height-20;
  }

  h6,
  .gl-h6 {
    @include gl-text-gray-700;
  }

  p,
  .gl-paragraph {
    @include gl-mt-0;
    @include gl-mb-0;

    + p,
    + .gl-paragraph {
      @include gl-mt-5;
    }

    &.sm {
      @include gl-font-size-markdown-sm;
      @include gl-line-height-20;
    }
  }

  .sm {
    @include gl-font-size-markdown-sm;
    @include gl-line-height-20;
  }

  .monospace,
  code {
    @include gl-font-monospace;
    @include gl-font-size-monospace-lg;
    @include gl-line-height-24;

    &.sm {
      @include gl-font-size-monospace;
      @include gl-line-height-20;
    }
  }

  blockquote {
    @include gl-text-gray-500;
    @include gl-py-3;
    @include gl-px-6;
    @include gl-my-5;
    @include gl-mx-0;
    @include gl-border-l-solid;
    @include gl-border-l-4;
    @include gl-border-l-gray-100;
  }

  .idiff {
    @include gl-display-inline-flex;
    @include gl-rounded-base;
    @include gl-px-2;
  }

  .deletion {
    @include gl-bg-red-100;
  }

  .addition {
    @include gl-bg-green-100;
  }

  code {
    @include gl-bg-gray-50;
    @include gl-text-gray-950;
    @include gl-rounded-base;
    @include gl-px-2;
    @include gl-py-1;
  }
}

.gl-compact-markdown {
  @include gl-font-base;
  @include gl-line-height-20;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .gl-h1,
  .gl-h2,
  .gl-h3,
  .gl-h4,
  .gl-h5,
  .gl-h6 {
    @include gl-mt-6;
    @include gl-mb-3;
    @include gl-line-height-20;
  }

  h1,
  .gl-h1,
  h2,
  .gl-h2 {
    @include gl-pb-0;
    @include gl-border-none;
  }

  h1,
  .gl-h1 {
    @include gl-font-size-compact-markdown-h1;
    @include gl-line-height-24;
    @include gl-fluid-font-size(
      $min: $gl-font-size-compact-markdown-h1-md,
      $max: $gl-font-size-compact-markdown-h1-xl
    );
    @include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28);
  }

  h2,
  .gl-h2 {
    @include gl-font-lg;
  }

  h3,
  .gl-h3,
  h4,
  .gl-h4,
  h5,
  .gl-h5,
  h6,
  .gl-h6 {
    @include gl-font-base;
  }

  h4,
  .gl-h4,
  h5,
  .gl-h5,
  h6,
  .gl-h6 {
    @include gl-text-gray-700;
  }

  .sm {
    @include gl-font-sm;
  }

  .monospace,
  code {
    @include gl-font-monospace;
    @include gl-font-size-monospace;
    @include gl-line-height-20;

    &.sm {
      @include gl-font-size-monospace-sm;
    }
  }
}