// 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-family: $font-sans;
  font-size: $h6-font-size;
  font-weight: $font-normal;
  text-transform: uppercase;
}

// 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;
}

.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: asset-url('#{$image-path}/#{$icon}.png');
    background-image: asset-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: asset-url('#{$image-path}/#{$icon}-hover.png');
      background-image: asset-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 1.8rem;
    text-decoration: none;

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

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

    &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
      border-left: 0.4rem solid $color-primary;
      color: $color-primary;
      font-weight: $font-bold;
      padding-left: 1.4rem;
    }
  }
}

@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;

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