@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

.c-election-live-results {
  border: 1px solid $color-stone-200;
  background-color: $color-white;
  width: 100%;
  padding: rem(10);
  text-align: center;

  abbr[title] {
    border-bottom: none;
    text-decoration: none;
  }
}

.c-election-live-results-link {
  text-decoration: none;
  display: block;
  &:focus,
  &:hover {
    .c-election-live-results__full-results {
      text-decoration: underline;
    }
  }
}

// Heading
.c-election-live-results-heading {
  @include display-grid;
  @include grid-template-columns(0, 1fr 1fr);
  @include grid-template-rows(0, auto auto);
  width: 100%;
  text-align: center;
  @include font-gm-sans;
  font-size: rem(14);
  line-height: 1;
  letter-spacing: rem(1);
  padding-bottom: rem(15);
  align-items: center;
}

.c-election-live-results-heading__main {
  @include grid-column(1, 3);
  @include grid-row(1, 2);
  @include font-gm-sans-bold;
  font-size: rem(12);
  text-transform: uppercase;
  padding-bottom: rem(10);
  margin: 0;
}

.c-election-live-results-heading__sub {
  @include grid-column(1, 3);
  @include grid-row(2, 3);
  color: $color-grey-800;
  font-size: rem(14);
  letter-spacing: rem(0.3);
}

.c-election-live-results__refresh {
  display: none;
  @include grid-column(2, 3);
  @include grid-row(2, 3);
  padding-left: rem(20);

  .c-form__control--checkbox,
  .c-form__label {
    display: inline-block;
  }

  .c-form__label {
    font-size: rem(12);
    letter-spacing: rem(0.3);
  }
}

.c-election-live-results__parties {
  padding: 0;
  margin: 0;
  @include flex-display($wrap: nowrap);
}
.c-election-live-results__chart {
  @include flex-display($wrap: nowrap);
}

.c-election-live-results__party {
  flex-grow: 1;
  flex-basis: 0;
  text-align: center;
  padding: rem(10) rem(5) rem(8);
  @include flex-display;
  align-content: center;
  color: $color-grey-800;
}

.c-election-live-results__party-name--full,
.c-election-live-results__party-name--abbr {
  flex-basis: 100%;
  @include font-gm-sans-bold;
  font-size: rem(12);
  line-height: 1;
  letter-spacing: rem(1);
  text-transform: uppercase;
}

.c-election-live-results__party-name--full {
  display: none;
}

.c-election-live-results__party-seats {
  flex-basis: 100%;
  @include font-gm-sans-bold;
  font-size: rem(18);
  line-height: 1;
  letter-spacing: rem(1);
  padding-top: rem(5);
}

.c-election-live-results__full-results {
  @include font-gm-sans-bold;
  font-size: rem(12);
  line-height: 1;
  letter-spacing: rem(1);
  color: $color-grey-660;
  text-transform: uppercase;
  display: block;
  margin-top: rem(10);
  text-decoration: none;
}

// "Rainbow" chart below the result numbers
.c-election-live-results__rainbow {
  @include flex-display;
  height: rem(8);
  width: 100%;
  background: $color-stone-200;
  margin-top: rem(5);
  display: none;
}

.c-election-live-results__majority {
  @include font-gm-sans;
  font-size: rem(14);
  letter-spacing: rem(0.5);
  line-height: 1;
  color: $color-grey-800;
  display: none;
}

.c-election-live-results__majority__triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 rem(7.5) rem(12) rem(7.5);
  border-color: transparent transparent $color-grey-660 transparent;
  margin: rem(5) auto;
}

// Majority marker for bar chart - for Landing Page(s)
.c-election-live-results__majority--chart {
  @include display-grid;
  @include grid-template-columns(0, 1fr auto auto);
  border-bottom: 1px dotted $color-grey-660;
  align-items: center;

  .c-election-live-results__majority__triangle {
    @include grid-column(2, 3);
    border-width: rem(12) rem(7.5) 0 rem(7.5);
    border-color: $color-grey-660 transparent transparent transparent;
  }

  .c-election-live-results__majority__text {
    @include grid-column(3, 4);
    text-align: left;
    padding-left: rem(5);
  }
}

// Bar Chart styling
.c-election-live-results__chart {
  align-items: flex-end;
  margin-bottom: rem(3);
  padding-top: rem(60);

  // We want the Line of Majority to remove its padding when a party is within the 60px buffer we've given it,
  //`c-election-live-results--majority-range` class removes that padding.
  .c-election-live-results--majority-range &,
  .c-election-live-results--complete & {
    padding: 0;
    height: rem(170);
    align-content: flex-end;
  }
}

.c-election-live-results__chart-item {
  flex-grow: 1;
}

// Partial/Complete votes styling
.c-election-live-results--complete,
.c-election-live-results--partial {
  .c-election-live-results-heading {
    @include grid-template-columns(0, 1fr);
    @include grid-template-rows(0, grid-repeat(3, auto));
  }

  .c-election-live-results-heading__main {
    @include grid-column(1, 2);
    @include grid-row(1, 2);
  }

  .c-election-live-results-heading__sub {
    @include grid-column(1, 2);
    @include grid-row(2, 3);
    text-align: center;
  }

  .c-election-live-results__refresh {
    @include grid-column(1, 2);
    @include grid-row(3, 4);
    @include flex-display;
    align-items: center;
    padding: rem(10) 0 0;
    justify-content: center;
  }

  .c-election-live-results__rainbow {
    @include flex-display;
  }
  .c-election-live-results__majority,
  .c-election-live-results__majority--chart {
    @include display-grid;
  }

  .c-election-live-results__majority--chart {
    @include grid-template-columns(0, 1fr);
  }
}

// Party colours
$riding-colours: (
  cpc: (
    partial: $color-cpc-100,
    complete: $color-cpc-500,
    svg: $color-cpc-200
  ),
  lib: (
    partial: $color-lib-100,
    complete: $color-lib-500,
    svg: $color-lib-200
  ),
  ndp: (
    partial: $color-ndp-100,
    complete: $color-ndp-500,
    svg: $color-ndp-200
  ),
  bq: (
    partial: $color-bq-100,
    complete: $color-bq-500,
    svg: $color-bq-200
  ),
  ppc: (
    partial: $color-ppc-100,
    complete: $color-ppc-500,
    svg: $color-ppc-200
  ),
  grn: (
    partial: $color-gp-100,
    complete: $color-gp-500,
    svg: $color-gp-200
  ),
  oth: (
    partial: $color-other-100,
    complete: $color-other-500,
    svg: $color-other-200
  )
);

@each $key, $value in $riding-colours {
  .c-election-live-results__party--#{$key} {
    background: map-get($value, partial);

    .c-election-live-results--partial &,
    .c-election-live-results--complete & {
      background: map-get($value, complete);
      color: $color-white;
    }
  }

  .c-election-live-results__rainbow__#{$key},
  .c-election-live-results__chart-item--#{$key} {
    background: map-get($value, complete);
  }
}
