// TODO: Destroy hierarchies with more BEM

.mobile-menu {
  @include unstyle-list();

  width: 100%;
  padding-bottom: 1px;
}

.mobile-menu--sliding {
  position: relative;
  overflow: hidden;
}

.mobile-menu--sliding .mobile-menu__level {
  @include unstyle-list();

  position: absolute;
  display: block;
  top: 0;
  left: 100%;
  visibility: hidden;

  width: 100%;
  padding-bottom: 1px;

  transition: left $transition-normal $transition-default, visibility $transition-normal;

  &.is-previous {
  }

  &.is-current {
    visibility: visible;
  }
}

.mobile-menu--sliding .mobile-menu__item {
}

.mobile-menu__item {
  margin-bottom: -1px;

  &:last-child {
    margin-bottom: 0;
  }
}

.mobile-menu__item--section {
}

.mobile-menu__link {
  @extend .typo-16;

  line-height: 1.3;

  display: flex;
  align-items: center;

  height: 60px;

  padding: 0 30px;

  color: $color-light-blue;
  border-top: 1px solid $color-gray--lighter;
  border-bottom: 1px solid $color-gray--lighter;

  text-decoration: none;

  &:hover,
  &:focus {
    color: $color-blue;
    text-decoration: none;
  }
}

.mobile-menu__link.is-active {
  color: $color-blue;
}

.mobile-menu__text {
  flex-grow: 1;
  order: 2;
  pointer-events: none;
  @include word-break();
}

.mobile-menu__link__parent-icon {
  order: 3;

  height: 16px;
  width: 16px;
  min-width: 16px;
  margin-left: 20px;
}

.mobile-menu__link--back {
}

.mobile-menu__link__back-icon {
  order: 1;

  height: 24px;
  width: 24px;
  min-width: 24px;
  margin-right: 8px;
}

.mobile-menu__link--section {
  padding: 9px 30px;
  color: $color-white;
  background-color: $color-blue;

  &:hover {
    color: $color-white;
  }
}

  // Level 1
.mobile-menu--collapsing .mobile-menu__level .mobile-menu__link {
  background: $color-white;
}

.mobile-menu--collapsing .mobile-menu__level .mobile-menu__link.is-active {
  background: $color-white;
}

  // Level 2
.mobile-menu--collapsing .mobile-menu__level .mobile-menu__level .mobile-menu__link {
  padding-left: (30px + 24px);
  background-color: $color-white;
}

.mobile-menu--collapsing .mobile-menu__level .mobile-menu__level .mobile-menu__link.is-active {
  background-color: $color-white;
}

  // Level 3
.mobile-menu--collapsing .mobile-menu__level .mobile-menu__level .mobile-menu__level .mobile-menu__link {
  height: 41px;
  padding-top: 10px;
  padding-bottom: 9px;
  border-top: none;
  border-bottom: 1px solid $color-tbd-13;

  background-color: $color-tbd-12;
  color: $color-tbd-9;
}

.mobile-menu--collapsing .mobile-menu__level .mobile-menu__level .mobile-menu__level .mobile-menu__link.is-active {
  background-color: $color-tbd-12;
}

.mobile-menu--collapsing .mobile-menu__level {
  padding: 0;
  margin: 0;
  visibility: hidden;

  width: 100%;
  max-height: 0px;

  overflow: hidden;

  list-style-type: none;

  // Watch out: prevent delayed closing with a bezier
  transition: max-height $transition-normal cubic-bezier(0, 1.05, 0, 1), visibility $transition-normal;
}

.mobile-menu--collapsing .mobile-menu__level.is-open {
  transition: max-height $transition-normal cubic-bezier(0.01, 0, 1, 0), visibility $transition-normal;
  visibility: visible;

  // Watch out: work around, since no transition to `height: auto` is possible
  max-height: 3999px;
}

.mobile-menu--collapsing .mobile-menu__item {
}

.mobile-menu--collapsing .mobile-menu__item--back {
  display: none;
}

.mobile-menu--collapsing .mobile-menu__link__parent-icon {
  transition: transform $transition-normal ease;
  transform: rotate(0);
}

.mobile-menu--collapsing .mobile-menu__link--parent.is-active {
  .mobile-menu__link__parent-icon {
    transition: transform $transition-normal ease;
    transform: rotate(90deg);
  }
}

// Copyright AXA Versicherungen AG 2015