/*
	Off-canvas menu
  ---------------

  A generic container that stays fixed to the left, top, right, or bottom of the screen, and is summoned when needed. When an off-canvas panel is open, the app frame shifts over to reveal the menu.
*/

/// @Foundation.settings
// Off-canvas
$offcanvas-size-horizontal: 250px !default;
$offcanvas-size-vertical: 250px !default;

$offcanvas-background: #fff !default;
$offcanvas-color: isitlight($offcanvas-background) !default;
$offcanvas-padding: 0 !default;
$offcanvas-shadow: 3px 0 10px rgba(black, 0.25) !default;
$offcanvas-animation-speed: 0.25s !default;

$offcanvas-frame-selector: ".grid-frame" !default;
///

%off-canvas {
    position: fixed;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform $offcanvas-animation-speed ease-out;
    z-index: 2;

    // Active state
    &.is-active {
        transform: translate(0, 0) !important;
    }

    // Frame styles
    & ~ #{$offcanvas-frame-selector} {
        transform: translate(0, 0, 0);
        transition: transform 0.25s ease-out;
        backface-visibility: hidden;
        background: white;
    }
}
@mixin off-canvas-detached {
    z-index: 0;
    box-shadow: none;

    &,
    &.is-active {
        transform: none;
    }

    & ~ #{$offcanvas-frame-selector} {
        z-index: 1;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    }
}

@mixin off-canvas-layout(
    $position: left,
    $size: default,
    $shadow: $offcanvas-shadow
) {
    /* Get shadow values for later use */
    $shadow-length: "";
    $shadow-size: "";
    $shadow-color: "";
    @if hasvalue($shadow) {
        $shadow-length: get-shadow-value($shadow, x);
        $shadow-size: get-shadow-value($shadow, size);
        $shadow-color: get-shadow-value($shadow, color);
    }
    /* Sizing */

    @if $position == left or $position == right {
        @if $size == default {
            $size: $offcanvas-size-horizontal;
        }
        width: $size;
        height: 100%;
    } @else {
        @if $size == default {
            $size: $offcanvas-size-vertical;
        }
        height: $size;
        width: 100%;
    }
    /* Positioning */

    @if $position == left {
        top: 0;
        left: 0;
        @if hasvalue($shadow) {
            box-shadow: inset (-$shadow-length) 0 $shadow-size $shadow-color;
        }
        transform: translateX(-100%);
        &.is-active {
            & ~ #{$offcanvas-frame-selector} {
                transform: translateX($size) !important;
            }
        }
    } @else if $position == right {
        left: auto;
        top: 0;
        right: 0;
        @if hasvalue($shadow) {
            box-shadow: inset $shadow-length 0 $shadow-size $shadow-color;
        }
        transform: translateX(100%);
        &.is-active {
            & ~ #{$offcanvas-frame-selector} {
                transform: translateX(-$size) !important;
            }
        }
    } @else if $position == top {
        top: 0;
        left: 0;
        transform: translateY(-100%);
        @if hasvalue($shadow) {
            box-shadow: inset 0 (-$shadow-length) $shadow-size $shadow-color;
        }
        &.is-active {
            & ~ #{$offcanvas-frame-selector} {
                transform: translateY($size) !important;
            }
        }
    } @else if $position == bottom {
        top: auto;
        bottom: 0;
        left: 0;
        transform: translateY(100%);
        @if hasvalue($shadow) {
            box-shadow: inset 0 $shadow-length $shadow-size $shadow-color;
        }
        &.is-active {
            & ~ #{$offcanvas-frame-selector} {
                transform: translateY(-$size) !important;
            }
        }
    }
}
@mixin off-canvas-style(
    $background: $offcanvas-background,
    $color: $offcanvas-color,
    $padding: $offcanvas-padding
) {
    background: $background;
    @if $color == auto {
        color: isitlight($background, #000, #fff);
    } @else {
        color: $color;
    }
    @if hasvalue($padding) {
        padding: $padding;
    }
}
@include exports(off-canvas) {
    .off-canvas {
        @extend %off-canvas;
        @include off-canvas-layout;
        @include off-canvas-style;

        &.top {
            @include off-canvas-layout(top);
        }
        &.right {
            @include off-canvas-layout(right);
        }
        &.bottom {
            @include off-canvas-layout(bottom);
        }
        &.left {
            @include off-canvas-layout(left);
        }
        &.detached {
            @include off-canvas-detached;
        }
        &.primary {
            @include off-canvas-style($primary-color, auto);
        }
        &.dark {
            @include off-canvas-style($dark-color, auto);
        }
    }
}
