@import "variables";
@import "mixins";

$grid-gap-half: $grid-gap * 0.5;
$grid-container-width: 1366px !default; // depricated

:root {
  --container-width: 100%;
  --fluid-container-width: 1550px;

  @include bp("sm-up") {
    --container-width: #{$container-sm};
  }

  @include bp("md-up") {
    --container-width: #{$container-md};
  }

  @include bp("lg-up") {
    --container-width: #{$container-lg};
  }

  @include bp("xl-up") {
    --container-width: #{$container-xl};
  }

  @include bp("xxl-up") {
    --container-width: #{$container-xxl};
  }
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 ($grid-gap-half);

  @if ($theme-version > 2) {
    max-width: var(--container-width);
  } @else {
    // depricated non responsive container
    max-width: #{$grid-container-width * $zoom_factor};
  }

  @if ($theme-version > 2) {
    --fluid-margin: calc((var(--container-width) - min(var(--fluid-container-width), 100vw)) / 2);
    --fluid-width: calc(100% - var(--fluid-margin));

    --fluid-margin-full: calc((var(--container-width) - 100vw) / 2);
    --fluid-width-full: calc(100% - var(--fluid-margin-full));

    @include bp("lg-up") {
      .fluid-left {
        margin-left: var(--fluid-margin);
        width: var(--fluid-width);
        max-width: var(--fluid-width);
      }

      .fluid-right {
        margin-right: var(--fluid-margin);
        width: var(--fluid-width);
        max-width: var(--fluid-width);
      }

      .fluid-left-full {
        margin-left: var(--fluid-margin-full);
        width: var(--fluid-width-full);
        max-width: var(--fluid-width-full);
      }

      .fluid-right-full {
        margin-right: var(--fluid-margin-full);
        width: var(--fluid-width-full);
        max-width: var(--fluid-width-full);
      }
    }
  } @else {
    // depricated
    $grid-container-fluid-width: 1920px !default;

    $container-width: #{$grid-container-width * $zoom_factor};
    $fluid-container-width: #{$grid-container-fluid-width * $zoom_factor};
    --fluid-margin: calc((#{$container-width} - min(#{$fluid-container-width}, 100vw)) / 2);
    --fluid-width: calc(100% - var(--fluid-margin));

    .fluid-left {
      @media screen and (min-width: (#{$grid-container-width * $zoom_factor})) {
        margin-left: var(--fluid-margin);
        width: var(--fluid-width);
        max-width: var(--fluid-width);
      }
    }

    .fluid-right {
      @media screen and (min-width: (#{$grid-container-width * $zoom_factor})) {
        margin-right: var(--fluid-margin);
        width: var(--fluid-width);
        max-width: var(--fluid-width);
      }
    }

    &.lg {
      max-width: #{2460px * $zoom_factor};
    }
    &.sm {
      max-width: #{900px * $zoom_factor};
    }
  }
}

.row {
  display: flex;
  margin: 0 (-$grid-gap-half);
  flex-wrap: wrap;
}

[class*="col-"],
.col {
  flex: 0 0 auto;
  padding-left: $grid-gap-half;
  padding-right: $grid-gap-half;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

@include grid-default();
@include css-grid-default();

@include bp("xxl") {
  @include grid("xxl");
  @include display("xxl");
  @include css-grid("xxl");
}

@include bp("xl") {
  @include grid("xl");
  @include display("xl");
  @include css-grid("xl");
}

@include bp("lg") {
  @include grid("lg");
  @include display("lg");
  @include css-grid("lg");
}

@include bp("md") {
  @include grid("md");
  @include display("md");
  @include css-grid("md");
}

@include bp("sm") {
  @include grid("sm");
  @include display("sm");
  @include css-grid("sm");
}
