<% settings.values.each do |v| %>

  .btn-check + .btn-radio-<%= v[:id] %> {
    border-color: <%= v[:color] %>;
    background: <%= v[:color] %>;
    opacity: 0.3;
  }

  .btn-check:checked + .btn-radio-<%= v[:id] %>,
  .btn-check:hover + .btn-radio-<%= v[:id] %> {
    background: <%= v[:color] %>;
    opacity: 1;
  }

  .bg-<%= v[:id] %> {
    color: black;
    background-color: <%= v[:color] %>;
  }

  .mj-cell-<%= v[:id] %> {
    border-left-width: 2px;
    border-right-width: 2px;
    border-color: <%= v[:color] %>;
    background-color: <%= v[:color] %> !important;
  }
<% end %>

.tiebreak td {
  padding-left: 0;
  padding-right: 0;
}

tr:has(.mj-cell:hover) .mj-cell {
  border-color: var(--bs-body-color);
}

tr:has(.mj-cell:hover) .mj-cell-majority {
  background-color: white !important;
}

.tiebreak-top td {
  border-bottom: 1px solid var(--bs-gray-400);
}

.tiebreak-round td {
  padding-top: 15px;
}