@use 'sass:map';
@use 'sass:math';
@use 'sass:meta';

@use './shared' as *;
@use './design' as *;

$column: () !default;
$column: map.merge(
  (
    display: block
  ),
  $column
);

.#{$namespace}-column {
  &-vars {
    @include define-preset-values('column', $column);
  }

  @include basis {
    position: relative;
    display: value('column-display');
    max-width: 100%;
  }

  @include inherit-color;

  &--flex {
    // display: flex;
    @include define-preset-values(
      'column',
      (
        display: flex
      )
    );
  }

  &--start {
    justify-content: flex-start;
  }

  &--end {
    justify-content: flex-end;
  }

  &--center {
    justify-content: center;
  }

  &--space-around {
    justify-content: space-around;
  }

  &--space-between {
    justify-content: space-between;
  }

  &--space-evenly {
    justify-content: space-evenly;
  }

  &--top {
    align-items: flex-start;
  }

  &--middle {
    align-items: center;
  }

  &--bottom {
    align-items: flex-end;
  }

  &--0 {
    display: none;
  }

  @for $i from 0 through 24 {
    $size: (math.div(1, 24) * $i * 100) * 1%;

    &--#{$i} {
      display: if($i == 0, none, value('column-display'));
      flex: 0 0 $size;
      max-width: $size;
    }

    &--offset-#{$i} {
      margin-inline-start: $size;
    }

    &--pull-#{$i} {
      inset-inline-end: $size;
    }

    &--push-#{$i} {
      inset-inline-start: $size;
    }

    &--order-#{$i} {
      order: $i;
    }
  }

  @each $point in map.keys($break-point-map) {
    @media only screen and #{meta.inspect(map.get($break-point-map, $point))} {
      &--#{$point}-0 {
        display: none;
      }

      @for $i from 0 through 24 {
        $size: (math.div(1, 24) * $i * 100) * 1%;

        &--#{$point}-#{$i} {
          display: value('column-display');
          flex: 0 0 $size;
          max-width: $size;
        }

        &--#{$point}-offset-#{$i} {
          margin-inline-start: $size;
        }

        &--#{$point}-pull-#{$i} {
          inset-inline-end: $size;
        }

        &--#{$point}-push-#{$i} {
          inset-inline-start: $size;
        }

        &--#{$point}-order-#{$i} {
          order: $i;
        }
      }
    }
  }

  & > .#{$namespace}-row {
    width: 100%;
  }
}