html,
body {
  font-family: $font-regular;
  letter-spacing: -0.02px;
  color: $charcoal;
}

a {
  color: $jambonz;
  text-decoration: none;
}

/*
 * Buttons have their own inline svg/span styles
 * This className lets us inline a flat icon with text
 */
.i {
  svg, span, strong {
    display: inline;
    vertical-align: middle;
  }

  svg:last-child {
    margin-left: 8px;
  }

  svg:first-child {
    margin-right: 8px;
  }
  
  /*
   * Using React Feather
   * https://github.com/feathericons/react-feather
   * Default size is 24x24 for SVG icons
   * Sizing can be passed in component JS as in:
   * <Icon size={18} name="GitHub" />
   * However the inline, in-text SVG icons need to be
   *    responsive with the text scaling so some CSS
   *    can achieve the desired result in this case:
   *    e.g. <span>text</span><Icon name="ExternalLink" />
   *
   */
  svg {
    @media (max-width: $width-tablet-1) {
      width: 20px;
      height: 20px;
    }

    @media (max-width: $width-tablet-2) {
      width: 18px;
      height: 18px;
    }

    // @note: Consideration on stopping type reduction here
    // @media (max-width: $width-mobile) {
    //   width: 16px;
    //   height: 16px;
    // }
  }
}

strong {
  @include font-bold();
}

em {
  font-family: $font-regular-italic;
}

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

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

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

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

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

.h6, h6 {
  @include h6();
}

.p, p {
  @include p();
}

.m {
  @include m();
}

.ms {
  @include ms();
}

.mxs {
  @include mxs();
}

.color--teal {
  color: $teal;
}

.color--blue {
  color: $blue;
}

.color--purple {
  color: $purple;
}