@import "../settings.colors";

// TODO: use one consistent ID for the Green Party and "other", for all election components
$c-election-table-party-colors: (
  lib: (100: $color-lib-100, 500: $color-lib-500),
  cpc: (100: $color-cpc-100, 500: $color-cpc-500),
  ndp: (100: $color-ndp-100, 500: $color-ndp-500),
  bq:  (100: $color-bq-100,  500: $color-bq-500),
  grn: (100: $color-gp-100,  500: $color-gp-500),
  gp:  (100: $color-gp-100,  500: $color-gp-500),
  ppc: (100: $color-ppc-100, 500: $color-ppc-500),
  oth: (100: $color-other-100, 500: $color-other-500),
  other: (100: $color-other-100, 500: $color-other-500)
);

@mixin c-election-table-row($party) {
  .c-election-table__body-row--#{$party} {
    &.c-election-table__body-row--leading {
      background-color: map-get(map-get($c-election-table-party-colors, $party), 100);
    }
    &.c-election-table__body-row--winner {
      background-color: map-get(map-get($c-election-table-party-colors, $party), 500);
    }
    .c-election-table__body-cell--party-full,
    .c-election-table__body-cell--party-abbr {
      color: map-get(map-get($c-election-table-party-colors, $party), 500);
      &::before {
        background-color: map-get(map-get($c-election-table-party-colors, $party), 500);
      }
    }
  }
}

@mixin c-election-table--sm {
  .c-election-table--leading-party {
    .c-election-table__head-cell-content {
      max-width: none;
    }
  }
}

@mixin c-election-table--md {
  .c-election-table__head-cell--party-full,
  .c-election-table__body-cell--party-full {
    display: table-cell;
  }
  .c-election-table__head-cell--party-abbr,
  .c-election-table__body-cell--party-abbr {
    display: none;
  }
  // Leading Party table
  //
  // Assuming the table is 940px wide:
  // Party column:
  //   (140 / 940) x 100 = 14.893617021276596
  // Remaining columns:
  //   (200 / 940) x 100 = 21.276595744680851
  //
  .c-election-table--leading-party {
    .c-election-table__head-cell,
    .c-election-table__body-cell {
      width: 21.428571428571429%; // 200px
    }
    .c-election-table__head-cell--party-full,
    .c-election-table__body-cell--party-full {
      width: 14.285714285714286%; // 140px
    }
  }
}

@mixin c-election-table--lg {
  .c-election-table--leading-party {
    .c-election-table__head-cell,
    .c-election-table__body-cell,
    .c-election-table__head-cell--party-full,
    .c-election-table__body-cell--party-full {
      width: 20%;
    }
  }
}
