.board {
  border: 0.3vmin solid black;
  margin: 0 auto;
  width: 80vmin;
  height: 80vmin;
}

.board-rank {
}

.board-square {
  border: 0.2vmin solid $square-outline-color;

  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;

  @each $colour in $colours {
    @each $piece in $pieces {
      &.#{$colour}.#{$piece} {
        background-image: url(/images/#{$piece}_#{$colour}.svg);
      }
    }
  }
}

%black-square {
  background-color: $black-square-color;

  &.selected {
    background-color: mix($black-square-color, $selected-square-color, 60%);
    outline: 0.2vmin solid $selected-outline-color;
  }
}

%white-square {
  background-color: $white-square-color;

  &.selected {
    background-color: mix($white-square-color, $selected-square-color, 60%);
    outline: 0.2vmin solid $selected-outline-color;
  }
}

.board-rank:nth-child(odd) {
  .board-square:nth-child(even) {
    @extend %black-square;
  }
  .board-square:nth-child(odd) {
    @extend %white-square;
  }
}

.board-rank:nth-child(even) {
  .board-square:nth-child(even) {
    @extend %white-square;
  }
  .board-square:nth-child(odd) {
    @extend %black-square;
  }
}