@import "tools.mixins";

@mixin c-election-party-leaders-md {
  .c-election-party-leaders {

    .c-election-party-leaders__content {
      @include display-grid;
      @include grid-template-columns(rem(10), grid-repeat(2, 1fr));
      @include grid-template-rows(0, grid-repeat(3, auto));
    }

    // Grid rows
    .c-election-party-leaders__item:nth-child(-n+2) {
      @include grid-row(1, 2, false);
    }

    .c-election-party-leaders__item:nth-child(n+3) {
      @include grid-row(2, 3, false);
      margin-top: 0;
    }

    .c-election-party-leaders__item:nth-child(n+5) {
      @include grid-row(3, 4, false);
      margin-top: 0;
    }

    // Grid columns
    $elements-count: 2;
    $increment: 2;
    @for $i from 1 through $elements-count {
      .c-election-party-leaders__item:nth-child(#{$i}),
      .c-election-party-leaders__item:nth-child(#{$i + $increment}),
      .c-election-party-leaders__item:nth-child(#{$i + $increment * 2}) {
        @include grid-column($i, $i + 1, true);
      }
    }
  }
}

@mixin c-election-party-leaders-lg {
  .c-election-party-leaders {
    .c-election-party-leaders__content {
      @include grid-template-columns(rem(10), grid-repeat(3, 1fr));
      @include grid-template-rows(0, grid-repeat(2, auto));
    }

    // Grid rows - first three items
    .c-election-party-leaders__item:nth-child(-n+3) {
      @include grid-row(1, 2, false);
    }

    // Grid rows - last three items
    .c-election-party-leaders__item:nth-child(n+4) {
      @include grid-row(2, 3, false);
    }

    // Grid columns
    $elements-count: 3;
    @for $i from 1 through $elements-count {
      .c-election-party-leaders__item:nth-child(#{$i}),
      .c-election-party-leaders__item:nth-child(#{$i + 3}) {
        @include grid-column($i, $i + 1, true);
      }
    }
  }
}

@mixin c-election-party-leaders-x-lg {
  .c-election-party-leaders {
    .c-election-party-leaders__content {
      @include grid-template-rows(rem(10), grid-repeat(2, auto));
    }

    .c-election-party-leaders__item {
      @include grid-template-columns(rem(10), rem(120) 1fr);
      @include grid-template-rows(0, rem(120));
    }

    // Grid rows - first three items
    .c-election-party-leaders__item:nth-child(-n+3) {
      @include grid-row(1, 2, true);
    }

    // Grid rows - last three items
    .c-election-party-leaders__item:nth-child(n+4) {
      @include grid-row(2, 3, true);
    }

    .c-election-party-leaders__headshot-image {
      height: rem(120);
    }

    .c-election-party-leaders__leader {
      font-size: rem(20);
    }

    .c-election-party-leaders__riding {
      font-size: rem(16);
    }
  }
}
