@import url('shared.css');

:root {
  --tap-scale: 0.98;
}

button,
.choice-label {
  /* button.11 */
  display: inline-flex;
  /* button.11 */
  align-items: center;
  /* button.11 */
  justify-content: center;
  /* button.11, preference.7 */
  padding: 3px 7px;
  /* button.14 */
  -webkit-user-select: none;
  /* button.14 */
  user-select: none;
}

button {
  /* button.4 */
  font-weight: 525;
  cursor: pointer;
  /* button.1 */
  background-color: black;
  /* button.3 */
  background-image:
    linear-gradient(to bottom,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0));
  /* button.2 */
  color: white;
}

button.secondary,
.choice-label {
  /* button.5, preference.7 */
  background-color: white;
  background-image: none;
  /* button.6, preference.7 */
  color: black;
  /* button.7, preference.7 */
  font-weight: 475;
}

button:active:hover {
  /* button.19, button.22 */
  background-color: #3a3a3a;
}

button:focus-visible {
  /* button.19 */
  background-color: #3a3a3a;
}

button.secondary:active:hover {
  /* button.20, button.22 */
  background-color: #eee;
}

button.secondary:focus-visible {
  /* button.20 */
  background-color: #eee;
}

button:active:hover {
  /* button.21, button.22 */
  transform: scale(var(--tap-scale));
}

button:focus-visible:active {
  /* button.21 */
  transform: scale(var(--tap-scale));
}

button:disabled {
  /* button.16 */
  cursor: default;
  /* button.16 */
  pointer-events: none;
}

@media (hover: none) and (pointer: coarse) {
  button {
    /* button.4, button.18 */
    font-weight: 550;
  }

  button.secondary,
  .choice-label {
    /* button.7, button.18, preference.7 */
    font-weight: 500;
  }

  button:active {
    /* button.21 */
    transform: scale(var(--tap-scale));
  }
}