: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;
}
.vr--grid-pos-container[data-cols="1"] {
  grid-template-columns: repeat(1, 1fr);
}
.vr--grid-pos-container[data-cols="2"] {
  grid-template-columns: repeat(2, 1fr);
}
.vr--grid-pos-container[data-cols="3"] {
  grid-template-columns: repeat(3, 1fr);
}
.vr--grid-pos-container[data-cols="4"] {
  grid-template-columns: repeat(4, 1fr);
}
.vr--grid-pos-container[data-cols="5"] {
  grid-template-columns: repeat(5, 1fr);
}
.vr--grid-pos-container[data-cols="6"] {
  grid-template-columns: repeat(6, 1fr);
}
.vr--grid-pos-container[data-cols="7"] {
  grid-template-columns: repeat(7, 1fr);
}
.vr--grid-pos-container[data-cols="8"] {
  grid-template-columns: repeat(8, 1fr);
}
.vr--grid-pos-container[data-cols="9"] {
  grid-template-columns: repeat(9, 1fr);
}
.vr--grid-pos-container[data-cols="10"] {
  grid-template-columns: repeat(10, 1fr);
}
.vr--grid-pos-container[data-cols="11"] {
  grid-template-columns: repeat(11, 1fr);
}
.vr--grid-pos-container[data-cols="12"] {
  grid-template-columns: repeat(12, 1fr);
}

.grid-cell {
  height: 30px;
  border: 1px solid #ccc;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.grid-cell:hover {
  background-color: rgba(var(--gp-primary-rgb), 0.3);
}
.grid-cell.selected {
  background-color: var(--gp-primary);
}
.grid-cell.selected:hover::after {
  content: "";
  background-color: var(--red);
  -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  width: 16px;
  height: 16px;
  position: absolute;
  z-index: 2;
}
.grid-cell.selectable:not(.selected):hover::before {
  content: "+";
  -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--green);
  width: 16px;
  height: 16px;
  position: absolute;
  z-index: 1;
}