@import "settings.breakpoints";
@import "settings.colors";

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

.c-election-party-leaders {
  border: 1px solid $color-stone-200;
  background: $color-white;

  @include mq($until: desktop) {
    abbr[title] {
      border-bottom: none;
      text-decoration: none;
    }
  }

  .c-election-party-leaders__heading {
    @include font-gm-sans-bold;
    letter-spacing: rem(1);
    font-size: rem(12);
    color: $color-grey-660;
    text-transform: uppercase;
    margin: rem(10) 0 rem(10) rem(10);
  }

  .c-election-party-leaders__item {
    @include display-grid;
    @include grid-template-columns(rem(15), rem(90) 1fr);
    @include grid-template-rows(0, rem(90));
    padding: rem(10);
  }

  // Styles for newly elected Prime Minister
  .c-election-party-leaders__item--winner-pm {
    color: $color-white;

    .c-election-party-leaders__party--winner {
      // Checkbox indicating winner of riding
      .c-indicator-icon__art {
        fill: $color-white;
      }
    }

    .c-election-party-leaders__leader,
    .c-election-party-leaders__riding,
    .c-election-party-leaders__difference,
    .c-election-party-leaders__party {
      color: $color-white;
    }

    .c-election-party-leaders__party {
      display: inline-block;
    }
  }

  .c-election-party-leaders__headshot {
    @include grid-column(1, 2, true);
  }

  .c-election-party-leaders__data {
    @include grid-align-self(center);
    @include grid-column(2, 3, true);
  }

  .c-election-party-leaders__headshot-image {
    border-radius: 100%;
    height: rem(90);
  }

  .c-election-party-leaders__party {
    @include font-gm-sans-bold;
    margin: 0;
    font-size: rem(14);
    text-transform: uppercase;
    letter-spacing: rem(1);
  }

  // Only show circle that appears before party abbreviation when election is in partial or complete status.
  &.c-election-party-leaders--partial, &.c-election-party-leaders--complete {
    .c-election-party-leaders__party:not(.c-election-party-leaders__party--winner) {
      &::before {
        content: "";
        width: rem(10);
        height: rem(10);
        margin-right: rem(5);
        border-radius: 100%;
        display: inline-block;
      }
    }
  }

  .c-election-party-leaders__party-abbr {
    padding-right: rem(5);
  }

  .c-election-party-leaders__leader {
    @include font-gm-sans-bold;
    display: inline-block;
    font-size: rem(16);
    margin: 0 0 rem(10) 0;
    color: $color-grey-800;
    line-height: 1;
  }

  .c-election-party-leaders__riding {
    @include font-gm-sans;
    letter-spacing: rem(0.3);
    display: block;
    font-size: rem(15);
    margin: 0 0 rem(10) 0;
    color: $color-grey-800;
  }

  .c-election-party-leaders__difference {
    @include font-gm-sans;
    letter-spacing: rem(0.3);
    display: inline-block;
    font-size: rem(15);
    margin: 0;
    color: $color-grey-800;
  }

  .c-election-party-leaders__difference--decrease {
    color: $color-utility-red-500;
  }

  .c-election-party-leaders__difference--increase {
    @include font-gm-sans;
    letter-spacing: rem(0.3);
    display: inline-block;
    font-size: rem(15);
    margin-top: 0;
    color: $color-utility-green-500;
  }

  .c-indicator-icon {
    margin-left: 0;
  }
}

.c-election-party-leaders--partial,
.c-election-party-leaders--complete {
  .c-election-party-leaders__party-abbr {
    margin-left: rem(-2);
  }
}

///////////////////////////
// Party color modifiers
///////////////////////////
$party-colors: (
  lib: $color-lib-500,
  cpc: $color-cpc-500,
  ndp: $color-ndp-500,
  bq:  $color-bq-500,
  gp: $color-gp-500,
  ppc: $color-ppc-500
);

@each $key, $value in $party-colors {
  .c-election-party-leaders__party.c-election-party-leaders__party--#{$key} {
    display: inline-block;
    color: $value;
  }

  .c-election-party-leaders__party.c-election-party-leaders__party--#{$key}:not(.c-election-party-leaders__party--winner) {
    // Circle colour rules for non-riding-winners.
    &::before {
      background-color: $value;
    }
  }

  // Party leader is PM but lost his/her riding.
  .c-election-party-leaders__item--winner-pm {
    .c-election-party-leaders__party.c-election-party-leaders__party--#{$key}:not(.c-election-party-leaders__party--winner) {
      // Circle colour rules for non-riding-winners.
      &::before {
        background-color: $color-white;
      }
    }
  }

  .c-election-party-leaders__party--winner.c-election-party-leaders__party--#{$key} {
    // Checkbox indicating winner of riding.
    .c-indicator-icon__art {
      fill: $value;
      width: rem(14);
      height: rem(14);
      margin-right: rem(3);
    }
  }

  // Background colour rules for newly elected Prime Minister.
  .c-election-party-leaders__item--winner-pm--#{$key} {
    background-color: $value;
  }
}
