<% 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] %> {
    background-color: <%= v[:color] %> !important;
  }

  .mj-cell-<%= v[:id] %>:hover {
    border-left-width: 1px;
    border-right-width: 1px;
    border-color: var(--bs-body-color);
  }
<% end %>