// Estilo básico das colunas
.col,
[class*="col-"] {
  max-width: 100%;
  padding-left: calc(var(--grid-gutter) / 2);
  padding-right: calc(var(--grid-gutter) / 2);
  width: 100%;
}

// Coluna com tamanho proporcional
.col {
  flex: 1 0 0%;
  min-width: calc(1 / 12 * 100%);
}

// Coluna com tamanho automático
.col-auto {
  flex: 0 0 auto;
  width: auto;
}

// Colunas com tamanhos predefinidos
@for $i from 1 through 12 {
  .col-#{$i} {
    flex-basis: calc($i / 12 * 100%);
    max-width: calc($i / 12 * 100%);
  }
}

// Estilos das linhas
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--grid-gutter) * -0.5);
  margin-right: calc(var(--grid-gutter) * -0.5);

  // Modifica gutter de acordo com as densidades
  @each $density in "low", "high" {
    &.density-#{$density} {
      --grid-gutter: var(--grid-mobile-gutter-density-#{$density});
    }
  }
}

// Quando não especificar o breakpoint, o container é sempre centralizado
.container {
  max-width: var(--grid-breakpoint);
}

// Estilos dos containers
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
  width: 100%;

  // Modifica margem de acordo com as densidades
  @each $density in "low", "high" {
    &.density-#{$density} {
      --grid-margin: var(--grid-mobile-margin-density-#{$density});
    }
  }

  // Remove as margens adicionais para container dentro de container
  & & {
    padding-left: 0;
    padding-right: 0;
  }
}

// Itera sobre os breakpoints
@each $breakpoint in "sm", "md", "lg", "xl" {
  @include media-breakpoint-up($breakpoint) {
    // Atualiza variáveis de Grid de acordo com o breakpoint
    body {
      --grid-breakpoint: var(--grid-#{$breakpoint}-breakpoint);
      --grid-margin: var(--grid-#{$breakpoint}-margin-default);
      --grid-gutter: var(--grid-#{$breakpoint}-gutter-default);
    }

    // Coluna com tamanho proporcional
    .col-#{$breakpoint} {
      flex: 1 0 0%;
      min-width: calc(1 / 12 * 100%);
    }

    // Coluna com tamanho automático
    .col-#{$breakpoint}-auto {
      flex: 0 0 auto;
      width: auto;
    }

    // Colunas com tamanhos predefinidos
    @for $i from 1 through 12 {
      .col-#{$breakpoint}-#{$i} {
        flex-basis: calc($i / 12 * 100%);
        max-width: calc($i / 12 * 100%);
      }
    }

    .row {
      // Atualiza as densidades
      @each $density in "low", "high" {
        &.density-#{$density} {
          --grid-gutter: var(--grid-#{$breakpoint}-gutter-density-#{$density});
        }
      }
    }

    // Centraliza o container ao chegar no breakpoint informado
    .container-#{$breakpoint} {
      max-width: var(--grid-breakpoint);
    }

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-fluid {
      // Atualiza as densidades
      @each $density in "low", "high" {
        &.density-#{$density} {
          --grid-margin: var(--grid-#{$breakpoint}-margin-density-#{$density});
        }
      }
    }
  }
}