.board {
  background: lighten($black-square-color, 7%);
  border-collapse: unset;
  color: $white-square-color;
  border-radius: 2vmin;
  box-shadow: 0 0.5vmin 3vmin rgba(0, 0, 0, 0.4);
  height: 80vmin;
  margin: 0 auto;
  width: 80vmin;

  th {
    color: darken($black-square-color, 10%);
  }
}

.board-square {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 0.25vmin;

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

.board-border-top,
.board-border-bottom {
  height: 4vmin;

  th {
    padding: 0;
    vertical-align: middle;
    text-align: center;
  }
}

.board-border-left,
.board-border-right {
  width: 4vmin;

  padding: 0;
  vertical-align: middle;
  text-align: center;
}

@mixin 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;
  }
}

@mixin 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) {
    @include black-square;
  }

  .board-square:nth-child(odd) {
    @include white-square;
  }
}

.board-rank:nth-child(even) {
  .board-square:nth-child(even) {
    @include white-square;
  }

  .board-square:nth-child(odd) {
    @include black-square;
  }
}