// Sidebar

.sidebar {
  @include transition(left 0.3s ease-in-out);
}

.content {
  @include transition(left 0.3s ease-in-out, right 0.3s ease-in-out);
}

body.sidebar-closed {
  .sidebar {
    left: -$sidebar_width;
  }

  .content {
    left: 0px;
  }
}

body.slide-right-sidebar {
  .sidebar {
    left: 0px;
  }
}

// Live editing

body.live-editing {

  // SIDEBAR
  .slide-sidebar {
    .bar {
      @include transition(opacity 0.3s ease-in-out);
    }
    .sidebar {
      @include transform(translate3d(0, 0, 0));
      @include transition(transform 0.2s ease-in-out);
    }

    &:hover {
      .bar {
        @include opacity(0);
      }
      .sidebar {
        @include transform(translate3d($sidebar_width, 0, 0));
      }
    }
  }


  // STATE: SHRINKED

  .content {
    @include transform(translate3d(0, 0, 0));
    @include transition(transform 0.3s ease-in-out);

    > .inner {
      @include transition(opacity 0.0s ease-in-out);
    }

    .close-button {
      @include transition(opacity 0.0s ease-in-out);
    }
  }

  .preview {
    @include transform(translate3d(0, 0, 0));
    @include transition(transform 0.3s ease-in-out, border-left-width 0.6s ease);
  }

  &.full-width-preview {

    // STATE: EXPANDED

    .content {
      @include transform(translate3d($live_editing_content_width - $live_editing_expand_bar_width, 0, 0));

      @include transition(transform 0.3s ease-in-out, background-color 0.1s ease-in-out 0.2s);
      > .inner {
        @include transition(opacity 0.1s ease-in-out 0.2s);
      }

      .close-button {
        @include transition(opacity 0.2s ease-in-out 0.2s);
      }
    }

    .preview {
      @include transform(translate3d($live_editing_content_width - $live_editing_expand_bar_width, 0, 0));
      border-left-width: $live_editing_expand_bar_width;
      @include transition(transform 0.3s ease-in-out);
    }

  }

}

// Drawer

.content > .overlay {
  @include transition(all 0.5s ease-in-out);
}

.content::after {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0px;
  bottom: 0px;
  width: 0px;
  height: 0px;
  background: $overlay_background;
  @include opacity(0.0);
  @include transition(opacity 0.3s ease-in-out, width 0.1s 0.3s, height 0.1s 0.3s);
  content: '';
}

.drawer {
  @include transition(all 0.3s ease-in-out);
  @include transform(translate3d(100%, 0, 0));
}

body.drawer-opened {

  .content::after {
    width: 100%;
    height: 100%;
    @include opacity(0.3);
    @include transition(opacity 0.3s ease-in-out);
  }

  .drawer {
    @include transform(translate3d(0, 0, 0));

    > .inner > div {
      @include transition(opacity 0.05s ease-in-out);

      &.fadeout {
        @include opacity(0);
      }

      &.fadein {
        @include opacity(1);
      }
    }
  }

}

// body.inline-editing {

//   .content {
//     @include transition(left 0.3s ease-in-out, right 0.1s linear);
//   }

//   .drawer {
//     @include transition(all 0.1s linear);
//   }
// }