@import "tools.mixins";

/*
 * Returns column width based on number of circles, diameter, and gap.
 * $num-circles - number of circles going horizontally
 * $diameter - diameter of the circles
 * $gap - gap between circles
 */
@function c-election-bubble-chart-get-col-width($num-circles, $diameter, $gap) {
  @return $num-circles * $diameter + (($num-circles - 1) * $gap);
}

/*
 * Returns grid item height based on number of circles, diameter, and gap.
 * $num-circles - number of circles going horizontally
 * $diameter - diameter of the circles
 * $gap - gap between circles
 */
@function c-election-bubble-chart-get-grid-item-height($num-circles, $diameter, $gap) {
  // This calculation takes into account, the extra gap added below the last row of bubbles.
  @return $num-circles * $diameter + ($num-circles * $gap);
}

/*
 * Returns c-election-bubble-chart_bubble rules.
 * $diameter - diameter of the circles
 * $gap - gap between circles
 */
@mixin c-election-bubble-chart-bubble($diameter, $gap) {
  .c-election-bubble-chart__bubble {
    width: rem($diameter);
    height: rem($diameter);
    margin-right: rem($gap);
    margin-bottom: rem($gap);
    border-radius: 50%;
  }
}

@mixin c-election-bubble-chart-xs {// For 360px+
  $gap: 2;// gap between bubbles
  $diameter: 9;// bubble diameter
  $horizontal-gutter: 20;// horizontal spacing between province groupings
  $vertical-gutter: 20 - $gap;// vertical spacing between province groupings

  @include c-election-bubble-chart-bubble($diameter, $gap);

  .c-election-bubble-chart__grid-container--east {
    .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-group {
        height: rem(c-election-bubble-chart-get-grid-item-height(2, $diameter, $gap));
      }
    }
    .c-election-bubble-chart__province--qc {
      .c-election-bubble-chart__bubble-group {
        height: rem(c-election-bubble-chart-get-grid-item-height(3, $diameter, $gap));
      }
    }
  }

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

  .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.5, $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);

    .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-group {
        height: rem(c-election-bubble-chart-get-grid-item-height(3, $diameter, $gap));
      }
    }
  }
}

@mixin c-election-bubble-chart-small {// For 768px+
  $gap: 3;// gap between bubbles
  $diameter: 14;// bubble diameter
  $horizontal-gutter: 28;// horizontal spacing between province groupings
  $vertical-gutter: 20 - $gap;// vertical spacing between province groupings

  // All province groupings have bubble charts with a max of 4 bubbles high in this layout variation.
  $height: rem(c-election-bubble-chart-get-grid-item-height(4, $diameter, $gap) + $gap);

  @include c-election-bubble-chart-bubble($diameter, $gap);

  .c-election-bubble-chart__grid-container--east {
    margin-bottom: rem($vertical-gutter);

    $col1: rem(c-election-bubble-chart-get-col-width(2, $diameter, $gap));// NL
    $col2: rem(c-election-bubble-chart-get-col-width(3, $diameter, $gap));// NS
    $col3: rem(c-election-bubble-chart-get-col-width(1, $diameter, $gap));// PE
    $col4: rem(c-election-bubble-chart-get-col-width(3, $diameter, $gap));// NB
    $col5: auto;// QC

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

    .c-election-bubble-chart__province--nl {
      @include grid-column(1, 2, true);
    }

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

    .c-election-bubble-chart__province--pe {
      @include grid-column(3, 4, true);
    }

    .c-election-bubble-chart__province--nb {
      @include grid-column(4, 5, true);
    }

    .c-election-bubble-chart__province--qc {
      @include grid-column(5, 6, true);
      @include grid-row(1, 2, true);
    }

    .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__province--qc {

      .c-election-bubble-chart__bubble-group {
        height: $height;
      }
    }
  }

  .c-election-bubble-chart__province--on {
    margin-bottom: rem($vertical-gutter);

    .c-election-bubble-chart__bubble-group {
      height: $height;
    }
  }

  /* Grid container for western provinces/territories */
  .c-election-bubble-chart__grid-container--west {
    $col1: rem(c-election-bubble-chart-get-col-width(4, $diameter, $gap));// MB
    $col2: rem(c-election-bubble-chart-get-col-width(4, $diameter, $gap));// SK
    $col3: rem(c-election-bubble-chart-get-col-width(9, $diameter, $gap));// AB
    $col4: rem(c-election-bubble-chart-get-col-width(11, $diameter, $gap));// BC
    $col5: rem(c-election-bubble-chart-get-col-width(1, $diameter, $gap));// NU
    $col6: rem(c-election-bubble-chart-get-col-width(1, $diameter, $gap));// NT
    $col7: auto;// YT

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

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

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

    .c-election-bubble-chart__province--ab {
      @include grid-column(3, 4, true);
    }

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

    .c-election-bubble-chart__province--nu {
      @include grid-column(5, 6, true);
      @include grid-row(1, 2, true);
    }

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

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

    .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-group {
        height: $height;
      }
    }
  }
}

@mixin c-election-bubble-chart-medium-rules($gap, $diameter, $horizontal-province-gutter, $horizontal-territory-gutter, $vertical-gutter) {
  // All province bubble groups are 3 bubbles high at this breakpoint.
  $height:  rem(c-election-bubble-chart-get-grid-item-height(3, $diameter, $gap) + $gap);
  $vertical-gutter: $vertical-gutter - $gap;// Account for extra vertical spacing added by last row of bubbles

  @include c-election-bubble-chart-bubble($diameter, $gap);

  .c-election-bubble-chart__grid-container--east {
    margin-bottom: rem($vertical-gutter);

    $col1: rem(c-election-bubble-chart-get-col-width(3, $diameter, $gap));// NL
    $col2: rem(c-election-bubble-chart-get-col-width(4, $diameter, $gap));// NS
    $col3: rem(c-election-bubble-chart-get-col-width(2, $diameter, $gap));// PE
    $col4: rem(c-election-bubble-chart-get-col-width(4, $diameter, $gap));// NB
    $col5: auto;// QC

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

    .c-election-bubble-chart__province--nl {
      @include grid-column(1, 2, true);
    }

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

    .c-election-bubble-chart__province--pe {
      @include grid-column(3, 4, true);
    }

    .c-election-bubble-chart__province--nb {
      @include grid-column(4, 5, true);
    }

    .c-election-bubble-chart__province--qc {
      @include grid-column(5, 6, true);
      @include grid-row(1, 2);
    }

    .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__province--qc {
      .c-election-bubble-chart__bubble-group {
        height: $height;
      }
    }
  }

  .c-election-bubble-chart__province--on {
    margin-bottom: rem($vertical-gutter);

    .c-election-bubble-chart__bubble-group {
      height: $height;
    }
  }

  .c-election-bubble-chart__grid-container--west {
    // Gutters between provinces are added via the column calculations themselves instead
    // of grid-gap since we'll need to be able to set non-equal values at other breakpoints.
    $col1: rem(c-election-bubble-chart-get-col-width(5, $diameter, $gap) + $horizontal-province-gutter);// MB - 25px to account for gutter
    $col2: rem(c-election-bubble-chart-get-col-width(5, $diameter, $gap) + $horizontal-province-gutter);// SK
    $col3: rem(c-election-bubble-chart-get-col-width(12, $diameter, $gap) + $horizontal-province-gutter);// AB
    $col4: rem(c-election-bubble-chart-get-col-width(14, $diameter, $gap) + $horizontal-province-gutter);// BC
    $col5: rem(c-election-bubble-chart-get-col-width(1, $diameter, $gap) + $horizontal-territory-gutter);// NU
    $col6: rem(c-election-bubble-chart-get-col-width(1, $diameter, $gap) + $horizontal-territory-gutter);// NT
    $col7: auto;// YT

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

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

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

    .c-election-bubble-chart__province--ab {
      @include grid-column(3, 4);
    }

    .c-election-bubble-chart__province--bc {
      @include grid-column(4, 5);
      @include grid-row(1, 2);
    }

    .c-election-bubble-chart__province--nu {
      @include grid-column(5, 6);
      @include grid-row(1, 2);
    }

    .c-election-bubble-chart__province--nt {
      @include grid-column(6, 7);
      @include grid-row(1, 2);
    }

    .c-election-bubble-chart__province--yt {
      @include grid-column(7, 8);
      @include grid-row(1, 2);
    }

    .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-group {
        height: $height;
      }
    }
  }
}

@mixin c-election-bubble-chart-medium--narrow {// For 940px+ homepage
  $gap: 2;// gap between bubbles
  $diameter: 10;// bubble diameter
  $horizontal-province-gutter: 20;// horizontal space between provinces
  $horizontal-territory-gutter: 20;// horizontal space between territories
  $vertical-gutter: 12;// vertical space between provinces/territories

  @include c-election-bubble-chart-medium-rules($gap, $diameter, $horizontal-province-gutter, $horizontal-territory-gutter, $vertical-gutter);

  .c-election-bubble-chart {
    width: rem(620);
    height: rem(244);
  }
}

@mixin c-election-bubble-chart-medium {// For 980px+ landing page
  $gap: 3;// gap between bubbles
  $diameter: 14;// bubble diameter
  $horizontal-province-gutter: 45;// space between provinces
  $horizontal-territory-gutter: 25;// space between territories
  $vertical-gutter: 20;// vertical space between provinces/territories

  @include c-election-bubble-chart-medium-rules($gap, $diameter, $horizontal-province-gutter, $horizontal-territory-gutter, $vertical-gutter);

  .c-election-bubble-chart {
    width: 100%;
    height: 100%;
  }
}

@mixin c-election-bubble-chart-wide-rules($gap, $diameter, $horizontal-province-gutter, $horizontal-territory-gutter, $vertical-gutter) {
  // All province bubble groups have a max of 2 bubbles high at this breakpoint.
  $height:  rem(c-election-bubble-chart-get-grid-item-height(2, $diameter, $gap) + $gap);

  @include c-election-bubble-chart-bubble($diameter, $gap);

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

    $col1: rem(c-election-bubble-chart-get-col-width(4, $diameter, $gap));// NL
    $col2: rem(c-election-bubble-chart-get-col-width(6, $diameter, $gap));// NS
    $col3: rem(c-election-bubble-chart-get-col-width(2, $diameter, $gap));// PE
    $col4: rem(c-election-bubble-chart-get-col-width(5, $diameter, $gap));// NB
    $col5: auto;// QC

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

    .c-election-bubble-chart__province--nl {
      @include grid-column(1, 2, true);
    }

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

    .c-election-bubble-chart__province--pe {
      @include grid-column(3, 4, true);
    }

    .c-election-bubble-chart__province--nb {
      @include grid-column(4, 5, true);
    }

    .c-election-bubble-chart__province--qc {
      @include grid-column(5, 6, true);
      @include grid-row(1, 2, true);
    }

    .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__province--qc {
      .c-election-bubble-chart__bubble-group {
        height: $height;
      }
    }
  }

  .c-election-bubble-chart__province--on {
    margin-bottom: rem($vertical-gutter);

    .c-election-bubble-chart__bubble-group {
      height: $height;
    }
  }

  .c-election-bubble-chart__grid-container--west {
    // Gutters between provinces are added via the column calculations themselves instead
    // of grid-gap since we'll need to be able to set different horizontal gap values
    // between the provinces/territories groupings.
    $col1: rem(c-election-bubble-chart-get-col-width(7, $diameter, $gap) + $horizontal-province-gutter);// MB
    $col2: rem(c-election-bubble-chart-get-col-width(7, $diameter, $gap) + $horizontal-province-gutter);// SK
    $col3: rem(c-election-bubble-chart-get-col-width(17, $diameter, $gap) + $horizontal-province-gutter);// AB
    $col4: rem(c-election-bubble-chart-get-col-width(21, $diameter, $gap) + $horizontal-province-gutter);// BC
    $col5: rem(c-election-bubble-chart-get-col-width(1, $diameter, $gap) + $horizontal-territory-gutter);// NU
    $col6: rem(c-election-bubble-chart-get-col-width(1, $diameter, $gap) + $horizontal-territory-gutter);// NT
    $col7: auto;// YT

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

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

    .c-election-bubble-chart__province--sk {
      @include grid-column(2, 3, false);
    }

    .c-election-bubble-chart__province--ab {
      @include grid-column(3, 4, false);
    }

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

    .c-election-bubble-chart__province--nu {
      @include grid-column(5, 6, false);
      @include grid-row(1, 2, true);
    }

    .c-election-bubble-chart__province--nt {
      @include grid-column(6, 7, false);
      @include grid-row(1, 2, true);
    }

    .c-election-bubble-chart__province--yt {
      @include grid-column(7, 8, false);
      @include grid-row(1, 2, true);
    }

    .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-group {
        height: $height;
      }
    }
  }
}

@mixin c-election-bubble-chart-wide--narrow {// For 1260px+ homepage
  $gap: 2;// gap between bubbles
  $diameter: 12;// bubble diameter
  $horizontal-province-gutter: 26;// horizontal spacing between provinces
  $horizontal-territory-gutter: 26;// horizontal spacing between territories
  $vertical-gutter: 23 - $gap;// vertical spacing between provinces

  @include c-election-bubble-chart-wide-rules($gap, $diameter, $horizontal-province-gutter, $horizontal-territory-gutter, $vertical-gutter);

  .c-election-bubble-chart {
    width: rem(940);
    height: rem(244);
  }
}

@mixin c-election-bubble-chart-wide {// For 1280px+ landing page
  $gap: 3;// gap between bubbles
  $diameter: 14;// bubble diameter
  $horizontal-province-gutter: 55;// horizontal spacing between provinces
  $horizontal-territory-gutter: 25;// horizontal spacing between territories
  $vertical-gutter: 20 - $gap;// vertical spacing between provinces

  @include c-election-bubble-chart-wide-rules($gap, $diameter, $horizontal-province-gutter, $horizontal-territory-gutter, $vertical-gutter);

  .c-election-bubble-chart {
    width: 100%;
    height: 100%;
  }
}
