_sizing.scss

// Utilities for sizing
@import "../modules/sizing";
@import "../modules/extenders";

$vertical-sizing-utilities: 1 2 3 4 5 6 7 8 9 10 12 14 16 18 20 24 28 32 36 40 48 56 64 !default;
@each $multiple in $vertical-sizing-utilities {
  .h-#{$multiple} {
    @include length-relative(height, $multiple, $extend-height-multiple: true);
  }

  .h-max-#{$multiple} {
    @include length-relative('max-height', $multiple);
  }
}

$horizontal-sizing-utilities: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 16 18 20 24 28 32 36 40 48 56 64 !default;
@each $multiple in $horizontal-sizing-utilities {
  .w-#{$multiple} {
    @include length-relative(width, $multiple);
  }

  .w-max-#{$multiple} {
    @include length-relative('max-width', $multiple);
  }
}

$fraction-sizing-utilities: (
  '1\\/2': 1/2,
  '1\\/3': 1/3,
  '1\\/4': 1/4,
  '1\\/6': 1/6,
  '1\\/8': 1/8,
  '2\\/3': 2/3,
  '3\\/4': 3/4,
  '5\\/6': 5/6,
  '7\\/8': 7/8,
  '5\\/4': 5/4,
  '4\\/3': 4/3,
  '3\\/2': 3/2,
  '5\\/2': 5/2,
) !default;
@each $suffix, $factor in $fraction-sizing-utilities {
  .w-#{$suffix} {
    @include length-relative(width, $factor);
  }
}

.h-px {
  //TODO: the .h-px utility should probably set height directly, not extend placeholder.
  @extend %h-px;
}

.h-full {
  height: 100%;
}

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

.w-readable {
  @include width-readable();
}

.w-full {
  width: 100%;
}

.w-max-full {
  max-width: 100%
}

.w-max-five-sixths {
  max-width: 83.33333%;
}

.w-max-four-fifths {
  max-width: 80%;
}

.w-max-three-quarters {
  max-width: 75%;
}

.w-max-two-thirds {
  max-width: 66.66666%;
}

.w-max-three-fifths {
  max-width: 60%;
}

.w-max-half {
  max-width: 50%;
}

.w-max-two-fifths {
  max-width: 40%;
}

.w-max-third {
  max-width: 33.33333%;
}

.w-max-quarter {
  max-width: 25%;
}

.w-max-fifth {
  max-width: 20%;
}

.w-max-sixth {
  max-width: 16.66666%;
}

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

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

@include extend-for-children(w-readable);
@include extend-for-paragraphs(w-readable);