$od-Navigation-columnPadding: 30px;

.od-Navigation {
  width: 100%;
  max-width: $od-Header-bannerWidth;

  @media (min-width: $od-Header-bannerWidth) {
    height: $od-Header-height;
    margin: auto;
  }
}

.od-Navigation-links {
  width: auto;
  height: 100%;
  position: relative;
}

.od-Navigation-linkContainer {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: $ms-color-neutralDark;
  
  &.is-open {
    .od-Navigation-link {
      background-color: $ms-color-neutralPrimaryAlt;
    }

    .od-Navigation-subMenu {
      display: block;
    }

    .ms-Icon {
      transform: rotateZ(180deg);
    }
  }

  // Responsive breakpoint
  @media (min-width: $od-Header-bannerWidth) {
    display: inline-block;
    width: auto;
  }
}

.od-Navigation-link {
  width: 100%;
  height: $od-Header-height;
  display: block;
  padding-left: 16px;
  padding-right: 16px;
  line-height: $od-Header-height;
  color: $ms-color-white;
  font-size: $ms-font-size-l - 1;
  text-decoration: none;

  &:hover {
    color: $ms-color-neutralLighter;
  }

  &:focus {
    color: $ms-color-white;
    box-shadow: inset 0px 0px 0px 1px $ms-color-white;
    
    @include high-contrast {
      box-shadow: inset 0px 0px 0px 1px $ms-color-white;
    }
    
    @include high-contrast-black-on-white  {
      box-shadow: inset 0px 0px 0px 1px $high-contrast-purpleBG;
    }
  }
  
  // State - Is Selected
  &.is-selected {
    color: $ms-color-neutralTertiary;

     .ms-Icon {
       color: $ms-color-neutralTertiary;
     }
  }
  
  .ms-Icon {
    color: $ms-color-white;
    margin-left: 6px;
    transition: transform 0.4s;
  }

  // Responsive changes
  @media (min-width: $od-Header-bannerWidth) {
   display: inline-block;
   width: auto;

    &:hover {
      &:before {
        content: '';
        height: 2px;
        left: 0;
        right: 0;
        position: absolute;
        bottom: 0;
        background-color: $ms-color-neutralTertiary;
      }
    }

    &.is-selected {
      &:before {
        content: '';
        height: 2px;
        left: 0;
        right: 0;
        position: absolute;
        bottom: 0;
        background-color: $ms-color-neutralTertiary;
      }
    }
  }
}

.od-Navigation-subMenu {
  background-color: $ms-color-neutralPrimaryAlt;
  width: 100vw;
  overflow: hidden;
  display: none;

  .ms-Grid,
  .ms-Grid-row {
    height: 100%;
  }

  .ms-Grid-col {
     padding-top: 12px;
  }

  @media (min-width: $od-Header-bannerWidth) {
    position: fixed;
    top: 50px;
    left: 0;
    height: 386px;
  }
}

.od-Navigation-subMenuItems {
  width: $od-Header-bannerWidth;
  margin: auto;
  height: 100%;
}

.od-Navigation-subMenuItem {
  font-size: $ms-font-size-l - 1;
  line-height:  32px;
  width: 100%;
  display: block;
  color: $ms-color-white;

  &:focus {
    box-shadow: inset 0px 0px 0px 1px $ms-color-white;
    color: $ms-color-white;

    @include high-contrast {
      box-shadow: inset 0px 0px 0px 1px $ms-color-white;
    }
    
    @include high-contrast-black-on-white  {
      box-shadow: inset 0px 0px 0px 1px $high-contrast-purpleBG;
    }
  }

  &:hover {
    color: $ms-color-neutralLighter;
  }

  i {
    font-size: 16px;
    position: relative;
    width: 22px;
    height: 22px;
    margin-right: 6px;
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
    
    &:before {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.od-Navigation-menuFirstColumn {
  padding-left: 30px;
  padding-bottom: 12px;

  @media (min-width: $od-Header-bannerWidth) {
    padding-bottom: 0;
    padding-left: 0;
  }
}

.od-Navigation-menuSecondColumn {
  background-color: $ms-color-neutralSecondary;
  height: 100%;
  padding-left: $od-Navigation-columnPadding;
}

.od-Navigation-menuThirdColumn {
  background-color: $ms-color-neutralSecondaryAlt;
  height: 100%;
  padding-left: $od-Navigation-columnPadding;
}

.od-Navigation-subMenuOverflowColor {
  background-color: $ms-color-neutralSecondaryAlt;
  height: 100%;
  width: 100vw;
  position: absolute;
  right: -100vw;
  top: 0;
}

.od-Navigation-searchContainer {
  width: 100%;
  position: relative;
  padding: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: $ms-color-neutralDark;

  @media (min-width: $od-Header-bannerWidth) {
    display: none;
  }
}

.od-Navigation-socialButtons {
  position: absolute;
  right: 0;
  height: 100%;
  top: 8px;
}

.od-Navigation-socialButton {
  display: inline-block;
   background-color: $ms-color-neutralDark;
}