@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";
@import "mixins/components.election-table";

.c-election-table {
  width: 100%;
  overflow: auto;
  border: 1px solid $color-stone-200;
  background-color: $color-white;

  abbr[title] {
    border-bottom: none;
    text-decoration: none;
  }
}
.c-election-table__table {
  width: 100%;
  border-collapse: collapse;
}
.c-election-table__head-row,
.c-election-table__body-row {
  border-bottom: 1px solid $color-stone-200;
}
.c-election-table__head-cell,
.c-election-table__body-cell {
  text-align: right;
  border-bottom: 1px solid $color-stone-200;
  padding: rem(8) rem(10) rem(8) 0;
  &:first-child {
    padding-left: rem(10);
  }
}
.c-election-table__head-cell--party-full,
.c-election-table__head-cell--party-abbr,
.c-election-table__body-cell--party-full,
.c-election-table__body-cell--party-abbr {
  padding-left: rem(10);
}
.c-election-table__head-cell {
  @include font-gm-sans-bold;
  font-size: rem(12);
  letter-spacing: rem(1);
  color: $color-grey-660;
  text-transform: uppercase;
}
.c-election-table__body-cell {
  min-height: rem(35);
  @include font-gm-sans;
  font-size: rem(14);
  line-height: line-height(14, 17);
  letter-spacing: rem(1);
  color: $color-grey-800;
  .c-election-table__abbr {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    text-decoration: none;
  }
}
// Hide the full-length party name column at narrow viewport widths
.c-election-table__head-cell--party-full,
.c-election-table__body-cell--party-full {
  display: none;
}
.c-election-table__head-cell--party-full,
.c-election-table__head-cell--party-abbr,
.c-election-table__head-cell--candidate,
.c-election-table__body-cell--party-full,
.c-election-table__body-cell--party-abbr,
.c-election-table__body-cell--candidate {
  text-align: left;
}
.c-election-table__body-cell--party-full,
.c-election-table__body-cell--party-abbr {
  @include font-gm-sans-bold;
  text-transform: uppercase;
  position: relative;
  &::before {
    content: "";
    width: rem(10);
    height: rem(10);
    margin-top: rem(4);
    border-radius: 100%;
    background-color: $color-other-500;
    display: inline-block;
    position: absolute;
  }
  .c-election-table__body-cell-content {
    padding-left: rem(14);
    display: inline-block;
  }
}

// Party-specific table row styles
// TODO: use one consistent ID for the Green Party and "other", for all election components
@include c-election-table-row(lib);
@include c-election-table-row(cpc);
@include c-election-table-row(ndp);
@include c-election-table-row(bq);
@include c-election-table-row(grn);
@include c-election-table-row(gp);
@include c-election-table-row(ppc);
@include c-election-table-row(oth);
@include c-election-table-row(other);

// Common styles for table rows in their "winner" state
.c-election-table__body-row--winner {
  .c-election-table__body-cell,
  .c-election-table__increase,
  .c-election-table__decrease {
    color: $color-white;
  }
  .c-election-table__body-cell--party-full,
  .c-election-table__body-cell--party-abbr {
    &::before {
      width: rem(19);
      height: rem(15);
      margin-top: 0;
      border-radius: 0;
      background: transparent url("~patterns/images/checkmark.svg") no-repeat 54% 84%;
      background-size: 150% auto;
    }
    .c-election-table__body-cell-content {
      padding-left: rem(20);
    }
  }
}

// "Change in seats" increase and decrease numbers
.c-election-table__increase {
  color: $color-utility-green-500;
}
.c-election-table__decrease {
  color: $color-utility-red-500;
}

// Notes below the table
.c-election-table__notes {
  margin: rem(5) 0;
  padding: 0 rem(10);
  display: flex;
}
.c-election-table__note {
  margin: 0;
  @include font-gm-sans;
  font-size: rem(12);
  line-height: line-height(12, 16);
  letter-spacing: rem(0.3);
  color: $color-grey-660;
  flex: 1;
  &:last-child {
    text-align: right;
  }
}

// Leading Party table
.c-election-table--leading-party {
  .c-election-table__table {
    // Rather than squish the text when the viewport is narrow, we'll
    // instead force the table to overflow, cutting off the last column
    // so that the user has to scroll horizontally to see it
    min-width: rem(470);
  }
  .c-election-table__head-cell,
  .c-election-table__body-cell {
    width: 20%;
  }
  .c-election-table__head-cell-content {
    max-width: rem(75);
    display: inline-block;
  }
}

// Riding Candidate table
//
// Assuming the table is 335px wide:
// Party column:
//   (70  / 335) x 100 = 20.895522388059701
// Candidate column:
//   (145 / 335) x 100 = 43.283582089552239
// Remaining columns:
//   (60  / 335) x 100 = 17.91044776119403
//
.c-election-table--riding-candidate {
  .c-election-table__head-cell,
  .c-election-table__body-cell {
    width: 17.91044776119403%; // 60px
  }
  .c-election-table__head-cell--party-full,
  .c-election-table__body-cell--party-full,
  .c-election-table__head-cell--party-abbr,
  .c-election-table__body-cell--party-abbr {
    width: 20.895522388059701%; // 70px
  }
  .c-election-table__head-cell--candidate,
  .c-election-table__body-cell--candidate {
    width: 43.283582089552239%; // 145px
  }
}
