.#{$theme-name} {
  .LayerSwipe {
    position: absolute;
    width: 100%;
    height: 100%;
    .handleContainer {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    .vertical,
    .horizontal {
      position: absolute;
      background-color: rgba($Calcite_Gray_700, 0.75);
      padding: 0!important;
      margin: 0;
      z-index: 30;
      @include box-sizing(content-box);
      &:before {
        content: "";
        display: block;
        position: absolute;
        background-color: $Calcite_Gray_700;
      }
      &:hover {
        @include opacity(0.75);
      }
      .handle {
        position: absolute;
        z-index: 30;
        @include dijit-icons;
        font-size: $font-size-base;
        &:before,
        &:after {
          display: block;
          float: left;
          text-align: center;
          background-color: rgba($Calcite_Gray_700, 0.75);
          color: $Calcite_Gray_050;
        }
      }
    }
    .vertical {
      width: $layerswipe-width;
      height: 100%;
      cursor: col-resize;
      &:before {
        left: ($layerswipe-width - 1px) * 0.5;
        height: 100%;
        width: 1px;
      }
      .handle {
        width: $layerswipe-handle-width * 2 + $layerswipe-width;
        height: $layerswipe-handle-height;
        margin-top: - $layerswipe-handle-height * 0.5;
        margin-left: - $layerswipe-handle-width;
        top: 50%;
        left: 0;
        &:before,
        &:after {
          content: "\e602";
          width: $layerswipe-handle-width;
          height: $layerswipe-handle-height;
          line-height: $layerswipe-handle-height / $font-size-base;
        }
        &:before {
          margin-right: $layerswipe-width;
        }
      }
    }
    .horizontal {
      width: 100%;
      height: $layerswipe-width;
      cursor: row-resize;
      &:before {
        top: ($layerswipe-width - 1px) * 0.5;
        height: 1px;
        width: 100%;
      }
      .handle {
        width: $layerswipe-handle-height;
        height: $layerswipe-handle-width * 2 + $layerswipe-width;
        margin-top: - $layerswipe-handle-width;
        margin-left: - $layerswipe-handle-height * 0.5;
        top: 0;
        left: 50%;
        &:before,
        &:after {
          content: "\e601";
          width: $layerswipe-handle-height;
          height: $layerswipe-handle-width;
          line-height: $layerswipe-handle-width / $font-size-base;
        }
        &:before {
          margin-bottom: $layerswipe-width;
        }
      }
    }
    .scope {
      background-color: transparent;
      border-width: 9px;
      border-style: solid;
      border-color: $Calcite_Gray_700;
      overflow: hidden;
      position: absolute;
      cursor: move;
      top: 0;
      left: 0;
      z-index: 30;
      @include opacity(0.75);
      @include transition(opacity .2s ease);
      &:hover {
        @include opacity(1);
      }
      .handleContainer {
        height: $layerswipe-scope-height;
        width: $layerswipe-scope-width;
        border: 5px solid $Calcite_Gray_100;
        @include box-shadow(inset 0 0px 5px $Calcite_Gray_700);
      }
    }
  }
}

