.Keyboard {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-gap: var(--size-tiny);
  padding: var(--size-medium);
  user-select: none;

  --key-size: 6ch;
}

.TopRow,
.MiddleRow,
.BottomRow {
  display: inline-grid;
  grid-gap: var(--size-tiny);
  margin: 0;
  margin-left: auto;
  margin-right: auto;
}
.TopRow {
  grid-template-columns: repeat(11, auto);
}
.MiddleRow {
  grid-template-columns: repeat(9, auto);
}
.BottomRow {
  grid-template-columns: repeat(9, auto);
}

.Key {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  color: var(--color-text);
  text-transform: capitalize;
  user-select: none;
  border: none;
  background-color: var(--color-gray-shade-40);
  transition: background-color 150ms;
  cursor: pointer;
  width: var(--key-size);
  height: var(--key-size);
}
.Key:disabled {
  background-color: var(--color-gray-shade-20);
  color: var(--color-gray-shade-50);
  cursor: default;
}
.Key:hover:not(.Key:disabled) {
  background-color: var(--color-gray-shade-50);
}
.Key:active:not(.Key:disabled) {
  background-color: var(--color-gray-shade-40);
  position: relative;
  top: 1px;
}

.KeyHint:not(.KeyHint:disabled) {
  background-image: repeating-linear-gradient(
    45deg,
    var(--color-correct),
    var(--color-correct) 0.5rem,
    var(--color-correct-tint) 0.5rem,
    var(--color-correct-tint) 1rem
  );
  color: var(--color-text);
}

.KeyCorrect,
.KeyCorrect:disabled {
  background-color: var(--color-correct);
  color: var(--color-text);
}
.KeyCorrect:hover:not(.KeyCorrect:disabled) {
  background-color: var(--color-correct-tint);
}
.KeyCorrect:active:not(.Key:disabled) {
  background-color: var(--color-correct);
}

.KeyIncorrect,
.KeyIncorrect:disabled {
  background-color: var(--color-incorrect);
  color: var(--color-text);
}
.KeyIncorrect:hover:not(.KeyIncorrect:disabled) {
  background-color: var(--color-incorrect-tint);
}
.KeyIncorrect:active:not(.Key:disabled) {
  background-color: var(--color-incorrect);
}

.KeyPresent,
.KeyPresent:disabled {
  background-color: var(--color-present);
  color: var(--color-text);
}
.KeyPresent:hover:not(.KeyPresent:disabled) {
  background-color: var(--color-present-tint);
}
.KeyPresent:active:not(.Key:disabled) {
  background-color: var(--color-present);
}

.SpecialKey {
  width: calc(var(--key-size) * 2);
}

.SpecialKeyLabel {
}

.SpecialKeyIcon {
  width: var(--size-large);
  height: var(--size-large);
}

@media (orientation: portrait) and (max-width: 550px) {
  .Keyboard {
    --key-size: 5ch;
  }
}

@media (orientation: portrait) and (max-width: 475px) {
  .Keyboard {
    --key-size: 4ch;
  }
}

@media only screen and (orientation: landscape) and (max-width: 850px) {
  .Keyboard {
    --key-size: 5ch;
  }
}

@media only screen and (orientation: landscape) and (max-width: 750px) {
  .Keyboard {
    --key-size: 4ch;
  }
}

@media only screen and (orientation: landscape) and (max-width: 575px) {
  .Keyboard {
    --key-size: 3ch;
  }
}
