/**
 * card-canvas inspired by and borrows from
 * grid-stack:
 * https://github.com/troolee/gridstack.js/blob/master/src/gridstack.scss
 * (MIT licensed)
 */
$layout-columns:12;

.card-canvas {
    position: relative;
    min-height:200px;
    .card-editor {
      min-width: 8.33333333%;
      position: absolute;
      padding: 0;

      .ui-draggable-dragging, .ui-resizable-resizing {
        z-index: 100;
      }
      .card-editor-panel {
        position:absolute;
        width:300px;
        height:100%;
        /* cover map controls */
        z-index: 40;

      }
      .card-editor-content {
        outline: 1px solid #eee;
        border: solid 3px transparent;
        margin: 9px;
        position: absolute;
        top: 0;
        left: 0px;
        right: 0px;
        bottom: 0;
        width: auto;
        z-index: 0 !important;
        overflow-x: hidden;
        overflow-y: auto;
        .markdown-card {
          margin: 0 10px 0 10px;
        }
      }
      .card-editor-content:hover {
        outline: 1px dashed #CCC;
      }
      .card-editor-header {
        float: right;
        padding: 3px;
        a {
          color: $gray-dark;
        }
        a:hover {
          color: darken($link-color, 12%);
        }
      }

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

    }

  }