@import "mixin";

$row-height: 340px;
$row-margin: 10px;

.gridster ul{
  padding-left: 0;
  list-style: none;
}

$col-margin-left: 15px;
$col-margin-fallback: 1.5%;

@media (min-width: 992px) {
  [data-col="0"] {
    margin-left: 0%;
  }

  @for $i from 1 through 12 {
    [data-col="#{$i + 1}"] {
      margin-left: calc(#{percentage($i / 12)} + #{$col-margin-left});
      margin-left: #{percentage($i / 12)} + $col-margin-fallback;
    }
  }

  @for $i from 1 through 12 {
    [data-sizex="#{$i}"] {
      width: calc(#{percentage($i / 12)} - #{$col-margin-left});
      width: #{percentage($i / 12)} - $col-margin-fallback;
    }
  }
}

@media (min-width: 992px) {
  [data-row="8"] {
    top: $row-height * 7 + 15 * $row-margin;
  }
  [data-row="7"] {
    top: $row-height * 6 + 13 * $row-margin;
  }
  [data-row="6"] {
    top: $row-height * 5 + 11 * $row-margin;
  }
  [data-row="5"] {
    top: $row-height * 4 + 9 * $row-margin;
  }
  [data-row="4"] {
    top: $row-height * 3 + 7 * $row-margin;
  }
  [data-row="3"] {
    top: $row-height * 2 + 5 * $row-margin;
  }
  [data-row="2"] {
    top: $row-height * 1 + 3 * $row-margin;
  }
  [data-row="1"] {
    top: 1 * $row-margin;
  }

  [data-sizey="1"] {
    height: $row-height;
  }
  [data-sizey="2"] {
    height: $row-height * 2 + $row-margin;
  }
  [data-sizey="3"] {
    height: $row-height * 3 + $row-margin;
  }
  [data-sizey="4"] {
    height: $row-height * 4 + $row-margin;
  }
  [data-sizey="5"] {
    height: $row-height * 5 + $row-margin;
  }
  [data-sizey="6"] {
    height: $row-height * 6 + $row-margin;;
  }
  [data-sizey="7"] {
    height: $row-height * 7 + $row-margin;;
  }
  [data-sizey="8"] {
    height: $row-height * 8 + $row-margin;
  }

  .gridster > ul > li {
    &.preview-holder {
      padding: 19px !important;
      background-color: #00618a;
    }
    &.dragging.player {
      display: none;
    }
  }
}

@media(max-width: 992px) {
  .gridster {
    [data-col="13"]:not(.preview-holder), [data-col="12"]:not(.preview-holder),
    [data-col="11"]:not(.preview-holder), [data-col="10"]:not(.preview-holder),
    [data-col="9"]:not(.preview-holder), [data-col="8"]:not(.preview-holder),
    [data-col="7"]:not(.preview-holder), [data-col="6"]:not(.preview-holder),
    [data-col="5"]:not(.preview-holder), [data-col="4"]:not(.preview-holder),
    [data-col="3"]:not(.preview-holder), [data-col="2"]:not(.preview-holder),
    [data-col="1"]:not(.preview-holder) {
      position: relative !important;
      margin-left: 15px;
      margin-right: 15px;
    }
  }
}

.gs_w {
  padding: 19px;
  margin-bottom: 10px;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
  background-size: 100%;
  @include linear_gradient(#f7f7f7, #eee);

  &:hover{
    border: 1px solid #00618a;
  }
}



