@mixin moveUp($amount) {
  transform: translate(0, -$amount);
  transform: translate3d(0, -$amount, 0);
}

.sliding-menu {
}

.sliding-menu__list0,
.sliding-menu__list1,
.sliding-menu__list2 {
  display: flex;

  margin: 0;
  padding: 0;

  color: $color-axa-blue;
  list-style-type: none;
}

.sliding-menu__list1,
.sliding-menu__list2 {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.sliding-menu__level1 {
  overflow: hidden;
}

.sliding-menu__item1,
.sliding-menu__item2 {
  position: relative;

  width: 100%;
  height: 40px;

  font-size: 16px;
  line-height: 40px;
}

.sliding-menu__item0__link,
.sliding-menu__item1__link,
.sliding-menu__item2__link {
  display: block;
  width: 100%;
  height: 100%;

  color: $color-axa-blue;
  white-space: nowrap;
  cursor: pointer;

  &:hover {
    color: $color-axa-blue;
  }
}

.sliding-menu__item0__link {
  font-size: 25px;
  font-weight: 600;
}

.sliding-menu__list0 {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  padding: 80px $grid-gutter-width-base;
}

.sliding-menu__item0 {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.sliding-menu__list1 {
  position: relative;
  margin-top: 20px;
  margin-left: 25px;
  padding: 0;
}

.sliding-menu__item1 {
  position: static;
}

.sliding-menu__list2 {
  position: absolute;
  top: 0;
  left: 50px;

  width: 100%;

  margin-top:10px;
  padding: 0;

  transform: translate(100px, 0);
  transform: translate3d(100px, 0, 0);

  opacity: 0;
  visibility: hidden;
  z-index: 0;
}

.sliding-menu__item0__back,
.sliding-menu__item0__plus,
.sliding-menu__item1__plus {
  display: none;
}

.sliding-menu__item0--parent {
  .sliding-menu__item0__back {
    display: block;

    position: absolute;
    top: 0;
    left: -15px;

    width: 40px;
    height: 100%;

    color: $color-axa-blue;
    font-size: 25px;

    cursor: pointer;
    opacity: 0;
    visibility: hidden;
  }

  .sliding-menu__item0__plus {
    display: block;

    position: absolute;
    top: 0;
    right: 0;

    font-size: 25px;
    font-style: normal;

    cursor: pointer;
    opacity: 1;
    visibility: visible;
  }
}

.sliding-menu__item1--parent {
  .sliding-menu__item1__plus {
    display: inline;

    margin-left: 10px;

    font-style: normal;

    opacity: 1;
    visibility: visible;
  }
}

.sliding-menu__list1,
.sliding-menu__list2 {
  position: absolute;
  top: 100%;
  left: 0;

  width: 100%;

  transform: translate(100%, 0);
  transform: translate3d(100%, 0, 0);

  opacity: 0;
  z-index: 0;
}

// Animations on Level 0
.sliding-menu__item0 {
  transform: translate(0, 0);
  transform: translate3d(0, 0, 0);
  transition: transform 0.3s ease 0.8s, opacity 0.2s linear 0.8s, visibility 0s linear 0.8s;
  opacity: 1;
  visibility: visible;

  // Unclicked item (level 0 → 1)
  &.is-pulled {
    transform: translate(-100%, 0);
    transform: translate3d(-100%, 0, 0);
    transition: transform 0.3s ease, opacity 0.3s linear, visibility 0s linear 0.3s;
    opacity: 0;
    visibility: hidden;
  }

  // Clicked item (level 1 → 0)
  &.is-last-clicked {
    margin-left: 0;
    transform: translate(0, 0);
    transform: translate3d(0, 0, 0);
    transition: transform 0.4s ease 0.4s, padding-left 0.3s ease 0.8s, border-color 0.1s ease 1s;

    .sliding-menu__list1 {
      transition: transform 0.3s ease 0.1s, opacity 0.2s linear 0.1s;
    }
  }

  // Clicked item (level 0 → 1)
  &.is-pushed {
    padding-left: 25px;

    transition: border-color 0.1s ease, padding-left 0.3s ease, transform 0.4s ease 0.3s;
    border-color: transparent;

    .sliding-menu__item0__plus {
      transition: visibility 0s linear 0.1s, opacity 0.1s linear;
      opacity: 0;
      visibility: hidden;
    }

    .sliding-menu__item0__back {
      transition: visibility 0s linear, opacity 0.2s linear 1s;
      opacity: 1;
      visibility: visible;
    }

    .sliding-menu__list1 {
      transform: translate(0, 0);
      transform: translate3d(0, 0, 0);
      transition: transform 0.3s ease 0.7s, opacity 0.2s linear 0.7s;
      opacity: 1;
    }
  }

  // This keeps us from having to use js for positioning
  // first clicked element goes 50px up, second clicked one 100px, and so on
  &.is-pushed { @include moveUp(50px); }
  & + &.is-pushed { @include moveUp(100px); }
  & + & + &.is-pushed { @include moveUp(150px); }
  & + & + & + &.is-pushed { @include moveUp(200px); }
  & + & + & + & + &.is-pushed { @include moveUp(250px); }
  & + & + & + & + & + &.is-pushed { @include moveUp(300px); }
  & + & + & + & + & + & + &.is-pushed { @include moveUp(350px); }
}

// Animations on Level 1
.sliding-menu__item1 {
  transform: translate(0, 0);
  transform: translate3d(0, 0, 0);

  transition: transform 0.3s ease 0.7s, opacity 0.2s linear 0.7s, visibility 0s linear 0.7s;

  opacity: 1;
  visibility: visible;

  // Unclicked item (level 1 → 2)
  &.is-pulled {
    transform: translate(-100%, 0);
    transform: translate3d(-100%, 0, 0);

    transition: transform 0.3s ease, opacity 0.2s linear, visibility 0s linear 0.3s;

    opacity: 0;
    visibility: hidden;
  }

  // Clicked item (level 2 → 1)
  &.is-last-clicked {
    transform: translate(0, 0);
    transform: translate3d(0, 0, 0);

    transition: border-width 0.3s ease, padding 0.3s ease 0.7s, transform 0.4s ease 0.3s;

    .sliding-menu__item1__link {
      transition: color 0.3s ease;
    }

    .sliding-menu__list2 {
      transition: transform 0.3s ease, opacity 0.2s linear;
    }
  }

  // Clicked item (level 1 → 2)
  &.is-pushed {
    width: auto;

    transition: padding 0.3s ease, transform 0.4s ease 0.3s, border-width 0.3s ease 0.7s;

    border-top: 1px solid darken(#335282, 10%);
    border-bottom: 1px solid darken(#335282, 10%);

    .sliding-menu__item1__link {
      transition: color 0.3s ease 0.7s;
      color: darken(#335282, 10%);
    }

    .sliding-menu__item1__plus {
      transition: visibility 0s linear 0.1s, opacity 0.1s linear;
      opacity: 0;
      visibility: hidden;
    }

    .sliding-menu__list2 {
      transform: translate(0, 0);
      transform: translate3d(0, 0, 0);
      transition: transform 0.3s ease 0.7s, opacity 0.2s linear 0.7s;
      opacity: 1;
      visibility: visible;
    }
  }

  // This keeps us from having to use js for positioning
  // first clicked element goes 0px up, second clicked one 40px, and so on
  &.is-pushed { @include moveUp(0px); }
  & + &.is-pushed { @include moveUp(40px); }
  & + & + &.is-pushed { @include moveUp(80px); }
  & + & + & + &.is-pushed { @include moveUp(120px); }
  & + & + & + & + &.is-pushed { @include moveUp(160px); }
  & + & + & + & + & + &.is-pushed { @include moveUp(200px); }
  & + & + & + & + & + & + &.is-pushed { @include moveUp(240px); }
}