$aside-width: 304px;
$aside-height: 304px;
$aside-transition: 0.3s linear transform;

.aside {
  display: block;
  position: absolute;

  background: #eee;

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

  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] {
      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);
  &.aside-open-left {
    transform: translate3d($aside-width,0,0);
  }
  &.aside-open-right {
    transform: translate3d(-$aside-width,0,0);
  }
}