/*
 |--------------------------------------------------------------------------
 |  Center Mixin
 |--------------------------------------------------------------------------
 */

@mixin center {
  float: none;
  margin-left: auto;
  margin-right: auto;
}


/*
 |--------------------------------------------------------------------------
 |  Col Padding Mixin
 |--------------------------------------------------------------------------
 */

// Mixin
@mixin col-padding($factor: 1) {
  $spacing: $factor * $bk-gutter;
  padding-left: $spacing;
  padding-right: $spacing;
}

/*
 |--------------------------------------------------------------------------
 |  Col Mixin
 |--------------------------------------------------------------------------
 */

// Mixin
@mixin col($cols: 1, $context: 1) {
  width: calc(#{$cols} / #{$context} * 100%);
}

/*
 |--------------------------------------------------------------------------
 |  Make Row Margin Mixin
 |--------------------------------------------------------------------------
 */

// Mixin
@mixin row-margin($factor: 1) {
  $spacing: ($factor * $bk-gutter) * -1;
  margin-left: $spacing;
  margin-right: $spacing;
}


/*
 |--------------------------------------------------------------------------
 |  Row Mixin
 |--------------------------------------------------------------------------
 */

// Mixin
@mixin row($factor: 1, $margin: true) {
  width: auto;
  @if $margin == true {
    @include row-margin($factor);
  }

  flex-flow: row wrap;
  display: flex;
  flex: 1 1 auto;
}



/*
 |--------------------------------------------------------------------------
 |  Section Mixin
 |--------------------------------------------------------------------------
 */

// Mixin
@mixin section() {
  display: block;
  width: 100%;
  position: relative;
}



/*
 |--------------------------------------------------------------------------
 |  Container Mixin
 |--------------------------------------------------------------------------
 */

// Mixin
@mixin container($size: 'max', $factor: 1, $padding: true) {
  @include center();
  width: 100%;
  max-width: map_get($bk-breakpoints, 'max');

  @if $padding == true {
    $spacing: ($factor * 2) * $bk-gutter;
    padding-left: $spacing;
    padding-right: $spacing;
  }
}


/*
 |--------------------------------------------------------------------------
 |  Col Offset Mixin
 |--------------------------------------------------------------------------
 */

@mixin col-offset($cols: 1, $context: 1) {
  $offset: 0;

  // Rounds to integer Numbers
  @if $cols != auto {
    $cols: ceil($cols);
  }

  // If Cols auto set it to 0
  @if $cols == auto {
    margin-left: auto;
  } @else {
    margin-left: calc(#{$cols} / #{$context} * 100%);
  }
}


/*
 |--------------------------------------------------------------------------
 |  Col Push Mixin
 |--------------------------------------------------------------------------
 */

@mixin col-push($cols: 1, $context: 1) {
  // Rounds to integer Numbers
  @if $cols != auto {
    $cols: ceil($cols);
  }

  left: calc(#{$cols} / #{$context} * 100%);
}

/*
 |--------------------------------------------------------------------------
 |  Col Pull Mixin
 |--------------------------------------------------------------------------
 */

@mixin col-pull($cols: 1, $context: 1) {
  // Rounds to integer Numbers
  @if $cols != auto {
    $cols: ceil($cols);
  }

  right: calc(#{$cols} / #{$context} * 100%);
}