.button-hint {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  white-space: nowrap;
}

.button-hint.clickable {
  cursor: pointer;
}

.button-icon {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: #fff;
  border: 2px solid #fff;
}

.button-keyboard-a,
.button-keyboard-b,
.button-keyboard-x,
.button-keyboard-y,
.button-keyboard-left,
.button-keyboard-right,
.button-keyboard-up,
.button-keyboard-down,
.button-keyboard-l1,
.button-keyboard-r1,
.button-keyboard-super {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.button-xbox-a {
  background-color: #107c10;
  border-color: #107c10;
}
.button-xbox-b {
  background-color: #e50914;
  border-color: #e50914;
}
.button-xbox-x {
  background-color: #0078d4;
  border-color: #0078d4;
}
.button-xbox-y {
  background-color: #ffb900;
  border-color: #ffb900;
  color: #141414;
}

.button-xbox-left,
.button-xbox-right,
.button-xbox-up,
.button-xbox-down,
.button-xbox-super {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.button-playstation-a {
  background-color: #0070d1;
  border-color: #0070d1;
}
.button-playstation-b {
  background-color: #e50914;
  border-color: #e50914;
}
.button-playstation-x {
  background-color: #b22383;
  border-color: #b22383;
}
.button-playstation-y {
  background-color: #009374;
  border-color: #009374;
}

.button-playstation-left,
.button-playstation-right,
.button-playstation-up,
.button-playstation-down,
.button-playstation-super {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.button-hint.size-large {
  gap: 10px;
}
.button-hint.size-large .button-icon {
  width: 28px;
  height: 28px;
  font-size: 1rem;
}
.button-hint.size-large .button-label {
  font-size: 1rem;
}

.button-hint.size-small {
  gap: 8px;
}
.button-hint.size-small .button-icon {
  width: 24px;
  height: 24px;
  font-size: 0.9rem;
}
.button-hint.size-small .button-label {
  font-size: 0.9rem;
}
