@tile-width: 55px;
@tile-font-size: 35px;
@board-length: 15;
@tile-star-size: 45px;

.tray {
  display: grid;
  grid-template-columns: repeat(7, @tile-width);
  grid-gap: 5px;
  height: @tile-width;
  width: fit-content;
  background-color: #bbb59d;
  margin: 10px;
}

.board-grid {
  //grid-area: grid;
  display: grid;
  grid-template-columns: repeat(@board-length, @tile-width);
  grid-template-rows: repeat(@board-length, @tile-width);
  justify-content: center;
  grid-gap: 1px;
  user-select: none;
  flex: initial;
}

.grid-spot {
  font-size: 12px;
  text-align: center;
  background-color: #bbb59d;
  position: relative;

  span {
    vertical-align: middle;
    z-index: 0;
  }

  .tileSpot {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .ephemeral {
    opacity: 75%;
  }
}

.grid-spot-normal{

}

.grid-spot-double-word {
  background-color: #f9b4a5;
}

.grid-spot-double-letter {
  background-color: #c0d1d0;
}

.grid-spot-triple-letter {
  background-color: #349eb9;
}

.grid-spot-triple-word {
  background-color: #f65f4c;
}

.grid-spot-start {
  background-color: #f9b4a5;
  font-size: @tile-star-size;

  span { // undo the vertical align other cells have
    vertical-align: unset;
  }
}


.tileSpot {
  height: @tile-width;
  width: @tile-width;
}

.letter {
  background-color: #e5cca9;
  user-select: none;
  height: 100%;
  width: 100%;
  position: relative; // Used for the positioning of the sub-components

  .text {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 5px;
    font-size: @tile-font-size;
  }

  .letter-points {
    font-size: 15px;
    position: absolute;
    bottom: 2px;
    right: -1px;
    padding-right: 5px;
  }

}

.board-log {
  display: flex;
  justify-content: start;
  flex-flow: row wrap;
  align-items: stretch;
}

.message-log {
  border-color: black;
  border-style: solid;
  border-width: 2px;
  width: max-content;
  margin: 5px
}

.scoring {
  text-align: center;
  display: flex;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: none;

  span {
    font-size: 20px;
  }

  div {
    margin-left: 10px;
    margin-right: 10px;
  }
}