// Typography
//
// Text sizing and styling
//
// Markup:
// <h1>Introduction (h1)</h1>
// <h2>Heading 2 (h2)</h2>
// <h2 class="h2-bar">Heading 2 with Bar (h2)</h2>
// <h3>Heading 3 (h3)</h3>
// <h3 class="h3-bar">Heading 3 with Bar (h3)</h3>
// <h4>Heading 4 (h4)</h4>
// <h5>Heading 5 (h5)</h5>
// <p class="para-xl">Paragraph – Extra-Large</p>
// <p class="para-lg">Paragraph – Large</p>
// <p class="para-md">Paragraph – Medium</p>
// <p class="para-sm">Paragraph – Small</p>
// <p>Paragraph – Default (Large)</p>
//
// Styleguide elements.typography

h1,
.h1 {
  @include heading(h1);
}

h2,
.h2 {
  @include heading(h2);
}

@mixin h2-bar {
  border-bottom: 10px solid $green-light;
  padding-bottom: $standard-padding-small;
}

.h2-bar {
  @include h2-bar;
}

h3,
.h3 {
  @include heading(h3);
}

@mixin h3-bar {
  border-bottom: 2px solid $green-light;
  margin-bottom: $base-padding-base;
  padding-bottom: $standard-padding-lite;
}

.h3-bar {
  @include h3-bar;
}

span.h3-bar {
  @include h3-bar;
  display: inline-block;
  width: 100%;
}

h4,
.h4 {
  @include heading(h4);
}

h5,
.h5 {
  @include heading(h5);
}

.para-xl {
  @include heading('para-xl');
}

// default p
p,
ol,
ul,
.para-lg {
  @include heading('para-lg');
}

.para-md {
  @include heading('para-md');
}

.para-sm {
  @include heading('para-sm');
}

p + h2,
p + .h2,
p + h3,
p + .h3,
p + h4,
p + .h4,
table + h2,
table + .h2,
table + h3,
table + .h3,
ul + h2,
ul + .h2,
ul + h3,
ul + .h3, {
  margin-top: $base-padding-large;
}