@import "global";
@import "type";
@import "top-bar";

// Off Canvas Tab Bar Variables
$include-html-off-canvas-classes: $include-html-classes !default;

$tabbar-bg: #333 !default;
$tabbar-height: rem-calc(45) !default;
$tabbar-line-height: $tabbar-height !default;
$tabbar-color: #FFF !default;
$tabbar-middle-padding: 0 rem-calc(10) !default;

// Off Canvas Divider Styles
$tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%) !default;
$tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%) !default;

// Off Canvas Tab Bar Headers
$tabbar-header-color: #FFF !default;
$tabbar-header-weight: bold !default;
$tabbar-header-line-height: $tabbar-height !default;
$tabbar-header-margin: 0 !default;

// Off Canvas Menu Variables
$off-canvas-width: 250px !default;
$off-canvas-bg: #333 !default;

// Off Canvas Menu List Variables
$off-canvas-label-padding: 0.3rem rem-calc(15) !default;
$off-canvas-label-color: #999 !default;
$off-canvas-label-text-transform: uppercase !default;
$off-canvas-label-font-weight: bold !default;
$off-canvas-label-bg: #444 !default;
$off-canvas-label-border-top: 1px solid scale-color(#444, $lightness: 14%) !default;
$off-canvas-label-border-bottom: none !default;
$off-canvas-label-margin:0 !default;
$off-canvas-link-padding: rem-calc(10, 15) !default;
$off-canvas-link-color: rgba(#FFF, 0.7) !default;
$off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%) !default;

// Off Canvas Menu Icon Variables
$tabbar-menu-icon-color: #FFF !default;
$tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%) !default;

$tabbar-menu-icon-text-indent: rem-calc(35) !default;
$tabbar-menu-icon-width: $tabbar-height !default;
$tabbar-menu-icon-height: $tabbar-height !default;
$tabbar-menu-icon-line-height: rem-calc(33) !default;
$tabbar-menu-icon-padding: 0 !default;

$tabbar-hamburger-icon-width: rem-calc(16) !default;
$tabbar-hamburger-icon-left: rem-calc(13) !default;
$tabbar-hamburger-icon-top: rem-calc(5) !default;

// Off Canvas Back-Link Overlay
$off-canvas-overlay-transition: background 300ms ease !default;
$off-canvas-overlay-cursor: pointer !default;
$off-canvas-overlay-box-shadow: -4px 0 4px rgba(#000, 0.5), 4px 0 4px rgba(#000, 0.5) !default;
$off-canvas-overlay-background: rgba(#FFF, 0.2) !default;
$off-canvas-overlay-background-hover: rgba(#FFF, 0.05) !default;

// Transition Variabls
$menu-slide: "transform 500ms ease" !default;


// EXTEND CLASSES
// Remove transition flicker on phones
@mixin kill-flicker {
  // -webkit-transform: translateZ(0x);
  -webkit-backface-visibility: hidden;
}

// Basic properties for the content wraps
@mixin wrap-base {
  position: relative;
  width: 100%;
}

// basic styles for off-canvas menu container
@mixin off-canvas-menu {
  width: $off-canvas-width;
  top:0;
  bottom:0;
  height: 100%;
  position: absolute;
  overflow-y: auto;
  background: $off-canvas-bg;
  z-index: 1001;
  box-sizing: content-box;
}

// TRANSLATE 3D
@mixin translate3d($tx,$ty,$tz) {
  -webkit-transform: translate3d($tx,$ty,$tz);
  -moz-transform: translate3d($tx,$ty,$tz);
  -ms-transform: translate3d($tx,$ty,$tz);
  -o-transform: translate3d($tx,$ty,$tz);
  transform: translate3d($tx,$ty,$tz)
}

// OFF CANVAS WRAP
// Wrap visible content and prevent scroll bars
@mixin off-canvas-wrap {
    @include kill-flicker;
    @include wrap-base;
    overflow: hidden;
}

// INNER WRAP
// Main content area that moves to reveal the off-canvas nav
@mixin inner-wrap {
    @include kill-flicker;
    @include wrap-base;
    @include clearfix;

    -webkit-transition: -webkit-#{$menu-slide};
    -moz-transition: -moz-#{$menu-slide};
    -ms-transition: -ms-#{$menu-slide};
    -o-transition: -o-#{$menu-slide};
    transition: #{$menu-slide};

}

// TAB BAR
// This is the tab bar base
@mixin tab-bar-base {
  @include kill-flicker;

  // base styles
  background: $tabbar-bg;
  color: $tabbar-color;
  height: $tabbar-height;
  line-height: $tabbar-height;

  // make sure it's below the .exit-offcanvas link
  position: relative;
  // z-index: 999;

  // Typography
  h1,h2,h3,h4,h5,h6 {
    color: $tabbar-header-color;
    font-weight: $tabbar-header-weight;
    line-height: $tabbar-header-line-height;
    margin: $tabbar-header-margin;
  }
  h1,h2,h3,h4 { font-size: $h5-font-size; }
}

// SMALL SECTIONS
// These are small sections on the left and right that contain the off-canvas toggle buttons;
@mixin tabbar-small-section {
  width: $tabbar-height;
  height: $tabbar-height;
  position: absolute;
  top:0;
}

@mixin left-small-section {
  @include tabbar-small-section;
  border-right: $tabbar-left-section-border;
  box-shadow: 1px 0 0 scale-color($tabbar-bg, $lightness: 13%);
  left:0;
}

@mixin right-small-section {
  @include tabbar-small-section;
  border-left: $tabbar-right-section-border;
  box-shadow: -1px 0 0 scale-color($tabbar-bg, $lightness: -50%);
  right:0;
}

@mixin tab-bar-section {
  padding: $tabbar-middle-padding;
  position: absolute;
  text-align: center;
  height: $tabbar-height;
  top:0;
  @media #{$medium-up} {
    text-align: left;
  }

  // still need to make these non-presntational
  &.left {
    left: 0;
    right: $tabbar-height;
  }
  &.right {
    left: $tabbar-height;
    right: 0;
  }
  &.middle {
    left: $tabbar-height;
    right: $tabbar-height;
  }
}

// OFF CANVAS LIST
// This is the list of links in the off-canvas menu
@mixin off-canvas-list {
  list-style-type: none;
  padding:0;
  margin:0;

  li {
    label {
      padding: $off-canvas-label-padding;
      color: $off-canvas-label-color;
      text-transform: $off-canvas-label-text-transform;
      font-weight: $off-canvas-label-font-weight;
      background: $off-canvas-label-bg;
      border-top: $off-canvas-label-border-top;
      border-bottom: $off-canvas-label-border-bottom;
      margin: $off-canvas-label-margin;
    }
    a {
      display: block;
      padding: $off-canvas-link-padding;
      color: $off-canvas-link-color;
      border-bottom: $off-canvas-link-border-bottom;
    }
  }

}

// BACK LINK
// This is an overlay that, when clicked, will toggle off the off canvas menu
@mixin back-link {
    @include kill-flicker;

    transition: $off-canvas-overlay-transition;
    cursor: $off-canvas-overlay-cursor;
    box-shadow: $off-canvas-overlay-box-shadow;

    // fill the screen
    display: block;
    position: absolute;
    background: $off-canvas-overlay-background;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    z-index: 1002;
    -webkit-tap-highlight-color: rgba(0,0,0,0);

    @media #{$medium-up} {
      &:hover {
        background: $off-canvas-overlay-background-hover;
      }
    }
}

// OFF CANVAS MENUS
// These are the containers that contain the off canvas content
@mixin left-off-canvas-menu {
  @include kill-flicker;
  @include off-canvas-menu;
  @include translate3d(-100%,0,0);
  * { @include kill-flicker; }
}
@mixin right-off-canvas-menu {
  @include kill-flicker;
  @include off-canvas-menu;
  @include translate3d(100%,0,0);
  right:0;
}


//
// DEFAULT CLASSES
//

@if $include-html-off-canvas-classes {

  .off-canvas-wrap { @include off-canvas-wrap; }
  .inner-wrap { @include inner-wrap; }

  nav.tab-bar { @include tab-bar-base; }

  section.left-small { @include left-small-section; }
  section.right-small { @include right-small-section; }

  section.tab-bar-section { @include tab-bar-section; }

  // MENU BUTTON
  // This is a little bonus. You don't need it for off canvas to work. Mixins to be written in the future.
  a.menu-icon {
    text-indent: $tabbar-menu-icon-text-indent;
    width: $tabbar-height;
    height: $tabbar-height;
    display: block;
    line-height: $tabbar-menu-icon-line-height;
    padding: $tabbar-menu-icon-padding;
    color: $topbar-menu-link-color;
    position: relative;

    // this is the actual hamburger icon
    span {

      position: absolute;
      display: block;
      width: $tabbar-hamburger-icon-width;
      height: 0;
      left: $tabbar-hamburger-icon-left;
      top: $tabbar-hamburger-icon-top;
      // margin-top: $tabbar-height / 4;

      @if $experimental {
        -webkit-box-shadow: 1px 10px 1px 1px $tabbar-menu-icon-color,
                            1px 16px 1px 1px $tabbar-menu-icon-color,
                            1px 22px 1px 1px $tabbar-menu-icon-color;
      }
        box-shadow:        0 10px 0 1px $tabbar-menu-icon-color,
                            0 16px 0 1px $tabbar-menu-icon-color,
                            0 22px 0 1px $tabbar-menu-icon-color;
    }

    &:hover span {
      @if $experimental {
        -webkit-box-shadow: 1px 10px 1px 1px $tabbar-menu-icon-hover,
                            1px 16px 1px 1px $tabbar-menu-icon-hover,
                            1px 22px 1px 1px $tabbar-menu-icon-hover;
      }
        box-shadow:        0 10px 0 1px $tabbar-menu-icon-hover,
                            0 16px 0 1px $tabbar-menu-icon-hover,
                            0 22px 0 1px $tabbar-menu-icon-hover;
    }
  }

  .left-off-canvas-menu { @include left-off-canvas-menu; }
  .right-off-canvas-menu { @include right-off-canvas-menu; }

  ul.off-canvas-list { @include off-canvas-list; }


  // ANIMATION CLASSES
  // These classes are added with JS and trigger the actual animation.
  .move-right {
    > .inner-wrap {
      @include translate3d($off-canvas-width,0,0);
    }
    a.exit-off-canvas { @include back-link;}
  }

  .move-left {
    > .inner-wrap {
      @include translate3d(-($off-canvas-width),0,0);

    }
    a.exit-off-canvas { @include back-link; }
  }

  // Opera 12.16 and IE9 - don't have 3d transforms
  .csstransforms.no-csstransforms3d {
    .left-off-canvas-menu { @include translate2d(-100%, 0); }
    .right-off-canvas-menu { @include translate2d(100%, 0); }

    .move-left > .inner-wrap { @include translate2d(-($off-canvas-width),0); }
    .move-right > .inner-wrap { @include translate2d($off-canvas-width,0); }
  }

  // Older browsers
  .no-csstransforms {
    .left-off-canvas-menu { left: -($off-canvas-width); }
    .right-off-canvas-menu { right: -($off-canvas-width); }

    .move-left > .inner-wrap { right: $off-canvas-width; }
    .move-right > .inner-wrap { left: $off-canvas-width; }
  }

}


