// _spacing.scss

@use "sass:math";
@use "sass:string" as str;
@use "../abstracts/config" as VAR;
@use "../abstracts/functions" as FN;
@use "./container-queries" as Q;
@use "./media-queries" as MQ;

@mixin width($value) {
  width: FN.fix-units($value);
}
@mixin height($value) {
  height: FN.fix-units($value);
}
@mixin min-width($value) {
  min-width: FN.fix-units($value);
}
@mixin min-height($value) {
  min-height: FN.fix-units($value);
}
@mixin max-width($value) {
  max-width: FN.fix-units($value);
}
@mixin max-height($value) {
  max-height: FN.fix-units($value);
}
@mixin width-percent($i) {
  width: str.unquote($i + "%");
}
@mixin height-percent($i) {
  height: str.unquote($i + "%");
}
@mixin min-width-percent($i) {
  min-width: str.unquote($i + "%");
}
@mixin min-height-percent($i) {
  min-height: str.unquote($i + "%");
}
@mixin max-width-percent($i) {
  max-width: str.unquote($i + "%");
}
@mixin max-height-percent($i) {
  max-height: str.unquote($i + "%");
}

@mixin w-auto {
  @include width(auto);
}
@mixin w-full {
  @include width(100%);
}
@mixin h-auto {
  @include height(auto);
}
@mixin h-full {
  @include height(100%);
}
@mixin w-max {
  @include width(max-content);
}
@mixin h-max {
  @include height(max-content);
}
@mixin w-min {
  @include width(min-content);
}
@mixin h-min {
  @include height(min-content);
}
@mixin w-fit {
  @include width(fit-content);
}
@mixin h-fit {
  @include height(fit-content);
}
@mixin min-w-full {
  @include min-width(100%);
}
@mixin max-w-full {
  @include max-width(100%);
}
@mixin min-h-full {
  @include min-height(100%);
}
@mixin max-h-full {
  @include max-height(100%);
}

@mixin w-screen {
  width: 100vw;
}
@mixin h-screen {
  height: 100dvh;
}

@if VAR.$generate-utility-classes {
  #{VAR.$parent-selector} .w-screen {
    @include w-screen;
  }

  #{VAR.$parent-selector} .h-screen {
    @include h-screen;
  }

  #{VAR.$parent-selector} .w-auto {
    @include w-auto;
  }

  #{VAR.$parent-selector} .w-full {
    @include w-full;
  }

  #{VAR.$parent-selector} .h-auto {
    @include h-auto;
  }

  #{VAR.$parent-selector} .h-full {
    @include h-full;
  }

  #{VAR.$parent-selector} .w-min {
    @include w-min;
  }

  #{VAR.$parent-selector} .h-min {
    @include h-min;
  }

  #{VAR.$parent-selector} .w-fit {
    @include w-fit;
  }

  #{VAR.$parent-selector} .h-fit {
    @include h-fit;
  }

  #{VAR.$parent-selector} .min-w-full {
    @include min-w-full;
  }

  #{VAR.$parent-selector} .max-w-full {
    @include max-w-full;
  }

  #{VAR.$parent-selector} .min-h-full {
    @include min-h-full;
  }

  #{VAR.$parent-selector} .max-h-full {
    @include max-h-full;
  }

  // Percentage widths
  @each $i in VAR.$percentages {
    #{VAR.$parent-selector} .w-#{$i}p {
      @include width-percent($i);
    }
    #{VAR.$parent-selector} .h-#{$i}p {
      @include height-percent($i);
    }
    #{VAR.$parent-selector} .min-w-#{$i}p {
      @include min-width-percent($i);
    }
    #{VAR.$parent-selector} .min-h-#{$i}p {
      @include min-height-percent($i);
    }
    #{VAR.$parent-selector} .max-w-#{$i}p {
      @include max-width-percent($i);
    }
    #{VAR.$parent-selector} .max-h-#{$i}p {
      @include max-height-percent($i);
    }
  }

  // Generate utilities from spacing map
  @each $key, $value in VAR.$spacings {
    #{VAR.$parent-selector} .w-#{$key},
    #{VAR.$parent-selector} .hover\:w-#{$key}:hover,
    #{VAR.$parent-selector} .group:hover .group-hover\:w-#{$key} {
      @include width($value);
    }
    #{VAR.$parent-selector} .h-#{$key},
    #{VAR.$parent-selector} .hover\:h-#{$key}:hover,
    #{VAR.$parent-selector} .group:hover .group-hover\:h-#{$key} {
      @include height($value);
    }

    #{VAR.$parent-selector} .min-w-#{$key} {
      @include min-width($value);
    }
    #{VAR.$parent-selector} .min-h-#{$key} {
      @include min-height($value);
    }
    #{VAR.$parent-selector} .max-w-#{$key} {
      @include max-width($value);
    }
    #{VAR.$parent-selector} .max-h-#{$key} {
      @include max-height($value);
    }
  }

  // Pixel widths based on spacing scale
  @each $breakpoint, $width in VAR.$breakpoints {
    #{VAR.$parent-selector} .w-#{$breakpoint} {
      @include width($width);
    }
    #{VAR.$parent-selector} .min-w-#{$breakpoint} {
      @include min-width($width);
    }
    #{VAR.$parent-selector} .max-w-#{$breakpoint} {
      @include max-width($width);
    }

    #{VAR.$parent-selector} .w-auto\@#{$breakpoint} {
      @include w-auto;
    }
    #{VAR.$parent-selector} .w-full\@#{$breakpoint} {
      @include w-full;
    }
    #{VAR.$parent-selector} .h-auto\@#{$breakpoint} {
      @include h-auto;
    }
    #{VAR.$parent-selector} .h-full\@#{$breakpoint} {
      @include h-full;
    }
    #{VAR.$parent-selector} .w-min\@#{$breakpoint} {
      @include w-min;
    }
    #{VAR.$parent-selector} .h-min\@#{$breakpoint} {
      @include h-min;
    }
    #{VAR.$parent-selector} .w-fit\@#{$breakpoint} {
      @include w-fit;
    }
    #{VAR.$parent-selector} .h-fit\@#{$breakpoint} {
      @include h-fit;
    }

    @include MQ.media-up($breakpoint) {
      // Generate utilities from spacing map
      @each $i in VAR.$percentages {
        #{VAR.$parent-selector} .w-#{$i}p\@#{$breakpoint},
        #{VAR.$parent-selector} .hover\:w-#{$i}p\@#{$breakpoint}:hover,
        #{VAR.$parent-selector} .group:hover .group-hover\:w-#{$i}p\@#{$breakpoint} {
          @include width-percent($i);
        }
        #{VAR.$parent-selector} .h-#{$i}p\@#{$breakpoint},
        #{VAR.$parent-selector} .hover\:h-#{$i}p\@#{$breakpoint}:hover,
        #{VAR.$parent-selector} .group:hover .group-hover\:h-#{$i}p\@#{$breakpoint} {
          @include height-percent($i);
        }

        #{VAR.$parent-selector} .min-w-#{$i}p\@#{$breakpoint} {
          @include min-width-percent($i);
        }
        #{VAR.$parent-selector} .min-h-#{$i}p\@#{$breakpoint} {
          @include min-height-percent($i);
        }
        #{VAR.$parent-selector} .max-w-#{$i}p\@#{$breakpoint} {
          @include max-width-percent($i);
        }
        #{VAR.$parent-selector} .max-h-#{$i}p\@#{$breakpoint} {
          @include max-height-percent($i);
        }
      }

      @each $key, $value in VAR.$spacings {
        #{VAR.$parent-selector} .w-#{$key}\@#{$breakpoint},
        #{VAR.$parent-selector} .hover\:w-#{$key}\@#{$breakpoint}:hover,
        #{VAR.$parent-selector} .group:hover .group-hover\:w-#{$key}\@#{$breakpoint} {
          @include width($value);
        }
        #{VAR.$parent-selector} .h-#{$key}\@#{$breakpoint},
        #{VAR.$parent-selector} .hover\:h-#{$key}\@#{$breakpoint}:hover,
        #{VAR.$parent-selector} .group:hover .group-hover\:h-#{$key}\@#{$breakpoint} {
          @include height($value);
        }

        #{VAR.$parent-selector} .min-w-#{$key}\@#{$breakpoint} {
          @include min-width($value);
        }
        #{VAR.$parent-selector} .min-h-#{$key}\@#{$breakpoint} {
          @include min-height($value);
        }
        #{VAR.$parent-selector} .max-w-#{$key}\@#{$breakpoint} {
          @include max-width($value);
        }
        #{VAR.$parent-selector} .max-h-#{$key}\@#{$breakpoint} {
          @include max-height($value);
        }
      }
    }
  }
}