@include google-font {
  @include google-font(Comfortaa, 400);
}
body {
  --grid-size: 20vmin;
  --grid-gap: 2vmin;
  --background: 255, 255, 255;
  --tile-background: #aab2bd;
  @include dark { //Dark theme
    --background: 60, 60, 60;
    --tile-background: #232223;
    color:white;
  }
  display: grid;
  place-items: center;
  grid-template-rows:1fr;
  min-height: 100vh;
  background: rgb(var(--background));
  font-family: Comfortaa, sans-serif;
  transition: 0.25s -0.1s;
  .overlay {
    z-index: 20;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    place-items: center;
    background: rgba(var(--background), 0.4);
    .message {
      font-size: 8vmin;
    }
  }

  %tie,
  %player-1,
  %player-2 {
    display: grid;
    animation: fade-in 0.5s;
    @keyframes fade-in {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  }
  %tie .message:before {
    content: "It's a tie!"; //Because of 9 selectors for a tie this takes precidence so I need to make others important even though they are after.
  }
  %player-1 .message:before {
    content: "Player 1 wins!" !important;
  }
  %player-2 .message:before {
    content: "Player 2 wins!" !important;
  }
  .board {
    display: grid;
    grid-template-columns: repeat(3, var(--grid-size));
    grid-template-rows: repeat(3, var(--grid-size));
    grid-template-areas: "_1 _2 _3" "_4 _5 _6" "_7 _8 _9";
    grid-gap: var(--grid-gap);
    place-items: center;
    input {
      //	______
      //	| ___ \
      //	| |_/ / __ _ ___  ___
      //	| ___ \/ _` / __|/ _ \
      //	| |_/ / (_| \__ \  __/
      //	\____/ \__,_|___/\___|

      position: relative;
      appearance: none;
      width: 100%;
      height: 100%;
      border-radius: 10%;
      border: 0.25vmin solid var(--background); //Removes aliased looking corners when stacked
      background: var(--tile-background);
      color: white;
      outline: none; //With this many radio buttons tabbing isn't great anyway
      transition: 0.25s -0.1s;
      &:not(.turn-1) {
        //Hide all except turn 1. Cont line 151
        display: none;
      }
      &:before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        opacity: 0;
      }

      //	 _____                 _ _ _   _                   _
      //	/  __ \               | (_) | (_)                 | |
      //	| /  \/ ___  _ __   __| |_| |_ _  ___  _ __   __ _| |
      //	| |    / _ \| '_ \ / _` | | __| |/ _ \| '_ \ / _` | |
      //	| \__/\ (_) | | | | (_| | | |_| | (_) | | | | (_| | |
      //	 \____/\___/|_| |_|\__,_|_|\__|_|\___/|_| |_|\__,_|_|

      //Bring selected forwards - these block tiles under
      &:checked {
        z-index: 10;
      }

      //Only have pointer cursor for places people can pick
      &:not(:checked):hover {
        cursor: pointer;
      }

      //Show icon if hovered or checked
      &:not(:checked):hover:before,
      &:checked:before {
        opacity: 1;
      }

      //Colours and icons
      &.player-1 {
        &:hover {
          background: #4a89dc;
        }
        &:checked {
          background: #5d9cec;
        }
        &:before {
          content: "\f00d";
          font-size: calc(var(--grid-size) / 1.5);
        }
      }
      &.player-2 {
        &:hover {
          background: #da4453;
        }
        &:checked {
          background: #ed5565;
        }
        &:before {
          content: "\f111";
          font-size: calc(var(--grid-size) / 2);
        }
      }

      //Place tiles in the correct place using css grid
      @for $i from 1 through 9 {
        &:nth-child(9n + #{$i}) {
          grid-area: _#{$i};
        }
      }

      //  _                 _
      // | |               (_)
      // | |     ___   __ _ _  ___
      // | |    / _ \ / _` | |/ __|
      // | |___| (_) | (_| | | (__
      // \_____/\___/ \__, |_|\___|
      //               __/ |
      //              |___/

      //Show turns only if a previous turn has been picked
      //Any turn-1:checked tile will show turn-2 tiles
      @for $i from 1 through 8 {
        &.turn-#{$i}:checked ~ .turn-#{$i + 1} {
          display: block;
        }
      }

      //If 9 moves have taken place - any 9 radio buttons checked
      &:checked
        ~ input:checked
        ~ input:checked
        ~ input:checked
        ~ input:checked
        ~ input:checked
        ~ input:checked
        ~ input:checked
        ~ input:checked
        ~ .overlay {
        @extend %tie;
      }

      //For both players, check for matching 3 same columns, or 3 same rows, or 3 same diagonals - if there are any 3 by the same player that means they won
      @for $player from 1 through 2 {
        @for $i from 1 through 3 {
          &.player-#{$player}.c-#{$i}:checked
            ~ input.player-#{$player}.c-#{$i}:checked
            ~ input.player-#{$player}.c-#{$i}:checked,
          &.player-#{$player}.r-#{$i}:checked
            ~ input.player-#{$player}.r-#{$i}:checked
            ~ input.player-#{$player}.r-#{$i}:checked,
          &.player-#{$player}.d-#{$i}:checked
            ~ input.player-#{$player}.d-#{$i}:checked
            ~ input.player-#{$player}.d-#{$i}:checked {
            ~ .overlay {
              @extend %player-#{$player};
            }
          }
        }
      }
    }
  }
}