@use "system/breakpoints";
@use "system/grid";

.ods-grid {
  display: grid;
  grid-template-columns: repeat(#{grid.$columns}, 1fr);

  &--inline {
    display: inline-grid;
  }

  &--center {
    margin-left: auto;
    margin-right: auto;
    max-width: grid.$max-grid-size-for-centered-content;
  }

  &--gap {
    gap: grid.$gap-size-hard;

    @include breakpoints.medium {
      gap: grid.$gap-size-hard-large;
    }

    &-breakpoint-medium {
      @include breakpoints.medium {
        gap: grid.$gap-size-hard-large;
      }
    }

    &-breakpoint-large {
      @include breakpoints.large {
        gap: grid.$gap-size-hard-large;
      }
    }
  }

  &--dense {
    grid-auto-flow: dense;
  }

  &--gap-column {
    column-gap: grid.$gap-size-hard;

    @include breakpoints.medium {
      column-gap: grid.$gap-size-hard-large;
    }

    &-breakpoint-medium {
      @include breakpoints.medium {
        column-gap: grid.$gap-size-hard-large;
      }
    }

    &-breakpoint-large {
      @include breakpoints.large {
        column-gap: grid.$gap-size-hard-large;
      }
    }
  }

  &--gap-row {
    row-gap: grid.$gap-size-hard;

    @include breakpoints.medium {
      row-gap: grid.$gap-size-hard-large;
    }

    &-breakpoint-medium {
      @include breakpoints.medium {
        row-gap: grid.$gap-size-hard-large;
      }
    }

    &-breakpoint-large {
      @include breakpoints.large {
        row-gap: grid.$gap-size-hard-large;
      }
    }

    &-large {
      row-gap: grid.$gap-size-soft;

      @include breakpoints.medium {
        row-gap: grid.$gap-size-soft-large;
      }

      &-breakpoint-medium {
        @include breakpoints.medium {
          row-gap: grid.$gap-size-soft-large;
        }
      }

      &-breakpoint-large {
        @include breakpoints.large {
          row-gap: grid.$gap-size-soft-large;
        }
      }
    }
  }

  &--gutter {
    margin-left: grid.$gutter-size;
    margin-right: grid.$gutter-size;

    @include breakpoints.medium {
      margin-left: grid.$gutter-size-large;
      margin-right: grid.$gutter-size-large;
    }

    &-breakpoint-medium {
      @include breakpoints.medium {
        margin-left: grid.$gutter-size-large;
        margin-right: grid.$gutter-size-large;
      }
    }

    &-breakpoint-large {
      @include breakpoints.large {
        margin-left: grid.$gutter-size-large;
        margin-right: grid.$gutter-size-large;
      }
    }
  }

  @for $i from 1 through grid.$columns {
    &__column--#{$i} {
      grid-column: span #{$i} / span #{$i};
      width: 100%;
    }
  }

  @for $i from 1 through grid.$columns + 1 {
    &__column--start-#{$i} {
      grid-column-start: #{$i};
    }

    &__column--end-#{$i} {
      grid-column-end: #{$i};
    }
  }

  @include breakpoints.medium {
    @for $i from 1 through grid.$columns {
      &__column--#{$i}-breakpoint-medium {
        grid-column: span #{$i};
        width: 100%;
      }
    }

    @for $i from 1 through grid.$columns + 1 {
      &__column--start-#{$i}-breakpoint-medium {
        grid-column-start: #{$i};
      }

      &__column--end-#{$i}-breakpoint-medium {
        grid-column-end: #{$i};
      }
    }
  }

  @include breakpoints.large {
    @for $i from 1 through grid.$columns {
      &__column--#{$i}-breakpoint-large {
        grid-column: span #{$i};
        width: 100%;
      }
    }

    @for $i from 1 through grid.$columns + 1 {
      &__column--start-#{$i}-breakpoint-large {
        grid-column-start: #{$i};
      }

      &__column--end-#{$i}-breakpoint-large {
        grid-column-end: #{$i};
      }
    }
  }
}