@use "../common/mixins";
@use "../common/variables";

// —————————————————————————————————————————————————————————————————
// elements
// wrap
// direction
// justify
// items
// self
// gap and col
// —————————————————————————————————————————————————————————————————

// —————————————————————————————————————————————————————————————————
// elements
// —————————————————————————————————————————————————————————————————

.flex,
.flex_item {
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  flex-wrap: wrap;
}

// —————————————————————————————————————————————————————————————————
// wrap
// —————————————————————————————————————————————————————————————————

// have children wrap automatically
.flex-wrap {
  justify-content: center;

  > .flex_item {
    flex: 1 0 0;

    > * {
      width: 100%;
    }
  }
}

// —————————————————————————————————————————————————————————————————
// direction
// —————————————————————————————————————————————————————————————————

.flex-column { flex-direction: column; }
.flex-columnReverse { flex-direction: column-reverse; }
.flex-row { flex-direction: row; flex-wrap: wrap; }
.flex-rowReverse { flex-direction: row-reverse; flex-wrap: wrap; }

// —————————————————————————————————————————————————————————————————
// justify
// —————————————————————————————————————————————————————————————————

.flex-jc-center { justify-content: center;}
.flex-jc-end { justify-content: flex-end;}
.flex-jc-start { justify-content: flex-start;}
.flex-jc-spaceAround { justify-content: space-around;}
.flex-jc-spaceBetween { justify-content: space-between;}
.flex-jc-spaceEvenly { justify-content: space-evenly;}

// —————————————————————————————————————————————————————————————————
// items
// —————————————————————————————————————————————————————————————————

.flex-ai-stretch { align-items: stretch; }
.flex-ai-center { align-items: center; }
.flex-ai-end { align-items: flex-end; }
.flex-ai-start { align-items: flex-start; }
.flex-ai-baseline { align-items: baseline; }

// —————————————————————————————————————————————————————————————————
// self
// —————————————————————————————————————————————————————————————————

.flex-as-stretch { align-self: stretch; }
.flex-as-center { align-self: center; }
.flex-as-end { align-self: flex-end; }
.flex-as-start { align-self: flex-start; }
.flex-as-baseline { align-self: baseline; }

// —————————————————————————————————————————————————————————————————
// gap and col
// —————————————————————————————————————————————————————————————————

$columns: 12;
$breakpoints: (
  xs: mobile-sm,
  sm: mobile,
  md: tablet,
  lg: laptop,
  xl: desktop
);

@for $i from 1 through $columns {
  .col-#{$i} {
    width: variables.$col * $i;
  }
}

[class*="gap-"],
[class*="col-"] {
  width: 100%;
}

@for $i from 1 through $columns {
  .gap-#{$i} {
    gap: #{$i * .25}rem;
    
    @for $j from 1 through $columns {
      > .col-#{$j} {
        width: calc((variables.$col * $j) - (#{$i * .25}rem * (($columns / $j - 1) / ($columns / $j))));
      }
    }

    @each $suffix, $breakpoint in $breakpoints {
      @include mixins.responsive(up, $breakpoint) {
        @for $j from 1 through $columns {
          > .col-#{$suffix}-#{$j} {
            width: calc((variables.$col * $j) - (#{$i * .25}rem * (($columns / $j - 1) / ($columns / $j))));
          }
        }
      }
    }
  }
}