:host {
  .grid-stack {
    position: relative;
    .grid-stack-item {
      position: absolute;
      user-select: none;
      $gridstack-columns: 4;
  
      @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;
        }
      }
      .grid-stack-item-content {
        position: absolute;
        left: 10px;
        right: 10px;
        margin: auto;
      }
      .show {
        animation: show 0.8s;
      }
    }
  }
}

@keyframes show {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}  
