@import 'elements.less';
@import 'fade.less';
@import 'slide.less';
@import 'clear.less';

(~'div@{id}') {
  width: @width;
  height: @height;
  float: left;
  
  .x-rtl &{
      float: right;
  }

  .smart-slider-border1 {
    position: relative;
    padding-top: @paddingt;
    padding-right: @paddingr;
    padding-bottom: @paddingb;
    padding-left: @paddingl;
    height: @inner1height;
    overflow: hidden;
    border-style: solid;
    border-width: @border;
    border-color: @borderhex;
    border-color: @borderrgba;
    .border-radius(@tr, @br, @bl, @tl);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: @bgsize;
  }

  .smart-slider-border2 {
    position: relative;
    width: 100%;
    height: 100%;
    .border-radius(@tr, @br, @bl, @tl);
    overflow: visible;
    
    -moz-perspective: @perspective;
    -webkit-perspective: @perspective;
    perspective: @perspective;
    
    -moz-perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
  }
  
  .smart-slider-pipeline{
      height: 100%;
      width: 10000%;
      float: left;
      position: relative !important;
      -moz-transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
  }
  
  .x-msie & .smart-slider-pipeline{
    perspective: @perspective;
    backface-visibility: visible;
    transform-origin: 50% 50% 0px;
  }

  .smart-slider-canvas {
    position: relative;
    width: @canvaswidth;
    height: @canvasheight;
    float: left;
    display: block;
    margin-right: @distanceh;
    margin-bottom: @distancev;
    outline: 1px solid transparent;
  }
  
  &.smart-slider-showcase-vertical .smart-slider-canvas{
    clear: left;
  }
  
  .smart-slider-overlay{
      width: 100%;
      height: 100%;
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2000000;
      display: block;
      background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
      background: rgba(0,0,0,0.0);
  }
  
  .smart-slider-slide-active .smart-slider-overlay{
      display: none;
  }
  
  .smart-slider-animate-in .smart-slider-overlay,
  .smart-slider-animate-out .smart-slider-overlay{
      display: block;
  }

  .smart-slider-canvas-inner {
    position: relative;
    width: @canvaswidth;
    height: @canvasheight;
  }

  .smart-slider-slide-active {
    z-index: 3;
    display: block;
  }

  .smart-slider-layer {
    position: absolute;
    -webkit-backface-visibility: hidden;
  }
  
}
