/*------------------------------------*\
    # GRID CONTROLS
\*------------------------------------*/

/**
* Change the group name based on the current media-query
*/
.gel-c-grid-controls__group-name {
  &:after {
    content: flip('Group 1 - Extra Small (0 - 399px)', 'Group 1 - Extra Small \200F(0 - 399px)');
  }

  @if $enhanced {
    @include mq($from: gel-bp-s) {
      &:after {
        content: flip('Group 2 - Small (400px - 599px)', 'Group 2 - Small \200F(400px - 599px)');
      }
    }

    @include mq($from: gel-bp-m) {
      &:after {
        content: flip('Group 3 - Medium (600px - 899px)', 'Group 3 - Medium \200F(600px - 899px)');
      }
    }

    @include mq($from: gel-bp-l) {
      &:after {
        content: flip('Group 4 - Large (900px)', 'Group 4 - Large \200F(900px)');
      }
    }

    @include mq($from: gel-bp-xl) {
      &:after {
        content: flip('Group 5 - Extra Large (1008px)', 'Group 5 - Extra Large \200F(1008px)');
      }
    }

    @include mq($from: gel-bp-xxl) {
      &:after {
        content: flip(
          'Group 6 - Extra Extra Large (1280px)',
          'Group 6 - Extra Extra Large \200F(1280px)'
        );
      }
    }
  }
}

/**
* Change the margin's and gutter's based on the breakpoint
*/
.gel-c-grid-controls__margin-gutter-size {
  &:after {
    content: 'Margins: 8px | Gutters: 8px';
  }

  @if $enhanced {
    @include mq($from: gel-bp-s) {
      &:after {
        content: 'Margins: 16px | Gutters: 8px';
      }
    }

    @include mq($from: gel-bp-m) {
      &:after {
        content: 'Margins: 16px | Gutters: 16px  |  For layouts a 900px breakpoint can also be used.';
      }
    }

    @include mq($from: gel-bp-l) {
      &:after {
        content: 'Margins: 16px | Gutters: 16px';
      }
    }
  }
}