@import "../../_core.scss";

h1 {
  margin: 0 0 20px;
  color: $colour-black;
  font-family: $font-bold;
  @include font-size($h1-font-size);
  &.font--font-black {
    font-family: $font-black;
    @include font-size($h1-black-font-size);
  }
  &.font--xlarge {
    @include font-size($h1-xlarge-font-size);
  }
  &.font--black-shadow {
    text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.25);
    font-family: $font-black;
    @include font-size($h1-blackshadow-font-size);
    @include breakpoint($screen-md) {
      text-shadow: -5px 5px 0 rgba(0, 0, 0, 0.25);
    }
    @include breakpoint($screen-lg) {
      text-shadow: -7px 7px 0 rgba(0, 0, 0, 0.25);
    }
  }
}
h2,
h3,
h4,
h5,
p,
.link {
  color: $colour-black;
}
p,
h2,
h3,
h4 {
  clear: both;
  margin: 0 0 15px;
}
p:last-child,
p:first-child:last-child {
  margin-bottom: 5px;
}
h2 {
  font-family: $font-medium;
  @include font-size($h2-font-size);
}
h3 {
  font-family: $font-regular;
  @include font-size($h3-font-size);
}
h4 {
  font-family: $font-regular;
  @include font-size($h4-font-size);
}

p {
  padding: 0;
  font-family: $body-font;
  @include font-size($p-font-size);
  &.font--xlarge {
    margin-bottom: 20px;
    @include font-size($p-xlarge-font-size);
  }
  &.font--large {
    @include font-size($p-large-font-size);
  }
  &.font--small {
    @include font-size($p-small-font-size);
  }
  &.font--xsmall {
    @include font-size($p-xsmall-font-size);
  }
}
span.font--font-black {
  font-family: $font-black;
}

strong {
  font-family: $font-bold;
}

@for $color from 1 to (length($colorList)+1) {
  @include font-variation(nth($colorList, $color));
}

h1,
h2,
h3,
h4,
h5,
p,
span {
  @for $color from 1 to (length($colorList)+1) {
    @include font-variation-inline(nth($colorList, $color));
  }
}