$size-mobile-button: 72px !default;
$font-size-mobile-button: 2em !default;

$mobile-menu-height: 54px !default;

$color-mobile-button: $color-primary !default;

@mixin auto-border-color($color: $color-primary) {
  border-color: contrast($color, $color-text-inverted, $color-text, $lightness: 63%);
}

#ftw-mobile-overlay {
  visibility: hidden;
  position: fixed;
  top: $size-mobile-button;
  left: 0;
  @media screen\0 {
    left: calc(100% - #{$size-mobile-button / 2});
  }
  right: 0;
  bottom: 0;
  z-index: 999 !important;
  opacity: .8;
  background: #485563; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #485563 , #29323c); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #485563 , #29323c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#ftw-mobile-wrapper {
  height: $size-mobile-button;
  background-color: $color-mobile-button;

  @include tablet {
    display: none;
  }
}

#mobile-menu-wrapper, body {
  transition: transform .2s ease-in-out;
}

.menu-open {
  overflow-x: hidden;

  #ftw-mobile-overlay {
    visibility: visible;
  }
  #mobile-menu-wrapper {
    transform: translateX(-100%);
    width: calc(100% - #{$size-mobile-button / 2});
    top: 0;
  }
  body {
    transform: translateX(100%) translateX(-$size-mobile-button / 2);
  }
}

#mobile-menu-wrapper {
  position: absolute;
  z-index: 10;
  width: 100%;
  font-size: $font-size-medium;
  visibility: hidden;

  &.open {
    visibility: visible;
  }
}

.ftw-mobile-buttons {

  li {
    width: $size-mobile-button;

    a {
      @extend .fa-icon;

      color: transparent;
      overflow: hidden;
      white-space: nowrap;
      width: $size-mobile-button;

      &:before {
        @include auto-text-color($color-mobile-button);

        background-color: $color-mobile-button;
        width: $size-mobile-button;
        line-height: $size-mobile-button;
        font-size: $font-size-mobile-button;
      }
    }
  }

  #user-mobile-button a {
    @extend .fa-user;
  }

  #navigation-mobile-button a {
    @extend .fa-navicon;
  }

  ul {
    @include list-horizontal;

    li a {
      padding: 0;
    }
  }

  @include tablet {
    display: none;
  }
}

.mobile-menu:not(.mobile-menu-navigation-mobile-button) {
  width: 100%;
  padding-left: 0;

  li {
    list-style-type: none;
    list-style-image: none;

    > a {
      @include auto-text-color($color-primary);
      @include auto-border-color($color-primary);

      display: block;
      padding: ($padding-vertical * 2) $padding-horizontal;


      background-color: $color-primary;


      border-top: 1px solid;
    }
  }
}

.mobileActionNav {
  @extend .fa-icon;
  width: 1%;
  font-size: 0;
  padding: $padding-vertical 0;
  white-space: nowrap;

  &.down {
    @extend .fa-chevron-right;
  }

  &.up {
    @extend .fa-chevron-left;

    &:before {
      text-align: left;
    }
  }

  &:before {
    @include auto-text-color($color-secondary);
    width: $line-height-base * 2;
  }
}

.topLevelTabs {
  @include tab-list($color-tab: $color-content-background, $color-tab-select: $color-content-background);

  &:before {
    visibility: hidden;
  }

  > li > a {
    background-color: $color-secondary;

    @include auto-text-color($color-secondary);
  }
}

.menu-open .topLevelTabs:before {
  visibility: visible;
}


.mobile-menu.mobile-menu-navigation-mobile-button {
  background-color: $color-secondary;
  padding: $padding-vertical $padding-horizontal;

  > .tabPanes {
    margin-top: $margin-vertical;
  }

  .tabPane ul {
    @include list();

    li {

      > a {
        @include auto-text-color($color-secondary);
        display: table-cell;
        padding: $padding-vertical 0;
        &:before {
          font-size: $font-size-medium;
        }
      }

      > ul {

        li  > a {
          @include auto-text-color();
          background-color: $color-primary;
          padding-left: $padding-horizontal;

          &.mobileActionNav {
            &:before {
              @include auto-text-color();
            }
          }
        }
      }
    }
  }
}

#mobile-menu-wrapper.spinner {
  position: relative;

  &:before {
    position: absolute;
    display: block;
    content: ' ';
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 10;
  }

  &:after {
    position: absolute;
    display: block;
    content: ' ';
    width: 60px;
    height: 60px;
    background-color: #888;
    top: 50%;
    left: 50%;
    margin-left: -20px;
    margin-top: -30px;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
    z-index: 10;
  }
}

@-webkit-keyframes sk-rotateplane {
  0% {
    -webkit-transform: perspective(120px);
  }

  50% {
    -webkit-transform: perspective(120px) rotateY(180deg);
  }

  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
  }
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }

  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
