body {
  background: #124031;
}

$board-square-size: 8vw;
$base-font-size: 16px;

$black-square-color: #824c34;
$white-square-color: #d0bfa1;

$selected-square-color: #0099ff;

$square-outline-color: darken($black-square-color, 20%);
$selected-outline-color: lighten($selected-square-color, 20%);

$colours: black white;
$pieces: king queen bishop knight rook pawn;

.board {
  display: inline-block;
  font-size: 0;
  border: 0.3vw solid black;
}

.board-square {
  position: relative;
  border: 0.2vw solid $square-outline-color;
  display: inline-block;
  font-size: $base-font-size;
  width: $board-square-size;
  height: $board-square-size;

  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%);
    border: 0.2vw solid $selected-outline-color;
  }
}

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

  &.selected {
    background-color: mix($white-square-color, $selected-square-color, 60%);
    border: 0.2vw 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;
  }
}