@charset "utf-8";

@mixin sides_root_box($direction:'row') {
  position: relative !important;
  @if $direction == "row" {
    transform-origin: 50% 100%;
  } @else if $direction == "column" {
    transform-origin: 100% 50%;
  }
  perspective: 1000px;
  transform-style: preserve-3d;
}

@mixin sides_front_box {
  z-index: 10;
  backface-visibility: hidden;
  position: relative !important;
}

@mixin sides_back_box($direction:'row') {
  z-index: 5;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  @if $direction == "row" {
    transform: rotateY(180deg);
  } @else if $direction == "column" {
    transform: rotateX(180deg);
  }
  backface-visibility: hidden;
}