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

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

.c-election-switching-hands {
  padding: rem(10);
  border: 1px solid $color-stone-200;
  background: $color-white;

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

  .c-election-switching-hands__description {
    @include font-gm-sans;
    font-size: rem(15);
    color: $color-grey-800;
    margin: rem(10) 0 0 0;
  }

  .c-election-switching-hands__content {
    margin-top: rem(20);
  }

  .c-election-switching-hands__item:not(:first-child) {
    margin-top: rem(15);
  }

  .c-election-switching-hands__item-main {
    @include font-gm-sans-bold;
    letter-spacing: rem(1);
    border-width: rem(3);
    border-style: solid;
    padding: rem(5) 0;
    text-align: center;

    .c-election-switching-hands__item-main__party {
      font-size: rem(14);
      text-transform: uppercase;
    }

    .c-election-switching-hands__item-main__results {
      font-size: rem(38);
      display: block;
      color: $color-grey-800;
    }
  }

  .c-election-switching-hands__item-data {
    @include display-grid;
    @include grid-template-columns(rem(15), grid-repeat(2, rem(95)));
    @include font-gm-sans;
    margin-top: rem(5);
  }

  .c-election-switching-hands__item-data__votes {
    @include font-gm-sans-bold;
    letter-spacing: rem(1);
    font-size: rem(15);
  }

  .c-election-switching-hands__item-data__2015 {
    @include grid-column(1, 2, true);
  }
  .c-election-switching-hands__item-data__2019 {
    @include grid-column(2, 3, true);
  }
}

///////////////////////////
// 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,
  other: $color-grey-800
);

@each $key, $value in $party-colors {
  .c-election-switching-hands__item--#{$key} {
    color: $value;
    border-color: $value;
  }
}
