html {

font-family: $font-sans;
font-size: $em-base;

}

body {

font-size: $base-font-size;

}

p {

line-height: $base-line-height;
margin-bottom: 1em;
margin-top: 1em;

}

a {

color: $color-primary;
text-decoration: underline;

&:hover,
&:active {
  color: $color-primary-darker;
}

&:focus {
  @include focus;
}

&:visited {
  color: $color-visited;
}

}

@mixin external-link($external-link, $external-link-hover) {

&::after {
  background: url('#{$image-path}/#{$external-link}.png') no-repeat 0 0;
  background: url('#{$image-path}/#{$external-link}.svg') no-repeat 0 0;
  background-size: 100%;
  content: '';
  display: inline-block;
  height: 0.65em;
  margin-bottom: -1px;
  margin-left: 4px;
  width: 0.65em;
}

&:hover::after {
  background-image: url('#{$image-path}/#{$external-link-hover}.png');
  background-image: url('#{$image-path}/#{$external-link-hover}.svg');
}

}

// External link consider “effortless style approach”: // [href^=“http:”]:not() // [href^=“https:”]:not()

.usa-external_link {

@include external-link(external-link, external-link-hover);

}

.usa-external_link-alt {

@include external-link(external-link-alt, external-link-alt-hover);

}

h1, h2, h3, h4, h5, h6 {

clear: both;
font-family: $font-serif;
line-height: $heading-line-height;
margin-bottom: 0.5em;
margin-top: 1.5em;

}

h1 {

@include h1();

}

h2 {

@include h2();

}

h3 {

@include h3();

}

h4 {

@include h4();

}

h5 {

@include h5();

}

h6 {

@include h6();
font-family: $font-sans;

}

// Remove user agent styles

cite, var, address, dfn {

font-style: normal;

}

// Custom typography

.usa-content {

p,
ul:not(.usa-accordion):not(.usa-accordion-bordered),
ol:not(.usa-accordion):not(.usa-accordion-bordered) {
  max-width: $text-max-width;
}

}

.usa-content-list {

max-width: $text-max-width;

}

.usa-sans {

p,
a,
li,
span {
  font-family: $font-sans;
}

a {
  border-bottom: none;
  font-weight: $font-bold;
}

}

.usa-serif {

p,
a,
li,
span {
  font-family: $font-serif;
}

}

.usa-display {

@include h3();
margin-bottom: 0;

@include media($small-screen) {
  @include h1();
}

@include media($medium-screen) {
  @include title();
}

}

.usa-font-lead {

font-family: $font-serif;
font-size: $lead-font-size;
font-weight: $font-normal;
line-height: $lead-line-height;
max-width: $lead-max-width;

}

.usa-background-dark {

background-color: $color-gray-dark;

p,
span {
  color: $color-white;
}

a {
  color: $color-gray-lighter;

  &:hover {
    color: $color-white;
  }
}

}

.usa-text-small {

font-size: $h6-font-size;
margin-top: 0;

}

// Removes top margin from first child and bottom margin from last child on // elements when they are within those layout elements. .usa-section, .usa-grid, .usa-grid-full {

> :first-child {
  margin-top: 0;
}

> :last-child {
  margin-bottom: 0;
}

}

.usa-width-one-whole, .usa-width-one-half, .usa-width-one-third, .usa-width-two-thirds, .usa-width-one-fourth, .usa-width-three-fourths, .usa-width-one-sixth, .usa-width-five-sixths, .usa-width-one-twelfth {

&:first-child {
  > :first-child {
    margin-top: 0;
  }
}

> :first-child {
  @include media($medium-screen) {
    margin-top: 0;
  }
}

&:last-child {
  > :last-child {
    margin-bottom: 0;
  }
}

> :last-child {
  @include media($medium-screen) {
    margin-bottom: 0;
  }
}

}