@import '@{clear}';

(~'div@{id}') {
  width: @width;
  height: @height;
  float: left;

  .x-rtl & {
    float: right;
  }

  .n2-ss-slider-1 {
    position: relative;
    padding: @border1;
    height: @border1height;
    width: @border1width;
    overflow: hidden;
    background-color: @border1hex;
    background-color: @border1rgba;

    border-radius: @borderRadius;
    background-clip: padding-box;
  }

  .n2-ss-slider-2 {
    position: relative;
    padding: @border2;
    height: @border2height;
    width: @border2width;
    background-color: @border2hex;
    background-color: @border2rgba;
    border-radius: @borderRadius;
  }

  &.n2-accordion-horizontal .n2-ss-slide {
    float: left;
  }

  .n2-accordion-title {
    width: @titlewidth;
    height: @titleheight;
    float: left;
    cursor: pointer;
    background-color: @tabbg;
    border-radius: @titleBorderRadius;
    z-index: 2;
    position: relative;
    overflow: hidden;
  }

  &.n2-accordion-horizontal .n2-accordion-title {
    margin-top: @slidemargin;
    margin-right: 0;
    margin-bottom: @slidemargin;
    margin-left: @slidemargin;
  }

  &.n2-accordion-horizontal .n2-accordion-title-inner {
    margin: 3px;
    overflow: hidden;
    direction: ltr;

    .n2-accordion-title-rotate-90 {
      margin-top: @orientationmargin;
      margin-bottom: @orientationmargin;
      width: (@titleheight - @orientationmargin*2 - 6);
      height: (@titleheight - @orientationmargin*2 - 6);
      line-height: (@titlewidth - 6);

      transform: translateX(-100%) rotate(-90deg);
      transform-origin: right top;
      /* Firefox */
      -moz-transform: translateX(-100%) rotate(-90deg);
      -moz-transform-origin: right top;
      /* webkit (Chrome, Safari, mobile browsers, etc) */
      -webkit-transform: translateX(-100%) rotate(-90deg);
      -webkit-transform-origin: right top;
      /* Opera */
      -o-transform: translateX(-100%) rotate(-90deg);
      -o-transform-origin: right top;
      /* IE>=9 */
      -ms-transform: translateX(-100%) rotate(-90deg);
      -ms-transform-origin: right top;
      /* IE8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
      /* IE<8 */
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
  }

  .x-msie-9 &.n2-accordion-horizontal .n2-accordion-title .n2-accordion-title-rotate-90 {
    -ms-transform: none;
  }

  &.n2-accordion-vertical .n2-accordion-title {
    margin-top: @slidemargin;
    margin-bottom: 0;
    margin-right: @slidemargin;
    margin-left: @slidemargin;
  }

  &.n2-accordion-vertical .n2-accordion-title-inner {
    margin: 3px @orientationmargin 3px @orientationmargin;
    overflow: hidden;
    width: (@titlewidth - @orientationmargin*2);
    height: (@titleheight - 6);
    line-height: (@titleheight - 6);
  }

  .n2-accordion-title:HOVER,
  .n2-ss-slide-active .n2-accordion-title {
    background-color: @tabbgactive;
    box-shadow: 0 0 0 1px RGBA(255, 255, 255, .05) inset;
  }

  &.n2-accordion-horizontal .n2-accordion-title:HOVER,
  &.n2-accordion-horizontal .n2-ss-slide-active .n2-accordion-title {
    .n2-accordion-title-rotate-90 {
      line-height: (@titlewidth - 6);
    }
  }

  .n2-ss-slide-active .n2-accordion-title {
    cursor: default;
  }

  &.n2-accordion-horizontal .n2-ss-slide-active .n2-accordion-title {

    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: @titleBorderRadius;
    border-top-left-radius: @titleBorderRadius;
    background-clip: padding-box;
  }

  &.n2-accordion-vertical .n2-ss-slide-active .n2-accordion-title {
    border-top-right-radius: @titleBorderRadius;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: @titleBorderRadius;
    background-clip: padding-box;
  }

  .n2-accordion-slide {
    position: relative;
    z-index: 1;
    float: left;
    width: 0;
    overflow: hidden;
    background: #fff;

    border-top-right-radius: @titleBorderRadius;
    border-bottom-right-radius: @titleBorderRadius;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    background-clip: padding-box;
  }

  &.n2-accordion-horizontal .n2-accordion-slide {
    height: @canvasheight;
    margin-top: @slidemargin;
    margin-right: @slidemargin;
    margin-bottom: @slidemargin;
    margin-left: 0;
  }

  &.n2-accordion-vertical .n2-accordion-slide {
    width: @canvaswidth;
    height: 0;
    margin-left: @slidemargin;
    margin-right: @slidemargin;
    margin-bottom: @slidemargin;
    margin-top: 0;
  }

  &.n2-accordion-horizontal .n2-ss-slide-active .n2-accordion-slide {
    width: @canvaswidth;
  }

  &.n2-accordion-vertical .n2-ss-slide-active .n2-accordion-slide {
    height: @canvasheight;
  }

  .n2-ss-canvas {
    width: @canvaswidth;
    height: @canvasheight;
  }
}
