// prev/next button
[data-carousel-3d] {
  [data-prev-button] {
    position: absolute;
    height: 100%;
    width: 15%;
    top: 0px;
    left: 0px;
  }
  [data-next-button] {
    position: absolute;
    height: 100%;
    width: 15%;
    top: 0px;
    right: 0px;
  }
}



//3d rotate
[data-carousel-3d] {
  position: relative;
  overflow: hidden;

  > [data-children-wrapper] {
    perspective: $perspective;
    -ms-perspective: $perspective;
    -moz-perspective: $perspective;
    -webkit-perspective: $perspective;

    > [data-child] {
      transition: $transition;
      -ms-transition: $transition;
      -moz-transition: $transition;
      -webkit-transition: $transition;
    }
  }
}


//child size
[data-carousel-3d] {
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  > [data-children-wrapper] {

    > [data-child] {
      position: absolute;
      overflow: hidden;
      box-sizing: border-box;
      width: 100%;
      height: 100%;

      > [data-child-frame] {

        > [data-content-wrapper] {
          box-sizing: border-box;
          transform-origin: 0px 0px;
          -ms-transform-origin: 0px 0px;
          -moz-transform-origin: 0px 0px;
          -webkit-transform-origin: 0px 0px;
        }
      }

    }
  }
}


//data-children-wrapper ratio
[data-carousel-3d] {
  &:before {
    padding-top: 100%/$carousel-ratio;
    display: block;
    content: '';
  }

  $children-wrapper-margin: ((($carousel-ratio - $child-ratio) / $carousel-ratio) / 2) * 100%;
  [data-children-wrapper] {
    position: absolute;
    top: 0;
    bottom: 0;
    right: $children-wrapper-margin;
    left: $children-wrapper-margin;
  }
}