.highlight-switcher {
  width: 1366px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
}

.highlight-switcher__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
  margin-right: 0.15rem;
}

.highlight-switcher__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--brand-navy);
  border: 1px solid var(--brand-border);
  background: #fff;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 11px;
  font-weight: 600;
}

.highlight-switcher__link:hover,
.highlight-switcher__link:focus-visible {
  color: var(--brand-navy-soft);
  border-color: var(--brand-navy-soft);
}

.highlight-switcher__link.is-active {
  color: #fff;
  background: var(--brand-navy);
  border-color: var(--brand-navy);
}

.highlight-switcher__note {
  flex: 1 1 12rem;
  font-size: 11px;
  color: #667085;
}

@media (max-width: 992px) {
  .highlight-switcher {
    width: calc(100vw - 1rem);
  }
}

[data-highlight="luminosity"],
[data-highlight="border"],
[data-highlight="both"] {
  --vote-step-idle-control-opacity: 0.8;
}

[data-highlight="luminosity"] .vote-step,
[data-highlight="border"] .vote-step,
[data-highlight="both"] .vote-step {
  isolation: isolate;
}

[data-highlight="luminosity"]:is(.has-current-step, .is-walkthrough-complete) .vote-step:not(.is-current-step):not(.is-hover-step) .btn:not(.active):not(.is-selected):not([data-selected="true"]):not(#secondaryMotionsButton),
[data-highlight="border"]:is(.has-current-step, .is-walkthrough-complete) .vote-step:not(.is-current-step):not(.is-hover-step) .btn:not(.active):not(.is-selected):not([data-selected="true"]):not(#secondaryMotionsButton),
[data-highlight="both"]:is(.has-current-step, .is-walkthrough-complete) .vote-step:not(.is-current-step):not(.is-hover-step) .btn:not(.active):not(.is-selected):not([data-selected="true"]):not(#secondaryMotionsButton) {
  opacity: var(--vote-step-idle-control-opacity);
  mix-blend-mode: luminosity;
  transition: opacity var(--vote-step-fade-duration) ease;
}

[data-highlight="luminosity"]:is(.has-current-step, .is-walkthrough-complete) .vote-step:not(.is-current-step):not(.is-hover-step):not(:has(#deferButton.is-selected)) .form-control,
[data-highlight="border"]:is(.has-current-step, .is-walkthrough-complete) .vote-step:not(.is-current-step):not(.is-hover-step):not(:has(#deferButton.is-selected)) .form-control,
[data-highlight="both"]:is(.has-current-step, .is-walkthrough-complete) .vote-step:not(.is-current-step):not(.is-hover-step):not(:has(#deferButton.is-selected)) .form-control {
  opacity: var(--vote-step-idle-control-opacity);
  transition: opacity var(--vote-step-fade-duration) ease;
}

[data-highlight="border"] {
  --vote-step-header-border: color-mix(in srgb, var(--brand-navy) 14%, var(--vote-step-bg));
  --vote-step-header-border-current: var(--brand-navy);
}

[data-highlight="border"] .voting-table-step-heading.vote-step,
[data-highlight="border"] .voting-table-step-heading.walkthrough-step {
  border-bottom: 3px solid var(--vote-step-header-border) !important;
  transition: border-color var(--vote-step-fade-duration) ease;
}

[data-highlight="border"] .voting-table-step-heading.vote-step.is-current-step,
[data-highlight="border"] .voting-table-step-heading.walkthrough-step.is-current {
  border-bottom-color: var(--vote-step-header-border-current) !important;
}

[data-highlight="border"] .outcome-panel.vote-step {
  --outcome-pad: 0.5rem;
  --outcome-rule: var(--vote-step-header-border);
  align-items: stretch !important;
}

[data-highlight="border"] .outcome-panel.vote-step.is-current-step {
  --outcome-rule: var(--vote-step-header-border-current);
}

[data-highlight="border"] .outcome-panel .walkthrough-step__label {
  position: relative;
  align-self: stretch;
  padding-right: 0.5rem;
}

[data-highlight="border"] .outcome-panel .walkthrough-step__label::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--outcome-pad));
  bottom: calc(-1 * var(--outcome-pad));
  right: 0;
  width: 3px;
  background-color: var(--outcome-rule);
  pointer-events: none;
  transition: background-color var(--vote-step-fade-duration) ease;
}

[data-highlight="background"] .vote-step:is(.is-current-step, .is-hover-step),
[data-highlight="background"] .walkthrough-step.is-current.voting-table-step-heading,
[data-highlight="both"] .vote-step:is(.is-current-step, .is-hover-step),
[data-highlight="both"] .walkthrough-step.is-current.voting-table-step-heading {
  background-color: var(--vote-step-bg-current) !important;
}

[data-highlight="background"] .vote-step:is(.is-current-step, .is-hover-step) .form-control:not(#abstainNoteInput),
[data-highlight="both"] .vote-step:is(.is-current-step, .is-hover-step) .form-control:not(#abstainNoteInput) {
  background-color: color-mix(in srgb, var(--brand-navy) 18%, #fff);
  border-color: var(--brand-navy);
}

[data-highlight="background"] .vote-tally .vote-step:is(.is-current-step, .is-hover-step):has([data-count="yes"].is-leading),
[data-highlight="both"] .vote-tally .vote-step:is(.is-current-step, .is-hover-step):has([data-count="yes"].is-leading) {
  background-color: color-mix(in srgb, var(--brand-green) 28%, var(--vote-step-bg-current)) !important;
}

[data-highlight="background"] .vote-tally .vote-step:is(.is-current-step, .is-hover-step):has([data-count="no"].is-leading),
[data-highlight="both"] .vote-tally .vote-step:is(.is-current-step, .is-hover-step):has([data-count="no"].is-leading) {
  background-color: color-mix(in srgb, var(--brand-red) 28%, var(--vote-step-bg-current)) !important;
}

[data-highlight="background"] .vote-tally .vote-step:is(.is-current-step, .is-hover-step):has([data-count="abstain"].is-leading),
[data-highlight="both"] .vote-tally .vote-step:is(.is-current-step, .is-hover-step):has([data-count="abstain"].is-leading) {
  background-color: color-mix(in srgb, var(--brand-gray) 36%, var(--vote-step-bg-current)) !important;
}

[data-highlight="cells"] {
  --vote-cell-box-size: 2.125rem;
  --vote-cell-box-border: var(--brand-border);
}

[data-highlight="cells"] .vote-cell {
  padding: 2px;
  vertical-align: stretch;
}

[data-highlight="cells"] .vote-cell .btn-toolbar,
[data-highlight="cells"] .vote-cell .vote-group,
[data-highlight="cells"] .vote-cell .abstain-split-group {
  width: 100%;
  justify-content: stretch;
}

[data-highlight="cells"] .vote-cell .btn-vote,
[data-highlight="cells"] .vote-cell .motion-role-btn {
  --bs-btn-bg: #fff;
  --bs-btn-border-width: 1px;
  --bs-btn-border-color: var(--vote-cell-box-border);
  --bs-btn-hover-border-color: var(--bs-btn-color);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-active-border-color: var(--bs-btn-active-bg);
  --bs-btn-border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: var(--vote-cell-box-size);
  min-height: var(--vote-cell-box-size);
  height: 100%;
  padding: 0;
  border-radius: 0;
  line-height: 1;
}

[data-highlight="cells"] .vote-cell .btn-vote:not(.active):not([data-selected="true"]),
[data-highlight="cells"] .vote-cell .motion-role-btn:not(.active) {
  background-color: #fff;
}

[data-highlight="cells"] .vote-cell .btn-vote.active,
[data-highlight="cells"] .vote-cell .btn-vote[data-selected="true"],
[data-highlight="cells"] .vote-cell .motion-role-btn.active {
  --bs-btn-hover-bg: var(--bs-btn-active-bg);
  --bs-btn-hover-color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-bg);
}

[data-highlight="cells"] .vote-cell .btn-vote {
  font-size: 0;
  color: transparent;
}

[data-highlight="cells"] .vote-cell .btn-vote::before {
  font-family: bootstrap-icons;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 1rem;
  opacity: 0;
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
  transition: opacity 0.12s ease;
}

[data-highlight="cells"] .vote-cell .btn-vote[data-vote="yes"]::before {
  content: "\F633";
  color: var(--brand-green);
}

[data-highlight="cells"] .vote-cell .btn-vote[data-vote="no"]::before {
  content: "\F657";
  color: var(--brand-red);
}

[data-highlight="cells"] .vote-cell .btn-vote[data-vote="abstain"]::before {
  content: "\F63B";
  color: #5c5f5c;
}

[data-highlight="cells"] .vote-cell .motion-role-btn :is(.bi, .motion-role-icon) {
  opacity: 0;
  transition: opacity 0.12s ease;
}

[data-highlight="cells"] .vote-cell .btn-vote:is(:hover, :focus-visible, .active, [data-selected="true"])::before,
[data-highlight="cells"] .vote-cell .motion-role-btn:is(:hover, :focus-visible, .active) :is(.bi, .motion-role-icon) {
  opacity: 1;
}

[data-highlight="cells"] .vote-cell .btn-vote.active::before,
[data-highlight="cells"] .vote-cell .btn-vote[data-selected="true"]::before {
  color: var(--text-inverse);
}

[data-highlight="cells"] .vote-cell .split-button {
  border-radius: 0;
  overflow: visible;
  width: 100%;
  gap: 2px;
}

[data-highlight="cells"] .vote-cell .split-button > .split-button-main,
[data-highlight="cells"] .vote-cell .split-button > .split-button-secondary,
[data-highlight="cells"] .vote-cell .abstain-split-group.abstain-secondary-hidden .split-button-main {
  border-radius: 0;
}

[data-highlight="cells"] .vote-cell .split-button > .split-button-secondary {
  --bs-btn-border-width: 1px;
  --bs-btn-border-color: var(--vote-cell-box-border);
  --bs-btn-border-radius: 0;
  min-width: var(--vote-cell-box-size);
  min-height: var(--vote-cell-box-size);
  background-color: #fff;
}

[data-highlight="cells"] .outcome-choices {
  background: transparent;
  gap: 0.25rem;
  border-radius: 0;
}

[data-highlight="cells"] .outcome-choice + .outcome-choice > .btn:first-child {
  box-shadow: none;
}

[data-highlight="cells"] .outcome-choices .btn {
  --bs-btn-bg: #fff;
  --bs-btn-border-width: 1px;
  --bs-btn-border-color: var(--vote-cell-box-border);
  --bs-btn-hover-border-color: var(--bs-btn-color);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--vote-cell-box-size);
  min-height: var(--vote-cell-box-size);
  padding: 0;
  border-radius: 0;
  font-size: 0;
  color: transparent;
  line-height: 1;
}

[data-highlight="cells"] .outcome-choices .btn:not(.is-selected):not(.active) {
  background-color: #fff;
}

[data-highlight="cells"] .outcome-choices .btn.is-selected,
[data-highlight="cells"] .outcome-choices .btn.active {
  --bs-btn-hover-bg: var(--bs-btn-active-bg);
  --bs-btn-hover-color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-bg);
  color: var(--bs-btn-active-color);
}

[data-highlight="cells"] .outcome-choice:first-child > .btn:first-child,
[data-highlight="cells"] .outcome-choice:last-child > .btn:first-child {
  border-radius: 0;
}

[data-highlight="cells"] .outcome-choices .btn .bi {
  font-size: 1rem;
  margin: 0 !important;
  color: var(--bs-btn-color);
  opacity: 0;
  transition: opacity 0.12s ease;
}

[data-highlight="cells"] .outcome-choices .dropdown-toggle::after {
  display: none;
}

[data-highlight="cells"] .outcome-choices .btn:is(:hover, :focus-visible, .is-selected, .active, [aria-expanded="true"]) .bi {
  opacity: 1;
}

[data-highlight="cells"] .outcome-choices .btn.is-selected .bi,
[data-highlight="cells"] .outcome-choices .btn.active .bi {
  color: var(--bs-btn-active-color);
}