@use "sass:map";
@use "sass:math";

$rt-grid-breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$rt-container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

$rt-grid-gutters: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  3: 1rem,
  4: 1.5rem,
  5: 3rem
);

@function rt-grid-width($size, $columns: 12) {
  @return math.percentage(math.div($size, $columns));
}

@function rt-row-cols-width($count) {
  @return math.percentage(math.div(1, $count));
}

@mixin rt-media-up($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

.rt-container,
.rt-container-fluid,
[class*="rt-container-"] {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--rt-container-padding-x);
  padding-left: var(--rt-container-padding-x);
}

.rt-container-fluid {
  max-width: none;
}

@each $name, $width in $rt-container-max-widths {
  @include rt-media-up(map.get($rt-grid-breakpoints, $name)) {
    .rt-container,
    .rt-container-#{$name} {
      max-width: $width;
    }
  }
}

.rt-row {
  --rt-grid-gutter-x: 1.5rem;
  --rt-grid-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--rt-grid-gutter-y) * -1);
  margin-right: calc(var(--rt-grid-gutter-x) * -0.5);
  margin-left: calc(var(--rt-grid-gutter-x) * -0.5);
}

.rt-row > * {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  padding-right: calc(var(--rt-grid-gutter-x) * 0.5);
  padding-left: calc(var(--rt-grid-gutter-x) * 0.5);
  margin-top: var(--rt-grid-gutter-y);
  min-width: 0;
}

.rt-col {
  flex: 1 0 0%;
  width: 0;
}

.rt-col-auto {
  flex: 0 0 auto;
  width: auto;
}

@for $i from 1 through 12 {
  .rt-col-#{$i} {
    flex: 0 0 auto;
    width: rt-grid-width($i);
  }

  .rt-offset-#{$i} {
    margin-left: rt-grid-width($i);
  }
}

@for $i from 1 through 6 {
  .rt-row-cols-#{$i} > * {
    flex: 0 0 auto;
    width: rt-row-cols-width($i);
  }
}

.rt-row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

@each $name, $width in $rt-grid-breakpoints {
  @include rt-media-up($width) {
    .rt-col-#{$name} {
      flex: 1 0 0%;
      width: 0;
    }

    .rt-col-#{$name}-auto {
      flex: 0 0 auto;
      width: auto;
    }

    @for $i from 1 through 12 {
      .rt-col-#{$name}-#{$i} {
        flex: 0 0 auto;
        width: rt-grid-width($i);
      }

      .rt-offset-#{$name}-#{$i} {
        margin-left: rt-grid-width($i);
      }
    }

    @for $i from 1 through 6 {
      .rt-row-cols-#{$name}-#{$i} > * {
        flex: 0 0 auto;
        width: rt-row-cols-width($i);
      }
    }

    .rt-row-cols-#{$name}-auto > * {
      flex: 0 0 auto;
      width: auto;
    }
  }
}

@each $name, $value in $rt-grid-gutters {
  .rt-g-#{$name} {
    --rt-grid-gutter-x: #{$value};
    --rt-grid-gutter-y: #{$value};
  }

  .rt-gx-#{$name} {
    --rt-grid-gutter-x: #{$value};
  }

  .rt-gy-#{$name} {
    --rt-grid-gutter-y: #{$value};
  }
}

@each $bp, $width in $rt-grid-breakpoints {
  @include rt-media-up($width) {
    @each $name, $value in $rt-grid-gutters {
      .rt-g-#{$bp}-#{$name} {
        --rt-grid-gutter-x: #{$value};
        --rt-grid-gutter-y: #{$value};
      }

      .rt-gx-#{$bp}-#{$name} {
        --rt-grid-gutter-x: #{$value};
      }

      .rt-gy-#{$bp}-#{$name} {
        --rt-grid-gutter-y: #{$value};
      }
    }
  }
}