/* Try to select the input[type=radio] direct parent. */
.votingapi-reaction-form .votingapi-reaction-radios> :first-child {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
}

/* Hide the input. */
.votingapi-reaction-form .votingapi-reaction-radios input[type="radio"] {
  display: none;
}

/* Stylize the label and the contents. */
.votingapi-reaction-form .votingapi-reaction-radios label {
  display: block;
  margin: 0;
  cursor: pointer;
}

.votingapi-reaction-form .votingapi-reaction-radios label .votingapi-reaction-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid rgb(238, 238, 238);
  border-radius: 5px;
  padding: 5px;
  margin: 0 5px;
  user-select: none;
}

.votingapi-reaction-form .votingapi-reaction-radios label .votingapi-reaction-item>* {
  margin: 0 5px;
}

.votingapi-reaction-form .votingapi-reaction-radios label .votingapi-reaction-image {
  width: 25px;
  height: 25px;
}

.votingapi-reaction-form .votingapi-reaction-radios label .votingapi-reaction-count {
  text-align: center;
  padding-top: 5px;
}

/* Selected reaction. */
.votingapi-reaction-form .votingapi-reaction-radios input[type="radio"]:checked+label {
  color: rgb(0, 113, 179);
}

.votingapi-reaction-form .votingapi-reaction-radios input[type="radio"]:checked+label .votingapi-reaction-item {
  border-color: rgb(0, 113, 179);
  background-color: rgb(248, 248, 248);
}

/* Selected reaction. */
.votingapi-reaction-form .votingapi-reaction-radios label:hover .votingapi-reaction-item {
  border-color: rgba(0, 143, 219, 0.2);
  background-color: rgba(0, 143, 219, 0.05);
}

/* Hide buttons if js is active. */
.js .votingapi-reaction-form input[type="submit"] {
  display: none;
}