.grid-stack {
  // Same options as in JS
  @gridstack-margin: 15px;
  @gridstack-width: 6;

  margin-right: -@gridstack-margin;

  .gridstack-columns(@column, @total) when (@column > 0) {
    @value: 100% * (@column / @total);
    > .grid-stack-item[data-gs-min-width="@{column}"] { min-width: @value }
    > .grid-stack-item[data-gs-max-width="@{column}"] { max-width: @value }
    > .grid-stack-item[data-gs-width="@{column}"] { width: @value }
    > .grid-stack-item[data-gs-x="@{column}"] { left: @value }

    .gridstack-columns((@column - 1), @total); // next iteration
  }

  .gridstack-columns(@gridstack-width, @gridstack-width);

  .grid-stack-item {
    .grid-stack-item-content {
      overflow: visible !important;
      box-shadow: none !important;
      opacity: 1 !important;
      left: 0 !important;
      right: @gridstack-margin !important;
    }

    .ui-resizable-handle {
      background: none !important;

      &.ui-resizable-w,
      &.ui-resizable-sw {
        left: 0 !important;
      }

      &.ui-resizable-e,
      &.ui-resizable-se {
        right: @gridstack-margin !important;
      }
    }

    &.grid-stack-placeholder > .placeholder-content {
      border: 0;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 3px;
      left: 0 !important;
      right: @gridstack-margin !important;
    }
  }

  &.grid-stack-one-column-mode > .grid-stack-item {
    margin-bottom: @gridstack-margin !important;
  }
}