:global(.webchat-fluent) .telephone-keypad__button {
  -webkit-user-select: none;
  align-items: center;
  appearance: none;
  /* backgroundColor: isDarkTheme() || isHighContrastTheme() ? black : white, */
  background-color: White;
  border-radius: 100%;

  /* Whitelabel styles */
  /* border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`, */
  /* color: inherit; */

  border: solid 1px var(--webchat-colorNeutralStroke1);
  color: var(--webchat-colorGray200);
  font-weight: var(--webchat-fontWeightSemibold);

  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 60px;
  opacity: 0.7;
  padding: 0;
  position: relative;
  touch-action: none;
  user-select: none;
  width: 60px;

  &:hover {
    /* backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30 */
    background-color: var(--webchat-colorGray30);
  }
}

:global(.webchat-fluent) .telephone-keypad__button__ruby {
  /* color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160, */
  color: var(--webchat-colorGray190);
  font-size: 10px;
}

:global(.webchat-fluent) .telephone-keypad__button__text {
  font-size: 24px;
  margin-top: 8px;
}

:global(.webchat-fluent) .telephone-keypad--horizontal {
  & .telephone-keypad__button {
    height: 32px;
    justify-content: center;
    margin: 8px 4px;
    width: 32px;
  }

  .telephone-keypad__button__ruby {
    display: none;
  }

  & .telephone-keypad__button__text {
    font-size: 20px;
    margin-top: 0;
  }
}