/* CSS based on flexboxgrid Copyright 2013 Kristofer Joseph */

@use './_mixins.scss' as mixins;
@use './_flex-vars.scss' as flex-vars;

/* --- CSS Variables --- */

:root {
  // columns
  --columns: 12;
  --column-width: calc(100% / var(--columns));

  // gutters
  --gutter-width: 1rem;
  --outer-margin: 2rem;
  --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
  --half-gutter-width: calc((var(--gutter-width) * 0.5));

  // containers
  @each $modifier, $width in flex-vars.$container-widths {
    --container#{$modifier}: calc(#{$width} + var(--gutter-width));
  }
}

/* --- Containers --- */

// default container is fluid
#{flex-vars.$container-class},
#{flex-vars.$container-class}-fluid {
  padding-right: var(--outer-margin, 2rem);
  padding-left: var(--outer-margin, 2rem);
}

#{flex-vars.$container-class},
#{flex-vars.$container-class}-fluid,
#{flex-vars.$container-class}-fixed {
  margin-right: auto;
  margin-left: auto;
}

/* --- Rows --- */

#{flex-vars.$row-class} {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: var(--gutter-compensation, -0.5rem);
  margin-left: var(--gutter-compensation, -0.5rem);

  &.reverse {
    flex-direction: row-reverse;
  }

  @include mixins.modifiers('');

  // defualt columns
  & > * {
    @include mixins.col-base();
    flex: 1 1 auto;

    @include mixins.modifiers('');

    &.reverse {
      flex-direction: column-reverse;
    }
  }
}

/* --- Columns --- */

@each $modifier, $breakpoint in flex-vars.$breakpoints {
  @media screen and (min-width: $breakpoint) {
    #{flex-vars.$container-class}-fixed {
      width: var(--container#{$modifier});
    }

    #{flex-vars.$row-class} > {
      @include mixins.create-col-classes($modifier);
    }
  }
}