// .cell {
//     border: 1px dashed #ccc;
//     text-align: center;
//     position: relative;
//     overflow: auto;
// }

// .resize-handle {
//     position: absolute;
//     border-radius: 50%;
//     width: 15px;
//     height: 15px;
//     background: #00afef;

//     &.resize-handle-top {
//         top: 0;
//         left: 50%;
//         transform: translateX(-50%) translateY(-50%);
//         cursor: ns-resize;
//     }
//     &.resize-handle-bottom {
//         bottom: 0;
//         left: 50%;
//         transform: translateX(-50%) translateY(50%);
//         cursor: ns-resize;
//     }
//     &.resize-handle-left {
//         top: 50%;
//         left: 0;
//         transform: translateX(-50%) translateY(-50%);
//         cursor: ew-resize;
//     }
//     &.resize-handle-right {
//         top: 50%;
//         right: 0;
//         transform: translateX(50%) translateY(-50%);
//         cursor: ew-resize;
//     }
// }

.snippet-grid {
  display: grid;
  grid-template-columns: repeat(12, 10px);
  grid-template-rows: repeat(12, 10px);
  row-gap: 0 !important;
  column-gap: 0 !important;
  margin: 5px !important;
  width: 80px !important;
  float: left;

  &:hover {
    @include selection(15px, -5px);
    cursor: pointer;
  }
}

.snippet-grid-cell {
  background: #d9d9d9;
  outline: 1px solid gray;
  min-width: 15px;
  min-height: 20px;
  margin: 2px;

  &[role="article"] {
    background: #bfbfbf;
  }
}