@use "sass:math";

@use "media-queries";
@use "variables";

/* =Grid
-----------------------------------------------------------------------------*/
.units-container {
  margin: auto;
  max-width: variables.$grid-width * 1px;
  overflow-x: clip;
  padding: variables.$padding;
  position: relative;
  width: 100%;

  &.fill-width {
    max-width: 100%;
  }
}

.units-row {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  gap: var(--units-gap, #{variables.$grid-gutter-width * 2});
  margin: 0 0 variables.$base-line;

  &.reverse-direction,
  &.right-to-left {
    flex-direction: row-reverse;
  }

  &.joined,
  &.split {
    --units-gap: 0px;
    gap: 0;
  }

  &.centered-content {
    justify-content: center;
    text-align: center;
  }

  &.stacked {
    margin-bottom: 0;
  }

  &.equal-height {
    [class*='unit-'] {
      display: flex;

      > * {
        width: 100%;
      }
    }
  }

  &.unit-role-right {
    float: right;
    margin-left: math.div(variables.$grid-gutter-width, (variables.$grid-width * 0.01)) * .01;
  }

  &.unit-role-left {
    margin-left: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

[class*='unit-'] {
  box-sizing: border-box;

  &.fill-height {
    display: flex;
  }
}

// Base units
.unit-auto {
  flex-basis: 0;
  flex-grow: 1;
}

@each $name, $value in variables.$unit-scale {
  .unit-#{$name} {
    @if $name == 100 {
      flex-basis: 100%;
    } @else {
      flex-basis: calc(#{$value} - var(--units-gap, #{variables.$grid-gutter-width * 2}) * #{1 - math.div($name, 100)});
    }
  }
}

// Forever units
.forever-unit-auto {
  flex-basis: 0;
  flex-grow: 1;
}

@each $name, $value in variables.$unit-scale {
  .forever-unit-#{$name} {
    @if $name == 100 {
      flex-basis: 100%;
    } @else {
      flex-basis: calc(#{$value} - var(--units-gap, #{variables.$grid-gutter-width * 2}) * #{1 - math.div($name, 100)});
    }
  }
}

// Large screen (min-width)
@media (min-width: media-queries.$breakpoint-large-screen) {
  @each $name, $value in variables.$width-scale {
    @if $name != 100 {
      .large-screen-unit-#{$name} {
        flex-basis: calc(#{$value} - var(--units-gap, #{variables.$grid-gutter-width * 2}) * #{1 - math.div($name, 100)});
      }
    }
  }
}

// X-large screen (min-width)
@media (min-width: media-queries.$breakpoint-x-large-screen) {
  @each $name, $value in variables.$width-scale {
    @if $name != 100 {
      .x-large-screen-unit-#{$name} {
        flex-basis: calc(#{$value} - var(--units-gap, #{variables.$grid-gutter-width * 2}) * #{1 - math.div($name, 100)});
      }
    }
  }
}

// Small desktop (max-width)
@media (max-width: media-queries.$breakpoint-small-desktop) {
  @each $name, $value in variables.$width-scale {
    @if $name == 100 {
      .small-desktop-unit-#{$name} {
        flex-basis: 100%;
      }
    } @else {
      .small-desktop-unit-#{$name} {
        flex-basis: calc(#{$value} - var(--units-gap, #{variables.$grid-gutter-width * 2}) * #{1 - math.div($name, 100)});
      }
    }
  }
}

// Tablet (max-width) — reset base units to 100% first
@media (max-width: media-queries.$breakpoint-tablet) {
  .unit-auto,
  .unit-100,
  .unit-90,
  .unit-80,
  .unit-75,
  .unit-70,
  .unit-66,
  .unit-65,
  .unit-60,
  .unit-50,
  .unit-40,
  .unit-35,
  .unit-33,
  .unit-30,
  .unit-25,
  .unit-20,
  .unit-10 {
    flex-basis: 100%;
  }

  @each $name, $value in variables.$width-scale {
    @if $name == 100 {
      .tablet-unit-#{$name} {
        flex-basis: 100%;
      }
    } @else {
      .tablet-unit-#{$name} {
        flex-basis: calc(#{$value} - var(--units-gap, #{variables.$grid-gutter-width * 2}) * #{1 - math.div($name, 100)});
      }
    }
  }
}

// Large phone (max-width)
@media (max-width: media-queries.$breakpoint-large-phone) {
  @each $name, $value in variables.$width-scale {
    @if $name == 100 {
      .large-phone-unit-#{$name} {
        flex-basis: 100%;
      }
    } @else {
      .large-phone-unit-#{$name} {
        flex-basis: calc(#{$value} - var(--units-gap, #{variables.$grid-gutter-width * 2}) * #{1 - math.div($name, 100)});
      }
    }
  }
}

// Phone (max-width)
@media (max-width: media-queries.$breakpoint-phone) {
  @each $name, $value in variables.$width-scale {
    @if $name == 100 {
      .phone-unit-#{$name} {
        flex-basis: 100%;
      }
    } @else {
      .phone-unit-#{$name} {
        flex-basis: calc(#{$value} - var(--units-gap, #{variables.$grid-gutter-width * 2}) * #{1 - math.div($name, 100)});
      }
    }
  }
}

// Push units
$push-scale: (
  90: 90%, 80: 80%, 75: 75%, 70: 70%,
  66: 66.6%, 65: 65%, 60: 60%, 50: 50%, 40: 40%,
  35: 35%, 33: 33.3%, 30: 30%, 25: 25%, 20: 20%, 10: 10%
);

@each $name, $value in $push-scale {
  .unit-push-#{$name} { margin-left: $value; }
}

.centered,
.unit-centered {
  float: none !important;
  margin: 0 auto variables.$base-line;
}