//
// Drag and Drop
// --------------------------------------------------

/**
 * gridster.js - v0.2.1 - 2013-10-28 * http://gridster.net
 * Copyright (c) 2013 ducksboard; Licensed MIT
 */

.gridster {
  position: relative;
  margin: 0;
  height: 0;

  > ul {
    margin: 0;
    list-style: none;
    padding: 0;
  }

  &-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    list-style: none;
    z-index: 2;
    position: absolute;
    display: none;

    &:hover {
      .gridster-box {
        border-style: solid;

        @include themes(border-width, gridster-hover-border-color);
        @include themes(border-color, gridster-hover-border-color);
      }

      .handle-se {
        border-color: transparent;

        @include themes(border-bottom-color, gridster-hover-border-color);
      }
    }

    &.ng-leave.ng-leave-active {
      opacity: 0;
    }

    &.ng-enter {
      opacity: 1;
    }

    &-moving {
      z-index: 3;
    }

    &-resizable-handler {
      position: absolute;
      font-size: 1px;
      display: block;
      z-index: 5;
    }
  }

  &-loaded {
    @include transition(height 0.3s);

    .gridster-item {
      display: block;
      position: absolute;

      @include transition(
        opacity 0.3s,
        left 0.3s,
        top 0.3s,
        width 0.3s,
        height 0.3s
      );
      @include transition-delay(50ms);
    }

    .gridster-preview-holder {
      display: none;
      z-index: 1;
      position: absolute;
      border-radius: $panel-border-radius;

      @include themes(background-color, gridster-preview-holder-bg);
    }
  }

  &-item.gridster-item-moving,
  &-loaded .gridster-preview-holder {
    @include transition(none);
  }

  &-mobile {
    height: auto !important;

    .gridster-item {
      height: auto;
      position: static;
      float: none;
    }
  }
}

.handle {
  &-se {
    cursor: se-resize;
    width: 0;
    height: 0;
    right: 1px;
    bottom: 1px;
    border-style: solid;
    border-width: 0 0 12px 12px;
    border-color: transparent;
  }

  &-ne {
    cursor: ne-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    top: 1px;
  }

  &-nw {
    cursor: nw-resize;
    width: 12px;
    height: 12px;
    left: 1px;
    top: 1px;
  }

  &-sw {
    cursor: sw-resize;
    width: 12px;
    height: 12px;
    left: 1px;
    bottom: 1px;
  }

  &-e {
    cursor: e-resize;
    width: 12px;
    bottom: 0;
    right: 1px;
    top: 0;
  }

  &-s {
    cursor: s-resize;
    height: 12px;
    right: 0;
    bottom: 1px;
    left: 0;
  }

  &-n {
    cursor: n-resize;
    height: 12px;
    right: 0;
    top: 1px;
    left: 0;
  }

  &-w {
    cursor: w-resize;
    width: 12px;
    left: 1px;
    top: 0;
    bottom: 0;
  }
}