@import "tools.mixins";

@mixin c-election-switching-hands-md {
  .c-election-switching-hands {
    .c-election-switching-hands__content {
      @include display-grid;
      @include grid-template-columns(rem(15), grid-repeat(4, 1fr));
      @include grid-template-rows(rem(20), grid-repeat(2, auto));
    }

    // Select first four items
    .c-election-switching-hands__item:nth-child(-n+4) {
      @include grid-row(1, 2, true);
      margin-top: 0;
    }

    // Select all but the first four
    .c-election-switching-hands__item:nth-child(n+5) {
      @include grid-row(2, 3, true);
      margin-top: 0;
    }

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

    .c-election-switching-hands__item:nth-child(4) {
      @include grid-column(4, 5, true);
    }

    .c-election-switching-hands__item-data,
    .c-election-switching-hands__item-data__2019 {
      display: block;
    }
  }
}

@mixin c-election-switching-hands-lg {
  .c-election-switching-hands {
    .c-election-switching-hands__content {
      @include grid-template-columns(rem(10), grid-repeat(7, 1fr));
      @include grid-template-rows(0, auto);
    }
    .c-election-switching-hands__item:nth-child(-n+4),
    .c-election-switching-hands__item:nth-child(n+5) {
      @include grid-row(1, 2);
      margin-top: 0;

      $elements-count: 8;
      @for $i from 1 to $elements-count {

        &:nth-child(#{$i}) {
          @include grid-column($i, $i + 1, true);
        }
      }
    }
  }
}
