@import "settings.colors";

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

// Default Riding Cards (Condensed)
.c-election-riding-card {
  border-width: 1px;
  border-style: solid;
  border-color:  $color-stone-200;
  background-color: $color-white;
  width: 100%;
}

.c-election-riding-card__inner,
.c-election-riding-card__link {
  @include display-grid;
  @include grid-template-columns(0, 1fr auto auto);
  @include grid-template-rows(0, 1fr 1fr);
  padding: rem(10);
}
.c-election-riding-card__link {
  text-decoration: none;
  &:hover,
  &:focus {
    .c-election-riding-card__name {
      color: $color-grey-900;
      text-decoration: underline;
    }
  }
}

.c-election-riding-card__name {
  @include grid-column(1, 3);
  @include grid-row(1, 2);
  @include font-gm-sans-bold;
  font-size: rem(15);
  line-height: line-height(15, 17);
  color: $color-grey-900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-election-riding-card__party {
  @include grid-column(1, 2);
  @include grid-row(2, 3);
  @include font-gm-sans-bold;
  text-transform: uppercase;
  font-size: rem(12);
  letter-spacing: rem(1);
  line-height: 1;

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

  .c-indicator-icon__art {
    fill: $color-white;
    width: rem(14);
    height: rem(14);
  }
}

.c-election-riding-card__party__circle {
  width: rem(10);
  height: rem(10);
  border-radius: rem(10);
  display: inline-block;
}

.c-election-riding-card__party-candidate {
  @include font-gm-sans;
  font-size: rem(15);
  line-height: line-height(15, 17);
  letter-spacing: rem(0.3);
  color: $color-grey-800;
  text-transform: none;
}

.c-election-riding-card__percent {
  @include grid-column(2, 4);
  @include grid-row(2, 3);
  @include font-gm-sans;
  font-size: rem(16);
  line-height: line-height(16, 19);
  color: $color-grey-800;
}

.c-election-riding-card__key {
  @include grid-column(3, 4);
  @include grid-row(1, 2);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 rem(22) rem(22) 0;
  border-color: transparent $color-stone-700 transparent transparent;
  margin-top: rem(-10);
  margin-right: rem(-10);
}


// Riding Card - Expanded
.c-election-riding-card--expanded {
  .c-election-riding-card__inner,
  .c-election-riding-card__link {
    @include grid-template-columns(rem(20), auto 1fr);
    @include grid-template-rows(0, 1fr);
    padding: rem(55) rem(20);
  }

  .c-election-riding-card__shape {
    @include grid-column(1, 2, true);
    @include grid-row(1, 2);
    @include grid-align-self(center);
    width: rem(80);
    height: rem(80);
    background: $color-stone-200;
    border-radius: rem(80);
    padding: rem(10);
  }
  .c-election-riding-card__art {
    width: 100%;
    height: 100%;
    fill: $color-white;
  }

  .c-election-riding-card__content {
    @include grid-column(2, 3, true);
    @include grid-row(1, 2);
  }

  .c-election-riding-card__name {
    font-size: rem(21);
    line-height: 1;
    white-space: normal;
    overflow: visible;
    word-wrap: break-word;
    margin-bottom: rem(15);
  }

  .c-election-riding-card__results {
    @include font-gm-sans;
    font-size: rem(14);
    letter-spacing: rem(0.5);
    line-height: line-height(14, 17);
    color: $color-grey-800;
  }
}



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

@each $key, $value in $riding-colours {
  .c-election-riding-card--#{$key} {
    transition: all 0.3s;
    // Partial results
    &.c-election-riding-card--partial {
      background: map-get($value, partial);

      .c-election-riding-card__art {
        fill: map-get($value, svg);
      }

      .c-election-riding-card__party__circle {
        background: map-get($value, complete);
      }
      &:not(.c-election-riding-card--expanded):hover {
        background: map-get($value, partial-hover);
      }
    }

    // Complete results
    &.c-election-riding-card--complete {
      background: map-get($value, complete);
      .c-election-riding-card__party {
        color: $color-white;
      }
      .c-election-riding-card__shape {
        background: $color-white;
      }
      .c-election-riding-card__art {
        fill: map-get($value, complete);
      }
      &:not(.c-election-riding-card--expanded):hover {
        background: map-get($value, complete-hover);
      }
    }
    .c-election-riding-card__party {
      color: map-get($value, complete);
    }

    &:not(.c-election-riding-card--expanded):hover {
      background: map-get($value, partial);
    }
  }

  .c-election-riding-card__rainbow__#{$key} {
    background: map-get($value, complete);
  }
}


.c-election-riding-card--partial,
.c-election-riding-card--complete {
  border: none;
}

.c-election-riding-card--complete {
  .c-election-riding-card__percent,
  .c-election-riding-card__polls {
    @include font-gm-sans-bold;
  }
  .c-election-riding-card__link {
    &:hover,
    &:focus {
      .c-election-riding-card__name {
        color: $color-white;
      }
    }
  }
  .c-election-riding-card__name,
  .c-election-riding-card__party-candidate,
  .c-election-riding-card__percent,
  .c-election-riding-card__results {
    color: $color-white;
  }
}


.c-election-riding-card__rainbow {
  @include flex-display;
  height: rem(8);
  width: 100%;
  background: $color-stone-200;
  margin-top: rem(2);
}
