: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;

  position: relative; // Macht es möglich, Symbole absolut zu positionieren
  display: flex;
  justify-content: center;
  align-items: center;


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

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

    &: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;
    }

  }

  &.selectable {
    &:not(.selected):hover::before {
      content: '+'; // Plus-Symbol
      -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;
    }
  }

}