@import url('shared.css');

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

/* spec 3.1., 3.4., 3.5., 3.8., 3.11., 38.13. */
button,
.choice-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  -webkit-user-select: none;
  user-select: none;
}

button {
  font-weight: 525;
  cursor: pointer;
  background-color: black;
  background-image:
    linear-gradient(to bottom,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0));
  color: white;
}

/* spec 3.2., 38.13. */
button.secondary,
.choice-label {
  background-color: white;
  background-image: none;
  color: black;
  font-weight: 475;
}

/* spec 3.13. */
button:active:hover,
button:focus-visible {
  background-color: #3a3a3a;
}

/* spec 3.14. */
button.secondary:active:hover,
button.secondary:focus-visible {
  background-color: #eee;
}

/* spec 3.15., 3.16. */
button:active:hover,
button:focus-visible:active {
  transform: scale(var(--tap-scale));
}

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

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

  button.secondary,
  .choice-label {
    font-weight: 500;
  }

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