/*------------------------------------*\
  Components > Off Canvas
\*------------------------------------*/

$off-canvas-width: 300px;

.c-off-canvas-toggle {
  float: right;
  position: relative;
  top: half($base-spacing-unit);
  z-index: 10;
  height: 19px;
  width: 25px;
  cursor: pointer;

  &__icon {
    position: absolute;
    left: 0;
    height: 1px;
    width: 25px;
    background: $color-text;
    cursor: pointer;

    &:before,
    &:after {
      content: '';
      display: block;
      height: 100%;
      background-color: inherit;
      transition: $global-transition;
    }

    &:before { transform: translateY(16px) }
    &:after { transform: translateY(7px); }

    .c-off-canvas-toggle--close & {
      height: 2px;
      background-color: transparent;

      &:before,
      &:after {
        position: relative;
        visibility: visible;
        background: $color-text;
      }

      &:before {
        top: 11px;
        transform: rotate(-45deg);
      }

      &:after {
        top: 9px;
        transform: rotate(45deg);
      }
    }
  }

  &--close {
    top: 0;
    float: none;
    display: block;
    margin-left: auto;
  }
}

// prevent horizontal scroll during off-canvas

html,
body {
  overflow-x: hidden;
}

.c-off-canvas-content {
  position: fixed;
  top: 0;
  right: 0;
  width: $off-canvas-width;
  height: 100%;
  padding: ($base-spacing-unit + half($base-spacing-unit)) double($base-spacing-unit);
  background-color: $bg-color-white;
  transform: translate3d($off-canvas-width, 0, 0);
}

.c-off-canvas-container {
  transform: translate3d(0, 0, 0);
  transition: transform $global-transition cubic-bezier(.16, .68, .43, .99);

  &.is-active {
    transform: translate3d(- $off-canvas-width, 0, 0);

    &:after {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: '';
      background-color: rgba(0, 0, 0, .2);
    }
  }
}

