// Pushy - v1.1.0 - 2017-1-30
// Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
// https://github.com/christophery/pushy/
// by Christopher Yee

@pushy-width: 300px;

.pushy {
  position: fixed;
  width: @pushy-width;
  height: 100%;
  top: 0;
  z-index: 9999;
  background: @brand-dark;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
   // enables momentum scrolling in iOS overflow elements 
}

.pushy.pushy-left {
  left: 0;
}

.pushy.pushy-right {
  right: 0;
}

.pushy-content {
  visibility: hidden;
}

.pushy-left {
  -webkit-transform: translate3d(-@pushy-width, 0, 0);
  -ms-transform: translate3d(-@pushy-width, 0, 0);
  transform: translate3d(-@pushy-width, 0, 0);
}

.pushy-open-left #container,
.pushy-open-left .push {
  -webkit-transform: translate3d(@pushy-width, 0, 0);
  -ms-transform: translate3d(@pushy-width, 0, 0);
  transform: translate3d(@pushy-width, 0, 0);
}

.pushy-right {
  -webkit-transform: translate3d(@pushy-width, 0, 0);
  -ms-transform: translate3d(@pushy-width, 0, 0);
  transform: translate3d(@pushy-width, 0, 0);
}

.pushy-open-right #container,
.pushy-open-right .push {
  -webkit-transform: translate3d(-@pushy-width, 0, 0);
  -ms-transform: translate3d(-@pushy-width, 0, 0);
  transform: translate3d(-@pushy-width, 0, 0);
}

.pushy-open-left .pushy,
.pushy-open-right .pushy {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.pushy-open-left .pushy-content,
.pushy-open-right .pushy-content {
  visibility: visible;
}

// Menu Transitions
#container,
.pushy,
.push {
  transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

.pushy-content {
  transition: visibility 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

// Site Overlay 
.site-overlay {
  display: none;
}

.pushy-open-left .site-overlay,
.pushy-open-right .site-overlay {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-animation: fade 500ms;
  animation: fade 500ms;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body.pushy-open-left {

  .pushy {
    .box-shadow(0 0 50px #000);
  }
}

.pushy {
  overflow-x: hidden;

  &-content {
    padding: 60px 30px;
  }

  .box {

    + .box {
      margin-top: 60px;
    }

    &__caption {
      color: @brand-accent;

      span {
        display: inline;
        background: none;
        padding: 0;
      }
    }

    &__content {

      p {
        color: lighten(@brand-dark, 25%);
      }
    }
  }
}

.b-menu {
  margin: 0 -30px !important;
  padding: 0;
  list-style-type: none;

  > li {
    margin: 0;
    border-bottom: 1px solid lighten(@brand-dark, 3%);

    > a {
      display: block;
      padding: 15px 30px;
      color: fade(#fff, 50%);
      text-decoration: none;

      &:hover {
        color: @brand-accent;
      }

      .fa {
        float: right;
        height: 20px;
        width: 14px;
        line-height: 20px;
        color: @brand-accent;
      }
    }

    &.m_add_article > a {
      position: relative;

      &::after {
        .fe();
        content: "\e083";
        float: right;
        color: @brand-accent;
        font-size: 18px;
        top: -1px;
      }
    }

    .dropdown-menu {
      position: static;
      float: none;
      margin: 0;
      padding: 0;
      background-color: lighten(@brand-dark, 1%);

      > li {
        border-bottom: 1px solid lighten(@brand-dark, 3%);
        margin: 0;

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

        > a {
          padding: 15px 30px 15px 60px;
          color: fade(#fff, 40%);

          &:hover {
            background-color: transparent;
            color: @brand-accent;
          }
        }

        &.active > a,
        &.active > a:hover,
        &.active > a:focus {
          background: @brand-accent;
          color: #fff;
        }
      }
    }
  }
}



.b-cats {
  .clearfix();

  > a {
    display: block;
    float: left;
    background: lighten(@brand-dark, 3%);
    padding: 2px 6px;
    margin: 0 5px 5px 0;
    color: fade(#fff, 40%);
    text-decoration: none;
    font-size: 12px;
    border-radius: 2px;

    &:hover {
      background: @brand-accent;
      color: #fff;
      text-decoration: none;
    }
  }
}
