@use '../abstracts/variables' as v;
@use '../abstracts/mixins' as m;

@layer utilities.size {
  // Height
  .h-auto {
    height: auto;
  }

  .min-h-auto {
    min-height: auto;
  }

  .h-fit {
    height: fit-content;
  }

  .h-fixed {
    height: var(--fixed-size, fit-content);
  }

  .h-50 {
    height: 50%;
  }

  .h-75 {
    height: 75%;
  }

  .h-100 {
    height: 100%;
  }

  .vh-50 {
    height: 50vh;
  }

  .vh-75 {
    height: 75vh;
  }

  .vh-100 {
    height: 100vh;
  }

  .dvh-100 {
    height: 100vh;
    @supports (height: 100dvh) {
      height: 100dvh;
    }
  }

  .min-vh-100 {
    min-height: 100vh;
  }

  .max-vh-100 {
    max-height: 100vh;
  }

  // Width
  .w-auto {
    width: auto;
  }

  .min-w-auto {
    min-width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-fixed {
    width: var(--fixed-size, fit-content);
  }

  .w-50 {
    width: 50%;
  }

  .w-75 {
    width: 75%;
  }

  .w-100 {
    width: 100%;
  }

  .vw-50 {
    width: 50vw;
  }

  .vw-75 {
    width: 75vw;
  }

  .vw-100 {
    width: 100vw;
  }

  .dvw-100 {
    width: 100vw;
    @supports (width: 100dvw) {
      width: 100dvw;
    }
  }

  .min-vw-100 {
    min-width: 100vw;
  }

  .max-vw-100 {
    max-width: 100vw;
  }

  $percent-sizes: (
    50: 50%,
    75: 75%,
    100: 100%
  );

  // Generate size utilities for each breakpoint
  @each $breakpoint in v.$media-breakpoints {
    @each $pct, $val in $percent-sizes {
      @include m.media-breakpoint-up($breakpoint) {
        .h-#{$breakpoint}-#{$pct} { height: $val; }
        .w-#{$breakpoint}-#{$pct} { width: $val; }
      }
    }
  }
}