/*

Off-Canvas

There's available a nice off-canvas sidebar functionality adapted from [Codrops](http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations).

Script required: **rapido.js**.

    <div id="offcanvas__container" class="offcanvas__container">
      <nav class="offcanvas__menu">
        [...nav content...]
      </nav>
      <div class="offcanvas__pusher">
        <div class="offcanvas__content">
          [...main content...]
        </div>
      </div>
    </div>

Styleguide 15

*/

/*

Off-Canvas JS

Include this js after including rapido.js.

    $('.offcanvas__menu--toggle').rapido_Offcanvas();

**Options** (with default values):

    toggleClass:     offcanvas__menu--open
    containerClass:  .offcanvas__container
    menuClass:       .offcanvas__menu

For opening and closing the sidebar add the class `offcanvas__menu--toggle` to a link or button.

Styleguide 15.2

*/


@if $offcanvas {

  $if-left: null;
  $if-right: null;
  $if-3d: null;
  $if-width: null;

  @if $offcanvas-direction == 'left' {
    $if-left: 0px;
    $if-right: 0;
    $if-3d: -100%;
    $if-width: $offcanvas-width;
  } @else {
    $if-left: 0;
    $if-right: 0px;
    $if-3d: 100%;
    $if-width: neg($offcanvas-width);
  }

  html,
  body,
  .offcanvas__container,
  .offcanvas__pusher,
  .offcanvas__content {
    height: 100%;

  }

  .offcanvas__container {
    overflow: hidden;
    position: relative;
  }

  // ----------------------------------------------------------------------------

  .offcanvas__pusher {
    @include position(relative, 0 $if-right 0 $if-left);
    @include transition(transform $offcanvas-animations-duration);
    z-index: $zindex-offcanvas;


    &::after {
      @include opacity(0);
      @include position(absolute, 0px $if-left 0 $if-right);
      @include square(0);
      @include transition(opacity $offcanvas-animations-duration, width $offcanvas-animations-duration/4 $offcanvas-animations-duration);
      content: '';
      z-index: ($zindex-offcanvas + 1);

      @if $offcanvas-dim {
        @extend %nav--offcanvas__dim !optional;
      }
    }
  }

  .offcanvas__content {
    overflow-y: auto;
    position: relative;
    background: $body-color;
  }

  // .offcanvas__content-inner {
  //   position: relative;
  // }

  // ----------------------------------------------------------------------------

  .offcanvas__menu--toggle {
      @extend %nav--offcanvas__toggle !optional;
  }

  .offcanvas__menu--open {

    .offcanvas__pusher::after {
      @include opacity(1);
      @include square(100%);
      @include transition(opacity $offcanvas-animations-duration);
    }

    .offcanvas__menu::after {
      @include opacity(0);
      @include square(0);
      @include transition(opacity $offcanvas-animations-duration, width $offcanvas-animations-duration/4 $offcanvas-animations-duration);
    }
  }

  .offcanvas__menu {
    @extend %nav--offcanvas !optional;
    @include position(absolute, 0px $if-right 0 $if-left);
    @include size(100%, $offcanvas-width);
    @include transition(all $offcanvas-animations-duration);
    overflow-y: auto;
    visibility: hidden;
    z-index: $zindex-offcanvas+1;

    &::after {
      @include opacity(1);
      @include position(absolute, 0px $if-left 0 $if-right);
      @include square(100%);
      @include transition(opacity $offcanvas-animations-duration);
      content: '';

      @if $offcanvas-dim {
        @extend %nav--offcanvas__dim !optional;
      }
    }

  }

  // ----------------------------------------------------------------------------

  @if $offcanvas-effect == 'cover' {

    .offcanvas__container {

      .offcanvas__menu {
        @include translate3d($if-3d, 0, 0);
        visibility: visible;

        &::after {
          display: none;
        }
      }

      &.offcanvas__menu--open {

        .offcanvas__menu {
          @include translate3d(0, 0, 0);
          visibility: visible;
        }
      }
    }
  }

  // ----------------------------------------------------------------------------

  @if $offcanvas-effect == 'reveal' {

    .offcanvas__container {

      &.offcanvas__menu--open {

        .offcanvas__pusher {
          @include translate3d($if-width, 0, 0);
        }

        .offcanvas__menu {
          @include transition(transform $offcanvas-animations-duration);
          visibility: visible;
        }
      }

      .offcanvas__menu {
        z-index: 1;

        &::after {
          display: none;
        }
      }
    }
  }

  // ----------------------------------------------------------------------------

  @if $offcanvas-effect == 'push' {

    .offcanvas__container {

      &.offcanvas__menu--open {

        .offcanvas__pusher {
          @include translate3d($if-width, 0, 0);
        }

        .offcanvas__menu {
          @include transition(transform $offcanvas-animations-duration);
          visibility: visible;
          @include translate3d(0, 0, 0);
        }
      }

      .offcanvas__menu {
        @include translate3d($if-3d, 0, 0);

        &::after {
          display: none;
        }
      }
    }
  }

  // ----------------------------------------------------------------------------

  @if $offcanvas-effect == 'slide' {

    .offcanvas__container {

      &.offcanvas__menu--open {

        .offcanvas__pusher {
          @include translate3d($if-width, 0, 0);
        }

        .offcanvas__menu {
          @include transition(transform $offcanvas-animations-duration);
          @include translate3d(0, 0, 0);
          visibility: visible;
        }
      }

      .offcanvas__menu {
        z-index: 1;
        @include translate3d($if-3d/2, 0, 0);

        &::after {
          display: none;
        }
      }
    }
  }

  // ----------------------------------------------------------------------------

  .no-csstransforms3d, .no-js {

    .offcanvas__pusher {
      padding-left: $offcanvas-width;
    }

    .offcanvas__menu {
      visibility: visible;
    }

  }

}