@import '../override-function';
//====================================
// SCSS for content/components/navigation-sidebar.html
//====================================

$level-2-default-padding: 8px 16px 8px 12px;
$level-2-hover-padding: 8px 14px;
$level-3-default-padding: 8px 14px 8px 28px;
$level-3-hover-padding: 8px 12px 8px 30px;

.usa-sidenav-list {
  a {
    font-size: 15px;
    text-decoration: none;
    padding: $level-2-default-padding;

    // DEPRECATED: Replaced with va-button web component
    &.va-button-primary {
      padding: scale-rule(1rem 2rem);
    }
  }
}

// Contents in this media query are from the shame file on vets-website
@media (min-width: $xsmall-screen) and (max-width: $medium-screen - 1) {
   .va-sidebarnav {
      display: none;
    }

    button {
      &.va-sidebarnav-close {
        position: absolute;
        right: 2px;
        top: 2px;

        &:hover,
        &:focus {
          background-color: $mm-gray;
        }
      }
  }
}

.left-side-nav-title {
  color: $color-black;
  padding-left: 1em;
  @include media($small-desktop-screen) {
    padding-left: 0;
  }
}

.va-sidebarnav {
  color: $color-link-default;

  h4 {
    margin-top: 0;
  }

  li {
    border-top-color: $color-gray-lighter;
  //  a {
  //     &:visited {
  //      color: $color-base;
  //     }
  //     &.usa-current:visited {
  //       color: $color-primary;
  //     }
  //   }
  }

  @include media-maxwidth($medium-screen - 1) {
    left: 0;
    height: 100%;
    overflow: scroll;
    padding: 1.6rem;
    position: absolute;
    top: 0;
    visibility: hidden;

    // Necessary to override .usa-grid .usa-width-one-fourth
    .va-l-detail-page & {
       width: 100%;
    }

    &::before {
      background: $color-link-default-hover;
      content: "\00A0";
      display: block;
      height: 100%;
      left: 0;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1;
    }

    > div {
      visibility: visible;
      background: $color-white;
      border-left: 1px solid $color-gray-light;
      height: 100%;
      max-width: scale-rem(30rem);
      overflow: auto;
      padding: scale-rule(3.2rem 1.6rem 1.6rem);
      z-index: 2;
      position: absolute;
      top: 0;
      right: 0;
      width: 80%;
      transform: translateX(100%);
      -webkit-transition: 100ms transform linear;
              transition: 100ms transform linear;
    }

    &--opened {
      visibility: visible;
      display: block;
      position: fixed;
      z-index: $top-layer;

      & > div {
        transform: translateX(0);
      }
    }

    &-close {
      position: absolute;
      top: 0;
      right: 0;
    }
  }

  @include media($medium-screen) {
    a {
      padding-right: scale-rem(1.6rem);
    }

    &-close {
      display: none;
    }

    .usa-sidenav-list {
      margin-right: scale-rem(1.6rem);
    }
  }

  ul.usa-accordion {
    > li {
      margin-bottom: -1px;
    }
  }

  .left-side-nav-title {
    padding-bottom: 25px;
    > .icon-small {
      vertical-align: middle;
      padding-left: initial;
      margin-right: 5px;
      font-size: scale-rem(1.7rem);
    }
  }

  .usa-sidenav-list {
    margin-right: 0;
    margin-left: 0;

    & > li {
      border-top: 0;

      .active-menu {
        border-bottom: 0;
      }

      a {
        color: $color-link-default;
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        border-left: 4px solid transparent;

        &:hover, &:focus {
          background-color: $light-blue;
          padding: $level-2-hover-padding;
          border-color: $color-link-default;
          transition:
            background-color .1s ease-in-out 0s,
            border-color .1s ease-in-out 0s,
            padding .1s ease-in-out 0s;
        }
      }

      i {
        color: $color-black;
        vertical-align: middle;
        font-size: 15px;
        padding-left: 0;
      }
    }

    & .menu-item-container {
      & > a {
        font-weight: bold;
      }

      &:hover {
        background-color: $color-gray-lightest;
        color: $color-blue;
      }

      &:focus {
        outline: 2px solid $color-gold;
        outline-offset: 3px;
      }
    }

    a.usa-current {
      color: $color-base;
      border-left: 4px solid $color-base;
      padding-left: 12px;
      margin-left: 16px;
      background-color: $mm-gray;
      cursor: auto;

      &.level-one {
        padding-left: 14px;
        margin-left: 0;
      }

      &:hover {
        background-color: $mm-gray;
        font-weight: bold;
      }
    }

    .active-level {
      background-color: $mm-gray;

      .usa-sidenav-sub_list {
        margin-top: 2px;
        margin-bottom: 2px;
        li {
          > a {
            padding: $level-3-default-padding;
            &:hover {
              padding: $level-3-hover-padding;
            }
          }
          &:last-child a {
            padding-bottom: 12px;
          }
        }
      }
    }
  }

  h4 {
    display: inline-block;
    margin-bottom: 0;
    margin-top: 0;
    vertical-align: middle;
    width: 75%;
  }

  .usa-sidenav-list > li {
    i {
      position: relative;
      right: -20px;
    }

    .menu-item-container > a {
      font-weight: initial;
    }

    a.usa-current {
      font-weight: bold;
      margin-left: 0;
      &:hover, &:focus {
        border-color: $color-base;
        padding: $level-2-default-padding;
      }
    }
  }

  .usa-sidenav-sub_list{
    a {
      width: 100% !important; // sorry this is temporary
      padding-left: 40px;
      font-size: 15px;

      &:focus {
        @include focus-gold-light-outline(0);
      }

      &:hover, &:focus {
        background-color: $light-blue;
        padding: $level-3-hover-padding;
        border-color: $color-link-default;
      }

      &.usa-current {
        margin-left: 16px !important; // sorry this is temporary
      }
    }
  }

  .usa-accordion {
    .usa-accordion-button {
      background-color: $color-white;
      border-top: 1px solid $color-gray-lighter;
      border-bottom: 1px solid $color-gray-lighter;
      background-size: scale-rem(1.1rem);
      color: $color-link-default;
      font-weight: normal;
      font-size: 17px;
      padding-left: scale-rem(1rem);

      &:focus {
        outline: 0;
        border: 2px solid $color-gold;
        background-color: $mm-gray;
        font-weight: bold;
      }

      &:hover {
        background-color: $light-blue;
      }

      &[aria-expanded=false] {
        background-image: url('#{$formation-image-path}/plus-blue.svg');
      }

      &[aria-expanded=true] {
        border-bottom: 0;
        background-image: url('#{$formation-image-path}/minus-blue.svg');

        &:focus {
          border: 2px solid $color-gold;
        }
      }
    }

    .usa-accordion-content {
      padding: 0;
    }

    .usa-sidenav-list {
      a {
        font-size: 15px;
        padding: $level-2-default-padding;

        // added to deal with accordian overflow
        // and outline not showing correctly
        &:focus {
          width: 98% !important;
          margin: 2px;
        }
      }
    }

    .usa-current {
      // added to deal with accordian overflow
      // and outline not showing correctly
      &:focus {
        width: 99% !important;
        margin-top: 2px;
      }
    }
  }

  .usa-accordion-button-dark {
    background-color: $color-gray-lightest;
  }

}

// Opens / closes a sidebar navigation on detail pages.
.va-btn-sidebarnav-trigger {
  margin: 0;
  padding: 0;

  &.fixed-trigger {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: $top-layer - 1;
  }

  .button-wrapper {
    position: absolute;
    width: 100%;
    padding: units(1) units(1) units(2);
  }

  button {
    background-color: $color-white;
    color: $color-primary;
    margin: 0;
    padding: units(1.5);
    border: 1px solid $color-primary;
    border-radius: 4px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    strong {
      line-height: units(2.5);
    }

    svg {
      fill: $color-primary;
    }
  }

  // .button-background is layered behind the button and prevents anything that
  // is scrolling behind the button from being visible
  .button-background {
    position: absolute;
    background-color: $color-white;
    width: 100%;

  }

  @include media($medium-large-screen) {
    display: none;
  }
}

.va-btn-close-icon {
  background: transparent url('#{$formation-image-path}/icons/close.svg') center no-repeat;
  background-size: scale-rule(1rem 1rem);
  height: scale-rem(2.2rem);
  padding: scale-rem(2.2rem);
  margin: 0;
  text-indent: scale-rem(-9999rem);
  width: scale-rem(1rem);
}