/*Colors used in Mobile Menu */
$listColor: $neutral-100;
$listHoverColor: rgba($neutral-100, 0.5);
$listActiveColor: white;

$barMenuColor: white;

$shaderBackground: white;
$shaderOpacity: 0.8;


.preventScroll {
  @include respond-to-width(700) {
    overflow: hidden;
    overflow-y: scroll;
    position: fixed;
    width: 100%;
  }
}


#navigation {
  position: fixed;
  z-index: -1;
  left: 0;
  top: 0;
  overflow: hidden;
  display: none;
  height: 100vh;
  width: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out, z-index 0s ease 0.5s;

  .shader {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    background-color: $shaderBackground;
    opacity: $shaderOpacity;
    transition-delay: 0.4s;
  }

  .menu {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    pointer-events: all;
    z-index: 5;

    .grid-row {
      position: relative;
      z-index: 2;
      pointer-events: none;

      .background {
        position: absolute;
        left: 25%;
        top: 0;
        min-height: 100vh;
        height: 100%;
        width: 100vw;
        transform: translate3d(25%, 0, 0);

        //  site specific colors
        .anvil & {
          background-color: $anvil-primary-700;
        }
        .rols-machineonderdelen & {
          background-color: $rols-primary-700;
        }
        .job-precision & {
          background-color: $job-primary-700;
        }
        .jansen-machining-technology & {
          background-color: $jansen-primary-700;
        }
        .machinefabriek-de-valk & {
          background-color: $valk-primary-700;
        }
      }
    }

    nav {
      position: relative;
      width: 75%;
      min-height: 100vh;
      margin-left: 25%;
      @include flex(flex-start,center);
      padding: 80px 0;
      pointer-events: all;

      .menu-list {
        width: 75%;
        margin-left: column(2, 9);

        ul {
          margin: 0;
          padding: 0;
          list-style: none;
          font-size: 2rem;
          line-height: 1.2;

          @include respond-to-height(950) {
            font-size: 1.5rem;
          }

          @include respond-to-width(475) {
            font-size: 1.2rem;
          }

          + ul {
            margin-top: 24px;
          }

          li {
            border-bottom: 2px solid $listColor;
            a {
              position: relative;
              @include flex(flex-start, center);
              padding: 4vh 0 2.5vh;
              cursor: pointer;
              text-decoration: none;

              p {
                margin: 0;
                color: $listColor;
                transition: color 0.2s;
              }

              .icon {
                @include flex(center, center);
                margin-right: 20px;
                width: 30px;
                height: 30px;
                opacity: 1;
                transition: opacity 0.3s;

                &:before {
                  transition-duration: .3s;
                  content: '';
                }
              }
            }

            &.home {
              a .icon:before {
                @include sprite(200px 198px, 25px, 28px);
              }
            }
            &.group, &.about {
              a .icon:before {
                @include sprite(412px 81px, 26px, 25px);
              }
            }
            &.specialisms {
              a .icon:before {
                @include sprite(355px 71px, 27px, 22px);
              }
            }
            &.segments {
              a .icon:before {
                @include sprite(385px 81px, 25px, 25px);
              }
            }
            &.esg_vision {
              a .icon:before {
                @include sprite(355px 71px, 27px, 22px);
              }
            }
            &.machine_park {
              a .icon:before {
                @include sprite(252px 229px, 25px, 25px);
              }
            }
            &.vacancies {
              a .icon:before {
                @include sprite(310px 228px, 25px, 25px);
              }
            }
            &.contact {
              a .icon:before {
                @include sprite(442px 129px, 23px, 29px);
              }
            }

            &:hover {
              a .icon:before {
                transform: scale(1.1);
              }
            }

              //&:not(.active) {
              //  a {
              //    .icon {
              //      opacity: 0.5;
              //    }
              //  }
              //}
            //}

            ul {
              font-size: 0.85em;
            }

            &.active {
              border-color: $listActiveColor;
              a {
                p {
                  color: $listActiveColor;
                }
              }
            }
          }
        }
      }
    }
  }

  &.active {
    z-index: 900;
    opacity: 1;
    transition: opacity 0.5s ease-in-out, z-index 0s;

    .menu {
      .background {
        transform: translate3d(0, 0, 0);
      }
    }
  }

  &.allow-animation {
    display: block;

    .shader {
      transition: all 0.2s;
    }
    .menu {
      transition: all 0.3s;
      transition-timing-function: ease-in-out;

      .background {
        transition: transform 0.3s ease-in-out;
      }
    }
  }

  @include respond-to-width(700) {
    display: block;

    .menu {
      .grid-row {
        width: 100%;
        margin: 0;
        max-width: none;

        .background {
          left: 0;
        }
      }

      nav {
        width: calc(100% - 80px);
        margin: 0 auto;

        .menu-list {
          width: 100%;
          margin-left: 0;
        }
      }
    }
  }
}