$aside-width: 304px !default;
$aside-height: 304px !default;
$aside-transition: 0.2s ease transform !default;
$aside-background: #fff !default;
$aside-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !default;

.aside {
  display: block;
  position: absolute;

  background: $aside-background;

  display: flex;
  flex-direction: column;


  &[type=overlay] {
    z-index: $z-index-aside-overlay;
  }

  transition: $aside-transition;
  &:not(.open):not(.changing) {
    display: none;
  }

  //&[side=left] {
  width: $aside-width;
  left: -$aside-width;
  top: 0;
  bottom: 0;

  transform: translate3d(0, 0, 0);
  &.open,
  &[type=reveal] {
    left: 0;
    //transform: translate3d($aside-width,0,0);
  }
  //}
  &[side=right] {
    width: $aside-width;
    left: 100%;
    top: 0;
    bottom: 0;

    transform: translate3d(0,0,0);
    &.open,
    &[type=reveal] {
      transform: translate3d(-$aside-width,0,0);
    }
  }
  &[side=top] {
    height: $aside-width;
    top: -$aside-width;
    left: 0;
    right: 0;

    transform: translate3d(0,0,0);
    &.open,
    &[type=reveal] {
      transform: translate3d(0,$aside-width,0);
    }
  }
  &[side=bottom] {
    height: $aside-width;
    top: 100%;
    left: 0;
    right: 0;

    transform: translate3d(0,0,0);
    &.open,
    &.type-reveal {
      transform: translate3d(0,-$aside-width,0);
    }
  }

}

.aside-content {
  transition: $aside-transition;
  transform: translate3d(0,0,0);
  box-shadow: $aside-shadow;
  &.aside-open-left {
    transform: translate3d($aside-width,0,0);
  }
  &.aside-open-right {
    transform: translate3d(-$aside-width,0,0);
  }
}