$marker-color: #000000;
$marker-color-primary: #0009bd;
$marker-color-danger: #aa0000;

.cm-chessboard {
  .markers {
    pointer-events: none;

    .marker {
      &.marker-frame {
        stroke: $marker-color;
        stroke-width: 1.8px;
        opacity: 0.4;
      }

      &.marker-frame-primary {
        stroke: $marker-color-primary;
        stroke-width: 1.8px;
        opacity: 0.4;
      }

      &.marker-frame-danger {
        stroke: $marker-color-danger;
        stroke-width: 1.8px;
        opacity: 0.4;
      }

      &.marker-circle {
        stroke: $marker-color;
        stroke-width: 2.5px;
        opacity: 0.2;
      }

      &.marker-circle-primary {
        stroke: $marker-color-primary;
        stroke-width: 2.5px;
        opacity: 0.4;
      }

      &.marker-circle-danger {
        stroke: $marker-color-danger;
        stroke-width: 2.5px;
        opacity: 0.5;
      }

      &.marker-square {
        fill: yellow;
        opacity: 0.3;
      }

      &.marker-square-danger {
        fill: $marker-color-danger;
        opacity: 0.2;
      }

      &.marker-square-primary {
        fill: $marker-color-primary;
        opacity: 0.11;
      }

      &.marker-dot {
        fill: black;
        opacity: 0.25;
      }

      &.marker-bevel {
        fill: black;
        opacity: 0.25;
      }

    }
  }
}