:root {
  --gp-primary: #a80556;
  --gp-primary-rgb: 168, 5, 86;
  --contao: var(--gp-primary);
  --contao-rgb: var(--gp-primary-rgb);
  --header-bg: var(--gp-primary);
}

.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(--contao-rgb),.3);
  }

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