.gl-markdown {
  @include gl-font-size-markdown;
  @include gl-line-height-24;
  color: $gl-text-color;
  @include gl-font-regular;
  @include gl-font-weight-normal;

  :first-child {
    @include gl-mt-0;
  }

  h1,
  .gl-h1 {
    @include gl-heading-1;
    @include gl-mt-7;
  }

  h2,
  .gl-h2 {
    @include gl-heading-2;
    @include gl-mt-6;
  }

  h3,
  .gl-h3 {
    @include gl-heading-3;
    @include gl-mt-6;
  }

  h4,
  .gl-h4 {
    @include gl-heading-4;
    @include gl-mt-5;
  }

  h5,
  .gl-h5 {
    @include gl-heading-5;
    @include gl-mt-5;
  }

  h6,
  .gl-h6 {
    @include gl-heading-6;
    @include gl-mt-5;
  }

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

  blockquote {
    @include gl-text-gray-700;
    @include gl-py-3;
    @include gl-pl-6;
    @include gl-my-3;
    @include gl-mx-0;
    @include gl-inset-border-l-4-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;
  }

  pre {
    @include gl-py-3;
    @include gl-px-4;
    @include gl-rounded-base;
    @include gl-inset-border-1-gray-100;
    @include gl-my-7;
    @include gl-overflow-auto;

    code {
      @include gl-bg-white;
      @include gl-rounded-0;
      @include gl-text-gray-900;
      @include gl-p-0;
    }
  }

  .audio-container {
    @include gl-display-inline-flex;
    @include gl-flex-direction-column;
    @include gl-w-full;

    audio {
      @include gl-w-full;
    }

    a {
      @include gl-mt-3;

      &::before {
        @include gl-mr-2;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        content: '📎';
      }
    }
  }

  table {
    @include gl-my-7;

    th,
    td {
      @include gl-px-3;
      @include gl-py-4;
      @include gl-inset-border-b-1-gray-100;
      @include gl-vertical-align-top;
    }

    th {
      @include gl-inset-border-y-1-gray-100;
      @include gl-font-weight-bold;
    }

    thead {
      @include gl-bg-gray-50;
    }

    tr:nth-child(even) {
      @include gl-bg-gray-10;
    }
  }
}

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

  h1,
  .gl-h1 {
    @include gl-heading-1-fixed;
    @include gl-mt-7; 
  }

  h2,
  .gl-h2 {
    @include gl-heading-2-fixed;
    @include gl-mt-6;
  }

  h3,
  .gl-h3 {
    @include gl-heading-3-fixed;
    @include gl-mt-6;
  }

  h4,
  .gl-h4 {
    @include gl-heading-4-fixed;
    @include gl-mt-5;
  }

  h5,
  .gl-h5 {
    @include gl-heading-5-fixed;
    @include gl-mt-5;
  }

  h6,
  .gl-h6 {
    @include gl-heading-6-fixed;
    @include gl-mt-5;
  }

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

  .monospace,
  code {
    @include gl-font-monospace;
  }

  table {
    th,
    td {
      @include gl-py-3;
    }
  }
}