// Side navigation - Shared between Home and Profile

@import "../base-shared";

@import "../home-variables";

@mixin sidenav() {
  width: 100%;
  background-color: $color-gray-dark;

  @include media($home-switch-to-tabs) {
    float: left;
    width: $home-sidenav-width-small;
  }

  @include media($L) {
    width: $home-sidenav-width-large;
  }

  &__list {
    @include unstyledList();

    @include media($home-switch-to-tabs) {
      width: $home-sidenav-width-small;
    }

    @include media($L) {
      width: $home-sidenav-width-large;
    }
  }

  &__item {
    &.is-active {
      background-color: $color-gray;
    }
  }

  &__link {
    display: block;
    padding: $size-default $size-S;
    color: $color-gray-light;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;

    @include media($home-switch-to-tabs) {
      padding: $size-M $size-default;
      text-align: center;
    }

    &:visited,
    &:hover {
      color: $color-gray-light;
      text-decoration: none;
    }

    .is-active & {
      color: $color-white;
    }

    .fa {
      font-size: $h3-font-size;
    }
  }

  &__icon {
    display: inline-block;
    width: rem(40px);
    padding-right: $size-default;
    text-align: center;

    @include media($home-switch-to-tabs) {
      display: block;
      width: auto;
      padding-right: 0;
    }
  }

  // Sub-menu items in Profile

  &__sub-menu {
    @include unstyledList();
    background-color: $color-gray-lighter;

    @include media($home-switch-to-tabs) {
      position: absolute;
      top: 0;
      bottom: 0;
      left: $home-sidenav-width-small;
      width: $home-sidenav-sub-menu-width-small;
    }

    @include media($L) {
      left: $home-sidenav-width-large;
      width: $home-sidenav-sub-menu-width-large;
    }
  }

  &__sub-item {
    border-top: 1px solid $color-gray-light;

    &:first-child {
      @include media($home-switch-to-tabs) {
        border-top: 0;
      }
    }

    &:last-child {
      @include media($home-switch-to-tabs) {
        border-bottom: 1px solid $color-gray-light;
      }
    }
  }

  &__sub-link {
    display: block;
    padding: $size-default $size-S $size-S $size-default;
    color: $color-base;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;

    @include media($home-switch-to-tabs) {
      padding: $size-M $size-default;
      text-align: center;
    }

    &:visited,
    &:hover {
      color: $color-base;
      text-decoration: none;
    }

    &.is-required {
      @include media($home-switch-to-tabs) {
        padding-top: $size-M - rem(10px);
        padding-bottom: $size-M - rem(10px);
      }
    }

    &.is-active {
      background-color: $color-gray-lightest;
    }
  }

  &__sub-icon {
    display: inline-block;
    padding-right: $size-base;
    font-size: $h4-font-size;

    @include media($home-switch-to-tabs) {
      display: block;
      width: 100%;
      padding-right: 0;
    }

    &.is-complete::before {
      @include icon-content("nav/check-circle", rem(17px), rem(17px));
    }

    &.is-incomplete::before {
      @include icon-content("nav/circle", rem(17px), rem(17px));
    }

    .fa {
      @include media($home-switch-to-tabs) {
        text-align: center;
      }
    }
  }

  &__sub-text {
    display: inline-block;
    float: right;
    color: $color-secondary;
    font-size: $small-font-size;
    font-weight: normal;
    font-style: italic;
    text-transform: initial;

    @include media($home-switch-to-tabs) {
      display: block;
      float: none;
    }
  }
}

// This mixin handles sub-nav items which are
// found in Profile and Documents pages
@mixin sidenavSecondary() {
  @include media($home-switch-to-tabs) {
    float: left;
    width: $home-sidenav-width-combined-small;
  }

  @include media($L) {
    width: $home-sidenav-width-combined-large;
  }
}