/*
 * Bento Grid System (Flexbox Version)
 * Source: https://github.com/fenbox/bento
 * Version: 2.0.0
 * Update: 2024.10.23
 */

@import "vars";

// Mixins
%box-sizing {
  box-sizing: border-box;
}

// Container
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: $gutter-width / 2;
  padding-right: $gutter-width / 2;
  @extend %box-sizing;
  display: flex;
  flex-wrap: wrap;
}

// Column group
.row {
  margin-right: $gutter-width / -2;
  margin-left: $gutter-width / -2;
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
}

.row [class*="col-"] {
  padding-right: $gutter-width / 2;
  padding-left: $gutter-width / 2;
  min-height: 1px;
  flex-grow: 1;
  @extend %box-sizing;
}

// Flex order replaces push and pull functionality
.row [class*="-push-"],
.row [class*="-pull-"] {
  position: relative;
}

// Use flex-grow to simulate columns in mobile
@for $index from 1 through $columns {
  .col-mb-#{$index} {
    flex: 0 0 $column-width * $index;
    max-width: $column-width * $index;
  }
}

// Tablet and up
@include screen(tablet) {
  .container {
    max-width: $screen-tablet - ($gutter-width * 2);
  }

  @for $index from 1 through $columns {
    .col-tb-#{$index} {
      flex: 0 0 $column-width * $index;
      max-width: $column-width * $index;
    }
  }

  @for $index from 0 through $columns {
    .col-tb-offset-#{$index} {
      margin-left: $column-width * $index;
    }
  }

  @for $index from 0 through $columns {
    .col-tb-pull-#{$index} {
      order: -$index;
    }
  }

  @for $index from 0 through $columns {
    .col-tb-push-#{$index} {
      order: $index;
    }
  }
}

// Desktop and up
@include screen(desktop) {
  .container {
    max-width: $screen-desktop - ($gutter-width * 2);
  }

  @for $index from 1 through $columns {
    .col-#{$index} {
      flex: 0 0 $column-width * $index;
      max-width: $column-width * $index;
    }
  }

  @for $index from 0 through $columns {
    .col-offset-#{$index} {
      margin-left: $column-width * $index;
    }
  }

  @for $index from 0 through $columns {
    .col-pull-#{$index} {
      order: -$index;
    }
  }

  @for $index from 0 through $columns {
    .col-push-#{$index} {
      order: $index;
    }
  }
}

// Widescreen and up
@include screen(wide) {
  .container {
    max-width: $screen-wide - ($gutter-width * 2);
  }

  @for $index from 1 through $columns {
    .col-wd-#{$index} {
      flex: 0 0 $column-width * $index;
      max-width: $column-width * $index;
    }
  }

  @for $index from 0 through $columns {
    .col-wd-offset-#{$index} {
      margin-left: $column-width * $index;
    }
  }

  @for $index from 0 through $columns {
    .col-wd-pull-#{$index} {
      order: -$index;
    }
  }

  @for $index from 0 through $columns {
    .col-wd-push-#{$index} {
      order: $index;
    }
  }
}

// Responsive kit
@include screen(phone, max) {
  .kit-hidden-mb {
    display: none;
  }
}

@include screen(tablet, max) {
  .kit-hidden-tb {
    display: none;
  }
}

@include screen(desktop, max) {
  .kit-hidden {
    display: none;
  }
}

// Clearfix
.clearfix {
  zoom: 1;
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}
