@import "vars";
$gridstack-columns: 12;
$horizontal_padding: 20px;
$vertical_padding: 20px;
$animation_speed: .3s;

@mixin vendor($property, $value...) {
  -webkit-#{$property}: $value;
  -moz-#{$property}: $value;
  -ms-#{$property}: $value;
  -o-#{$property}: $value;
  #{$property}: $value;
}

:root .grid-stack-item > .ui-resizable-handle {
  filter: none;
}

.grid-stack {
  position: relative;

  .grid-stack-placeholder > .placeholder-content {
    position: absolute;
    top: 0;
    right: $horizontal_padding / 2;
    bottom: 0;
    left: $horizontal_padding / 2;
    z-index: 0 !important;
    width: auto;
    margin: 0;
    border: 1px dashed lightgray;
  }

  > .grid-stack-item {

    @for $i from 1 through $gridstack-columns {
      &[data-gs-width='#{$i}'] {
        width: (100% / $gridstack-columns) * $i;
      }

      &[data-gs-x='#{$i}'] {
        left: (100% / $gridstack-columns) * $i;
      }

      &[data-gs-min-width='#{$i}'] {
        min-width: (100% / $gridstack-columns) * $i;
      }

      &[data-gs-max-width='#{$i}'] {
        max-width: (100% / $gridstack-columns) * $i;
      }
    }
    position: absolute;
    min-width: 100% / $gridstack-columns;
    padding: 0;

    > .grid-stack-item-content {
      position: absolute;
      top: 0;
      right: $horizontal_padding / 2;
      bottom: 0;
      left: $horizontal_padding / 2;
      z-index: 0 !important;
      width: auto;
      margin: 0;
      overflow-x: hidden;
      overflow-y: auto;
    }

    > .ui-resizable-handle {
      position: absolute;
      display: block;
      font-size: .1px;
      -ms-touch-action: none;
      touch-action: none;
    }

    &.ui-resizable-disabled > .ui-resizable-handle, &.ui-resizable-autohide > .ui-resizable-handle {
      display: none;
    }

    &.ui-draggable-dragging, &.ui-resizable-resizing {
      z-index: 100;

      > .grid-stack-item-content, > .grid-stack-item-content {
        box-shadow: 1px 4px 6px rgba(0, 0, 0, .2);
        opacity: .8;
      }
    }

    > .ui-resizable-se, > .ui-resizable-sw {
      padding: 2px 3px 0 0;
      margin: 0;
      font: normal normal normal 10px/1 $wb-font-family;
      font-size: inherit;
      color: gray;
      text-align: right;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;

      &::before {
        content: $wb-var-arrow-expand;
      }
    }

    > .ui-resizable-sw {
      @include vendor(transform, rotate(90deg));
      display: inline-block;
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }

    > .ui-resizable-nw {
      top: 0;
      left: 10px;
      width: 20px;
      height: 20px;
      cursor: nw-resize;
    }

    > .ui-resizable-n {
      top: 0;
      right: 25px;
      left: 25px;
      height: 10px;
      cursor: n-resize;
    }

    > .ui-resizable-ne {
      top: 0;
      right: 10px;
      width: 20px;
      height: 20px;
      cursor: ne-resize;
    }

    > .ui-resizable-e {
      top: 15px;
      right: $horizontal_padding / 2;
      bottom: 15px;
      width: 10px;
      cursor: e-resize;
    }

    > .ui-resizable-se {
      right: 10px;
      bottom: 0;
      width: 20px;
      height: 20px;
      cursor: se-resize;
    }

    > .ui-resizable-s {
      right: 25px;
      bottom: 0;
      left: 25px;
      height: 10px;
      cursor: s-resize;
    }

    > .ui-resizable-sw {
      bottom: 0;
      left: 10px;
      width: 20px;
      height: 20px;
      cursor: sw-resize;
    }

    > .ui-resizable-w {
      top: 15px;
      bottom: 15px;
      left: $horizontal_padding / 2;
      width: 10px;
      cursor: w-resize;
    }
  }

  &.grid-stack-animate, &.grid-stack-animate .grid-stack-item {
    @include vendor(transition, left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed);
  }

  &.grid-stack-animate .grid-stack-item.ui-draggable-dragging, &.grid-stack-animate .grid-stack-item.ui-resizable-resizing, &.grid-stack-animate .grid-stack-item.grid-stack-placeholder {
    @include vendor(transition, left .0s, top .0s, height .0s, width .0s);
  }
}

/** Uncomment this to show bottom-left resize handle **/

/*
.grid-stack > .grid-stack-item > .ui-resizable-sw {
    display: inline-block;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    @include vendor(transform, rotate(180deg));
}
*/

@include media-breakpoint-down(sm) {
  .grid-stack-item {
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    width: auto !important;
    margin-bottom: $vertical_padding;

    .ui-resizable-handle {
      display: none;
    }
  }

  .grid-stack {
    height: auto !important;
  }
}