@import "../../globals.core";

// Typography
// --------------------------------------------------
// All font sizes use rem units
// By default, 1rem equals 10px. For example, 1.4rem  === 14px
// $font-size-root value, which is on the <html> element
// is what can scale all fonts

$font-size-root:               62.5% !default;
$headings-font-weight:         500 !default;
$headings-line-height:         1.2 !default;

$h1-font-size:                 2.6rem !default;
$h2-font-size:                 2.4rem !default;
$h3-font-size:                 2.2rem !default;
$h4-font-size:                 2.0rem !default;
$h5-font-size:                 1.8rem !default;
$h6-font-size:                 1.6rem !default;


html {
  font-size: $font-size-root;
}

a {
  background-color: transparent;
}

.enable-hover a:hover {
  opacity: 0.7;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
  margin-top: 1.6rem;
  margin-bottom: 1rem;
}

[padding] {
  h1, h2, h3, h4, h5, h6 {
    &:first-child {
      margin-top: -0.3rem;
    }
  }
}

h1 + h2,
h1 + h3,
h2 + h3 {
  margin-top: -0.3rem;
}

h1 {
  font-size: $h1-font-size;
  margin-top: 2rem;
}

h2 {
  font-size: $h2-font-size;
  margin-top: 1.8rem;
}

h3 {
  font-size: $h3-font-size;
}

h4 {
  font-size: $h4-font-size;
}

h5 {
  font-size: $h5-font-size;
}

h6 {
  font-size: $h6-font-size;
}

small {
  font-size: 75%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

// Text Alignment
// --------------------------------------------------

[text-left] {
  text-align: left;
}

[text-center] {
  text-align: center;
}

[text-right] {
  text-align: right;
}

[text-justify] {
  text-align: justify;
}

[text-nowrap] {
  white-space: nowrap;
}

// Text Transformation
// --------------------------------------------------

[text-uppercase] {
  text-transform: uppercase;
}

[text-lowercase] {
  text-transform: lowercase;
}

[text-capitalize] {
  text-transform: capitalize;
}
