// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source

//// /// @group off-canvas ////

/// Width of an off-canvas menu. /// @type Number $offcanvas-size: 250px !default;

/// Background color of an off-canvas menu. /// @type Color $offcanvas-background: $light-gray !default;

/// Z-index of an off-canvas menu. /// @type Number $offcanvas-zindex: -1 !default;

/// Length of the animation on an off-canvas menu. /// @type Number $offcanvas-transition-length: 0.5s !default;

/// Timing function of the animation on an off-canvas menu. /// @type Keyword $offcanvas-transition-timing: ease !default;

/// If `true`, a revealed off-canvas will be fixed-position, and scroll with the screen. $offcanvas-fixed-reveal: true !default;

/// Background color for the overlay that appears when an off-canvas menu is open. /// @type Color $offcanvas-exit-background: rgba($white, 0.25) !default;

/// CSS class used for the main content area. The off-canvas mixins use this to target the page body. $maincontent-class: 'off-canvas-content' !default;

/// Box shadow to place under the main content area. This shadow overlaps the off-canvas menus. /// @type Shadow $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;

/// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work. @mixin off-canvas-basics {

// Extra properties needed on <html> and <body> to make off-canvas work
html,
body {
  height: 100%;
}

.off-canvas-wrapper {
  width: 100%;
  overflow-x: hidden;
  position: relative;
  backface-visibility: hidden;
  -webkit-overflow-scrolling: auto;
}

.off-canvas-wrapper-inner {
  @include clearfix;
  position: relative;
  width: 100%;
  transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
}

// Container for page content
.off-canvas-content,
.#{$maincontent-class} {
  min-height: 100%;
  background: $body-background;
  transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
  backface-visibility: hidden;
  z-index: 1;
  padding-bottom: 0.1px; // Prevents margin collapsing, which would reveal the box shadow of the wrapper

  @if has-value($maincontent-shadow) {
    box-shadow: $maincontent-shadow;
  }
}

// Click-to-exit overlay (generated by JavaScript)
.js-off-canvas-exit {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $offcanvas-exit-background;
  cursor: pointer;
  transition: background $offcanvas-transition-length $offcanvas-transition-timing;
}

}

/// Adds basic styles for an off-canvas menu. @mixin off-canvas-base {

@include disable-mouse-outline;
position: absolute;
background: $offcanvas-background;
z-index: $offcanvas-zindex;
max-height: 100%;
overflow-y: auto;
transform: translateX(0);

}

@mixin off-canvas-position(

$position: left,
$size: $offcanvas-size,
$fixed: false

) {

@if $position == left {
  left: -$size;
  top: 0;
  width: $size;
}
@else if $position == right {
  right: -$size;
  top: 0;
  width: $size;
}

// Generates an open state class that matches the width of the menu
@at-root {
  .is-open-#{$position} {
    @if $position == left {
      transform: translateX($size);
    }
    @else if $position == right {
      transform: translateX(-$size);
    }
  }
}

}

/// Adds styles that reveal an off-canvas menu. /// @param {Keyword} $position [left] - Position of the off-canvas menu being revealed. @mixin off-canvas-reveal(

$position: left

) {

#{$position}: 0;
z-index: auto;

@if $offcanvas-fixed-reveal {
  position: fixed;
}

& ~ .#{$maincontent-class} {
  margin-#{$position}: $offcanvas-size;
}

}

@mixin foundation-off-canvas {

@include off-canvas-basics;

// Off-canvas container
.off-canvas {
  @include off-canvas-base;

  &.position-left   { @include off-canvas-position(left); }
  &.position-right  { @include off-canvas-position(right); }
}

// Reveal off-canvas menu on larger screens
@each $name, $value in $breakpoint-classes {
  @if $name != $-zf-zero-breakpoint {
    @include breakpoint($name) {
      .position-left.reveal-for-#{$name} {
        @include off-canvas-reveal(left);
      }

      .position-right.reveal-for-#{$name} {
        @include off-canvas-reveal(right);
      }
    }
  }
}

}