@mixin create-columns-for-breakpoint($breakpoint, $prefix) {
  @media (min-width: $breakpoint) {
    @include create-navbar-collapse-for-breakpoint($prefix);
    .hide-#{$prefix} {
      display: none;
    }
    .show-#{$prefix} {
      display: block;
    }
    .container-#{$prefix} {
      max-width: $breakpoint;
    }
    @include create-columns($prefix);
    //create coumns-count 

    @for $i from 1 through $grid-columns {
      .col-c-#{$prefix}-#{$i}{
        column-count: $i;
      }
    }

    @include create-width-fractions-for-breakpoint($prefix, 12);
    @include create-width-fractions-for-breakpoint($prefix, 6);
    @include create-width-fractions-for-breakpoint($prefix, 5);
    @include create-width-fractions-for-breakpoint($prefix, 4);
    @include create-width-fractions-for-breakpoint($prefix, 3);
    @include create-width-fractions-for-breakpoint($prefix, 2);

    //font wieghts
    @each $font-weight-name, $font-weight-value in $font-weights {
      @include font-weight-for-breakpoint(
        $font-weight-value,
        $font-weight-name,
        $prefix
      );
    }

    //flex directions
    @each $direction-name,$direction in $flex-directions {
      .flex-direction-#{$prefix}-#{$direction-name}{
        flex-direction: $direction;
      }
    }
    
    // gap
    @for $i from 0 through $lop-size{
      .gap-#{$prefix}-#{$i}{
        gap: 0.25rem * $i;
      }
      @include create-margin-for-breakpoint($i, $breakpoint, $prefix);
      @include create-padding-size-for-breakpoint($i, $breakpoint, $prefix);
    }


    // collapse sidebars
    .sidebar.sidebar-collapse-#{$prefix} {
      position: sticky;
      transform: none;
      border-right: 0;
      z-index: 0;
      &:not(.expanded) {
        transform: none;
      }
      .expand-btn {
        display: none;
      }
    }
    //display
    @each $display in $displays-value {
      .display-#{$prefix}-#{$display} {
        display: $display;
      }
    }
    @each $position in $positions {
      .#{$position}-#{$prefix} {
        position: $position;
      }
    }
    @each $overflow in $overflow-values {
      .overflow-#{$prefix}-#{$overflow} {
        overflow: $overflow;
      }
      .overflow-x-#{$prefix}-#{$overflow} {
        overflow-x: $overflow;
      }
      .overflow-y-#{$prefix}-#{$overflow} {
        overflow-y: $overflow;
      }
    }
    @each $font-size-name, $font-size in $font-sizes {
      @include create-font-size($font-size, $prefix, -#{$font-size-name});
    }

    @each $font-size-name, $font-size in $text-font-sizes {
      @include create-font-size($font-size, $prefix, -#{$font-size-name});
    }
    @each $font-size-name, $font-size in $heading-font-sizes {
      @include create-font-size($font-size, $prefix, -#{$font-size-name});
    }
  }
}
@each $prefix, $value in $breakpoints {
  @include create-columns-for-breakpoint($value, $prefix);
}