@use "../../../../styles/spacing.scss";

// set some min widths so we don't jump too much 
// when we add more digits and padding to a col as results come  in
$votes-min-width-tooltip: 4rem;
$votes-min-width-m: 4.313rem; ;
$votes-min-width-l: 5.875rem;
$pct-min-width-s: 3.5rem; 
$pct-min-width-m: 3.5rem;
$pct-min-width-l: 4.25rem;
$pct-min-width-tooltip: 3rem;

.container {
  width: 100%;
  border-collapse: collapse;
  display: grid; 
  grid-template-columns: 1fr  minmax($pct-min-width-s, max-content);

  &.medium {
    grid-template-columns: 1fr minmax($votes-min-width-m, max-content) minmax($pct-min-width-m, max-content);
  }

  &.large {
    grid-template-columns: 1fr minmax($votes-min-width-l, max-content) minmax($pct-min-width-l, max-content);
  }

  &.condensed,
  &.uncontested {
    grid-template-columns: 1fr minmax($pct-min-width-s, max-content);

    &.large {
      grid-template-columns: 1fr minmax($pct-min-width-l, max-content);
    }
  }

  &.tooltip {
    grid-template-columns: 1fr minmax($votes-min-width-tooltip, max-content) minmax($pct-min-width-tooltip, max-content);
  
    &.uncontested {
      grid-template-columns: 1fr minmax($votes-min-width-tooltip, max-content);
    }
  }
  
  div[role="rowgroup"],
  div[role="row"] {
    display: contents;
  }
}