@import "settings.colors";

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

$gap: 2;// gap between bubbles
$diameter: 8;// bubble diameter
$horizontal-gutter: 25;// horizontal spacing between province groupings
$vertical-gutter: 20 - $gap;// vertical spacing between province groupings minus extra bottom margin added by bottom bubbles

abbr.c-election-bubble-chart__abbr {
  text-decoration: none;
  font-variant: none;
}

.c-election-bubble-chart {
  background-color: $color-white;
  border: rem(1) solid $color-stone-200;
  padding: rem(10);
  width: 100%;
}

.c-election-bubble-chart__grid-container {
  @include display-grid;// Mixin required to handle IE 11
}

/* Bubble groups */
.c-election-bubble-chart__bubble-group {
  display: flex;
  flex-direction: column;// This allows for bubbles to flow from top to bottom (instead of left to right)
  flex-wrap: wrap;
  align-content: flex-start;// Doesn't use justify-content due to the flex direction being column
}

/* Grid container for eastern provinces/territories */
.c-election-bubble-chart__grid-container--east {
  margin-bottom: rem($vertical-gutter);

  // Arguments: num-circles, diameter, gap
  $col1: rem(c-election-bubble-chart-get-col-width(4, $diameter, $gap));
  $col2: rem(c-election-bubble-chart-get-col-width(6, $diameter, $gap));
  $col3: rem(c-election-bubble-chart-get-col-width(2, $diameter, $gap));
  $col4: auto;

  // We can't use 'auto' for the columns due to the bubble groups using flex-direction: column.
  // Thus, we need to specify the column widths explicitly for each breakpoint.
  @include grid-template-columns(rem($horizontal-gutter), $col1 $col2 $col3 $col4);
  @include grid-template-rows(rem($vertical-gutter), auto auto);

  // Grid items - bubble chart containers by province - eastern
  .c-election-bubble-chart__province--nl {
    @include grid-column(1, 2, true);// Needs `true` to handle gaps in IE 11
    @include grid-row(1, 2, true);

    .c-election-bubble-chart__bubble-group {
      // Arguments: num-circles, diameter, gap
      height: rem(c-election-bubble-chart-get-grid-item-height(2, $diameter, $gap));
    }
  }

  .c-election-bubble-chart__province--ns {
    @include grid-column(2, 3, true);
    @include grid-row(1, 2, true);

    .c-election-bubble-chart__bubble-group {
      height: rem(c-election-bubble-chart-get-grid-item-height(2, $diameter, $gap));
    }
  }

  .c-election-bubble-chart__province--pe {
    @include grid-column(3, 4, true);
    @include grid-row(1, 2, true);
    .c-election-bubble-chart__bubble-group {
      height: rem(c-election-bubble-chart-get-grid-item-height(2, $diameter, $gap));
    }
  }

  .c-election-bubble-chart__province--nb {
    @include grid-column(4, 5, true);
    @include grid-row(1, 2, true);
    .c-election-bubble-chart__bubble-group {
      height: rem(c-election-bubble-chart-get-grid-item-height(2, $diameter, $gap));
    }
  }

  .c-election-bubble-chart__province--qc {
    @include grid-column(1, 5, true);
    @include grid-row(2, 3, true);
    .c-election-bubble-chart__bubble-group {
      height: rem(c-election-bubble-chart-get-grid-item-height(3, $diameter, $gap));
    }
  }
}

/* Ontario doesn't need a grid container since it's always by itself on its own line */
.c-election-bubble-chart__province--on {
  margin-bottom: rem($vertical-gutter);

  .c-election-bubble-chart__bubble-group {
    height: rem(c-election-bubble-chart-get-grid-item-height(5, $diameter, $gap));// TODO: optionally, target this around the first grid container
  }
}

/* Grid container for western provinces/territories */
.c-election-bubble-chart__grid-container--west {
  // Gutters between provinces are added via the column calculations themselves instead
  // of grid-gap to handle the layout we need at this breakpoint on row 2
  $col1: rem(c-election-bubble-chart-get-col-width(5, $diameter, $gap) + $horizontal-gutter);// MB
  $col2: rem(c-election-bubble-chart-get-col-width(5, $diameter, $gap) + $horizontal-gutter);// SK
  $col3: rem(c-election-bubble-chart-get-col-width(2, $diameter, $gap));// First part of AB on rows 1; gutter for row 2 after BC
  $col4: rem(c-election-bubble-chart-get-col-width(3, $diameter, $gap));// Part of AB on row 1; NU on row 2
  $col5: rem(c-election-bubble-chart-get-col-width(3, $diameter, $gap));// Part of AB on row 1; NT on row 2
  $col6: auto;

  @include grid-template-columns(0, $col1 $col2 $col3 $col4 $col5 $col6);
  @include grid-template-rows(rem($vertical-gutter), auto auto);

  /* Grid items - bubble chart containers by province - western */
  .c-election-bubble-chart__province--mb {
    @include grid-column(1, 2);
    @include grid-row(1, 2, true);

    .c-election-bubble-chart__bubble-group {
      height: rem(c-election-bubble-chart-get-grid-item-height(3, $diameter, $gap));
    }
  }

  .c-election-bubble-chart__province--sk {
    @include grid-column(2, 3);
    @include grid-row(1, 2, true);

    .c-election-bubble-chart__bubble-group {
      height: rem(c-election-bubble-chart-get-grid-item-height(3, $diameter, $gap));
    }
  }

  .c-election-bubble-chart__province--ab {
    @include grid-column(3, 7);
    @include grid-row(1, 2, true);

    .c-election-bubble-chart__bubble-group {
      height: rem(c-election-bubble-chart-get-grid-item-height(3, $diameter, $gap));
    }
  }

  .c-election-bubble-chart__province--bc {
    @include grid-column(1, 3);
    @include grid-row(2, 3, true);

    .c-election-bubble-chart__bubble-group {
      height: rem(c-election-bubble-chart-get-grid-item-height(3, $diameter, $gap));
    }
  }

  .c-election-bubble-chart__province--nu {
    @include grid-column(4, 5);
    @include grid-row(2, 3, true);
    .c-election-bubble-chart__bubble-group {
      height: rem(c-election-bubble-chart-get-grid-item-height(1, $diameter, $gap));
    }
  }

  .c-election-bubble-chart__province--nt {
    @include grid-column(5, 6);
    @include grid-row(2, 3, true);
    .c-election-bubble-chart__bubble-group {
      height: rem(c-election-bubble-chart-get-grid-item-height(1, $diameter, $gap));
    }
  }

  .c-election-bubble-chart__province--yt {
    @include grid-column(6, 7);
    @include grid-row(2, 3, true);
    .c-election-bubble-chart__bubble-group {
      height: rem(c-election-bubble-chart-get-grid-item-height(1, $diameter, $gap));
    }
  }
}

/* Headings */
.c-election-bubble-chart__hed,
.c-election-bubble-chart__subhed {
  display: block;
  @include font-gm-sans-bold;
  color: $color-grey-660;
  text-transform: uppercase;
  letter-spacing: rem(1);
  font-size: rem(12);
  line-height: 1;
  margin-top: 0;
}

.c-election-bubble-chart__hed {
  margin-bottom: rem(15);
}

.c-election-bubble-chart__subhed {
  margin-bottom: rem(10);
}

/* Bubbles variations */
@include c-election-bubble-chart-bubble($diameter, $gap);

// Default - no results
.c-election-bubble-chart__bubble {
  background-color: $color-stone-200;
}

// No right margin for bubbles in last column, which contains max of 2 rows.
.c-election-bubble-chart__province--nl,
.c-election-bubble-chart__province--ns,
.c-election-bubble-chart__province--pe,
.c-election-bubble-chart__province--nb {
  .c-election-bubble-chart__bubble {
    &:nth-last-of-type(-n+2) {
      margin-right: 0;
    }
  }
}

// No right margin for bubbles in last column, which contains max of 3 rows.
.c-election-bubble-chart__province--qc,
.c-election-bubble-chart__province--mb,
.c-election-bubble-chart__province--sk,
.c-election-bubble-chart__province--ab,
.c-election-bubble-chart__province--bc,
.c-election-bubble-chart__province--nu,
.c-election-bubble-chart__province--nt,
.c-election-bubble-chart__province--yt {
  .c-election-bubble-chart__bubble {
    &:nth-last-of-type(-n+3) {
      margin-right: 0;
    }
  }
}


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

@each $key, $value in $riding-colours {
  .c-election-bubble-chart__bubble--#{$key}-partial {
    background-color: map-get($value, partial);
  }
  .c-election-bubble-chart__bubble--#{$key}-full {
    background-color: map-get($value, complete);
  }
}
