@import "vars";
$site-menubar-section-title-color: $gray-500 !default;
$site-menubar-footer-height: 76px !default;

.mm {
  &-hidden {
    display: none !important;
  }

  &-panels, &-panels > &-panel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    margin: 0;
    background: inherit;
  }

  &-panels {
    $height: calc(100% - #{$site-menubar-footer-height});
    height: 100%;
    height: $height;
    overflow: hidden;
  }

  &-panel {
    height: 100%;
    transition: transform .4s ease;
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);

    &.mm-opened {
      -ms-transform: translate(0, 0);
      transform: translate3d(0, 0, 0);
    }

    &.mm-subopened {
      -ms-transform: translate(-30%, 0);
      transform: translate3d(-30%, 0, 0);
    }

    &.mm-highest {
      z-index: 1;
      visibility: hidden;
    }

    &.mm-highest.mm-opened {
      visibility: visible;
    }

    .mm-navbar {
      display: none;
    }

    &.mm-hasnavbar .mm-navbar {
      display: block;
    }

    &:first-child {
      .mm-navbar {
        display: none;
      }
    }
  }

  &-navbar {
    > a {
      line-height: 46px;
      color: $site-menubar-section-title-color;
    }

    .mm-prev {
      @include make-icon();
      position: absolute;
      left: 20px;
      font-family: "#{$wb-font-family}";

      &:before {
        content: "#{$wb-var-chevron-left-mini}";
      }
    }

    .mm-title {
      display: block;
      padding: 0 20px;
      font-size: 16px;
      font-weight: $font-weight-medium;
      text-indent: 20px;
    }
  }

  &-next {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: 0;
  }

  &-page {
    $height: calc(100% - 44px);
    min-height: 100%;
    min-height: $height;
    background-color: $page-bg;
  }

  &-search {
    padding: 7px 10px 10px;

    input {

      @include form-control-focus();
      display: block;
      width: 100%;
      height: $input-height-base;
      padding: $padding-base-vertical $padding-base-horizontal;
      font-size: $font-size-base;
      line-height: $line-height-base;
      color: $input-color;
      background-color: $input-bg;
      background-image: none;
      border: 1px solid $input-border;
      border-radius: $input-border-radius;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

      // @include placeholder();

      &::-ms-clear {
        display: none;
      }
    }
  }

  &-noresultsmsg {
    display: none;
    padding: 40px 0;
    font-size: 21px;
    text-align: center;

    .mm-noresults & {
      display: block;
    }
  }
}
