WordGrid/ui/src/style.less

@tile-width: 55px;
@tile-font-size: 35px;

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

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

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

}