@use "config";
@use "mixins";
@use "variables";
@use "sass:map";

// Block layout
.block-container {
  $self: &;
  display: flex;
  flex-wrap: wrap;

  > .block {
    width: 100%;

    &--full {
      width: 100%;
    }

    &--fill {
      flex-grow: 1;
    }

    &--shrink {
      width: auto;
    }
  }
  
  @each $key, $val in variables.$columns {
    .block-#{$val} {
      width: calc(#{$key} * 100%);

      &.block-container {
        width: calc(#{$key} * 100%);
      }
    }
  }

  @each $breakpoint, $name in config.$breakpoints {
    $mapped__keys : map.keys(config.$breakpoints);
    // get index of the current name passed
    $index : (index($mapped__keys, $breakpoint));

    @each $key, $val in variables.$columns {
      // on the block
      > .#{$breakpoint}-up-#{$val} {
        @if $index > 1 {
          @include mixins.breakpoint(#{$name}, min) {
            width: calc(#{$key} * 100%);
          }
        }
      }

      // on the block-container
      &.#{$breakpoint}-up-#{$val} {
        @if $index == 1 and $val == 1 {
          // do nothing
        } @else {
          > .block {
            @include mixins.breakpoint(#{$name}, min) {
              width: calc(100% / #{$val});
            }
          }

          &.blocks {
            &[class*="p-"],
            &[class*="px"] {
              padding: 0 !important;
            }
          }
        }
      }
    }

    // on the block
    > .#{$breakpoint}-up {
      @if $index > 1 {
        @include mixins.breakpoint(#{$name}, min) {

          &--full {
            width: 100%;
          }

          &--fill {
            flex-grow: 1;
          }

          &--shrink {
            width: auto;
          }
        }
      }
    }
  }

  &[class*="-up-"] {
  
    @each $breakpoint, $name in config.$breakpoints {
    $mapped__keys : map.keys(config.$breakpoints);
    // get index of the current name passed
    $index : (index($mapped__keys, $breakpoint));
  
      > .block {

        &--full {
          width: 100%;
        }

        &--fill {
          flex-grow: 1;
        }

        &--shrink {
          width: auto;
        }

        @include mixins.breakpoint(#{$name}, min) {
  
          &.#{$breakpoint}-up--full {
            width: 100%;
          }
  
          &.#{$breakpoint}-up--fill {
            flex-grow: 1;
          }
  
          &.#{$breakpoint}-up--shrink {
            width: auto;
          }
        }
      }
    }
  }

  // Add padding and or margin by direction to container
  // as well as the blocks within the block-container
  @each $prop, $letter in (margin: m, padding: p) {
    @each $direction, $d in variables.$xy-border {
      @each $unit, $rem in variables.$spacers {
        // top, right, bottom, left
        &.blocks.#{$letter}#{$d}-#{$unit} {
          #{$prop}-#{$direction}: 0 !important;
          > .block {
            #{$prop}-#{$direction}: #{$rem};
          }
        }
      }
    }
  }

  // Add x-y padding and or margin to container
  // as well as the blocks within the block-container
  @each $prop, $letter in (margin: m, padding: p) {
    @each $unit, $rem in variables.$spacers {

      // x-axis
      &.blocks.#{$letter}x-#{$unit} {
        #{$prop}-left: 0 !important;
        #{$prop}-right: 0 !important;
        width: calc(100% + (#{$rem} * 2));
        margin-left: -#{$rem} !important;

        > .blocks {
          &[class*="px"] {
            margin-left: auto;
          }
        }
        > .block {
          #{$prop}-left: $rem;
          #{$prop}-right: $rem;
        }
      }

      // y-axis
      &.blocks.#{$letter}y-#{$unit} {
        #{$prop}-top: 0 !important;
        #{$prop}-bottom: 0 !important;

        > .block {
          #{$prop}-top: $rem;
          #{$prop}-bottom: $rem;
        }
      }
    }
  }

  // Add surrounding padding and or margin to container
  // as well as the blocks within the block-container
  @each $prop, $letter in (margin: m, padding: p) {
    @each $unit, $rem in variables.$spacers {
      // top, right, bottom, left
      &.blocks.#{$letter}-#{$unit} {
        #{$prop}: 0 !important;
        width: calc(100% + (#{$rem} * 2));
        margin-left: -#{$rem} !important;
        > .block {
          #{$prop}: #{$rem};
        }
      }
    }
  }
}


// max-width on a block-container
.max-container {  
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-container);
  width: 100%;
}