// Heading mixins @mixin title {

font-size: $title-font-size;
font-weight: $font-bold;

}

@mixin h1 {

font-size: $h1-font-size;
font-weight: $font-bold;

}

@mixin h2 {

font-size: $h2-font-size;
font-weight: $font-bold;

}

@mixin h3 {

font-size: $h3-font-size;
font-weight: $font-bold;

}

@mixin h4 {

font-size: $h4-font-size;
font-weight: $font-bold;

}

@mixin h5 {

font-size: $h5-font-size;
font-weight: $font-bold;

}

@mixin h6 {

font-size: $h6-font-size;
font-weight: $font-normal;
line-height: $base-line-height;
text-transform: uppercase;

}

// Focus state mixin @mixin focus {

outline: $focus-outline;
outline-offset: $focus-spacing;

}

// Mobile-first media query helper @mixin media($bp) {

@media screen and (min-width: #{$bp}) {
  @content;
}

}

// Screen reader only helper @mixin sr-only() {

position: absolute;
left: -999em;

}

// This “negates” the sr-only() helper; useful if // we want the default state of something to be // for screen readers only, but we want to force // it to show for sighted users under more specific // conditions. @mixin not-sr-only() {

position: static;

}

.usa-sr-only {

@include sr-only();

}

// Aria hidden helper @mixin accessibly-hidden() {

&[aria-hidden=true] {
  display: none;
}

}

// Unstyled list helper @mixin unstyled-list() {

@include margin(0 null);
list-style-type: none;
padding-left: 0;

> li {
  margin-bottom: 0;
}

}

// Font smoothing mixin // Only use for light text on dark background // TODO: Remove after adding PostCSS @mixin font-smoothing {

-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;

}

// Content size helpers @mixin allow-layout-classes {

@include margin(null auto);

&.width-one-half {
  @include media($medium-screen) {
    width: 50%;
  }
}

&.width-one-third {
  @include media($medium-screen) {
    width: 33%;
  }
}

&.width-two-thirds {
  @include media($medium-screen) {
    width: 67%;
  }
}

&.width-one-fourth {
  @include media($medium-screen) {
    width: 25%;
  }
}

&.width-three-fourths {
  @include media($medium-screen) {
    width: 75%;
  }
}

&.align-left {
  @include media($medium-screen) {
    float: left;
    margin-right: 2em;
    margin-top: 0.5em;
  }
}

&.align-right {
  @include media($medium-screen) {
    float: right;
    margin-left: 2em;
    margin-top: 0.5em;
  }
}

}

@mixin display-icon($icon, $direction, $size, $margin, $hover) {

&::#{$direction} {
  background-image: url('#{$image-path}/#{$icon}.png');
  background-image: url('#{$image-path}/#{$icon}.svg');
  background-size: 100%;
  content: '';
  display: inline-block;
  height: $size;
  width: $size;

  /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */
  @if $direction == 'after' {
    margin-left: $margin;
  } @else {
    margin-right: $margin;
  }
  /* stylelint-enable */
}

@if $hover == 'hover' {
  &:hover::#{$direction} {
    background-image: url('#{$image-path}/#{$icon}-hover.png');
    background-image: url('#{$image-path}/#{$icon}-hover.svg');
  }
}

}

@mixin usa-sidenav-list {

@include unstyled-list();

> li {
  background-color: transparent;
  border-top: 1px solid $color-gray;
  font-size: $h4-font-size;

  &:first-child {
    border-top: none;
  }
}

a {
  border: none;
  color: $color-base;
  display: block;
  font-family: $font-sans;
  line-height: 1.3;
  padding: 0.85rem 1rem 0.85rem $site-margins-mobile;
  text-decoration: none;

  &:hover {
    background-color: $color-gray-lightest;
    color: $color-primary;
    text-decoration: none;
  }

  &:focus {
    outline-offset: 0;
    position: relative;
    z-index: 1;
  }

  &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
    border-left: $sidenav-current-border-width solid $color-primary;
    color: $color-primary;
    font-weight: $font-bold;
    padding-left: $site-margins-mobile - $sidenav-current-border-width;
  }
}

}

@mixin usa-sidenav-sublist {

@include unstyled-list();
margin: 0;
width: 100%;

li {
  border: none;
  font-size: $h5-font-size;
}

a {
  padding-left: 2.8rem;
  line-height: $heading-line-height;

  &:hover,
  &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
    border: none;
    padding-left: 2.8rem;
  }
}

.usa-sidenav-sub_list {
  a {
    padding-left: 3.8rem;

    &:focus {
      outline-offset: 0;
    }

    &:hover {
      padding-left: 3.8rem;
    }
  }
}

}