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

.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;
}


.tileSpot {
  height: 100%;
  width: 100%;
}

.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;
  }

}