// This is a copy of the entire ~ uswds/src/stylesheets/elements/typography.scss file
// so that we can convert the rem values for USWDS v3.

html {
  font-family: $font-sans;
  font-size: $em-base;
}

body {
  font-size: 16px;
}

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*="my-domain.com"])
// [href^="https:"]:not([href*="my-domain.com"])

.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();
  a {
    @include h1();
    font-family: $font-serif;
  }
}

h2 {
  @include h2();
  a {
    @include h2();
    font-family: $font-serif;
  }
}

h3 {
  @include h3();
  a {
    @include h3();
    font-family: $font-serif;
  }
}

h4 {
  @include h4();
  a {
    @include h4();
    font-family: $font-serif;
  }
}

h5 {
  @include h5();
  a {
    @include h5();
    font-family: $font-serif;
  }
}

h6 {
  @include h6();
  font-family: $font-sans;
  a {
    @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;
    }
  }
}