:root {
  --gp-primary: #c1c1c1;
  --gp-primary-rgb: 193, 193, 193;
}

.vr--grid-pos-container {
  margin: 3px 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 5px;

  @for $i from 1 through 12 {
    &[data-cols="#{$i}"] {
      grid-template-columns: repeat($i, 1fr);
    }
  }
}

.grid-cell {
  height: 30px;
  border: 1px solid #ccc;
  cursor: pointer;

  &:hover {
    background-color: rgba(var(--gp-primary-rgb),.3);
  }

  &.selected {
    background-color: var(--gp-primary);
  }
}