$bottom-border-height: 5px;

@keyframes nav-bounce {
  0% {
    left: 0;
  }

  50% {
    left: -$margin-half;
  }

  100% {
    left: 0;
  }
}

.navigation-container {
  background: linear-gradient(0deg, $color-tui-grey-25 2px, transparent 0);
  background-position: left bottom;
  overflow: hidden;
  margin-bottom: $margin-double;
  position: relative;
  margin-right: -$margin-normal;
  margin-left: -$margin-normal;
  padding: 0 $margin-normal;
  height: 58px;

  @include breakpoint(sm) {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }

  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: $margin-double;
    height: 80%;
    background-image: linear-gradient(to right, rgba($color-white, 0) 0%, $color-white 100%);
    pointer-events: none;
  }
}

.scroll-navigation {
  position: relative;
  animation: nav-bounce 1s 2 ease-in-out;
}

.navigation {
  max-height: 100%; //fix for IE9's magically expanding div bug
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  margin-bottom: 0;
  margin-left: -$margin-normal;
  padding-bottom: 20px;

  &::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }

  &::-webkit-scrollbar {
    display: none;
    background: transparent;
  }

  @include breakpoint(lg) {
    margin-left: -$margin-double;
  }

  .nav-item {
    padding: 0 $margin-normal;
    display: inline-block;

    @include breakpoint(lg) {
      padding: 0 $margin-double;
    }
  }

  a {
    @include font-size(16);
    font-weight: bold;
    letter-spacing: .5px;
    padding-bottom: $margin-normal;
    display: inherit;
    text-decoration: none;
    outline: none;
    color: $color-tui-grey-50;

    &.active,
    &:hover {
      color: $color-blue-500;
      border-bottom: $bottom-border-height solid $color-blue-500;
    }
  }
}