/////////////////////////////////
// CORE / MIXINS / HEIGHT & WIDTH
/////////////////////////////////


// Height
@mixin h-auto($imp:null) { height: auto $imp; }
@mixin h-0($imp:null) { height: 0 $imp; }
@mixin h-1($imp:null) { height: $length-em-1 $imp; }
@mixin h-2($imp:null) { height: $length-em-2 $imp; }
@mixin h-3($imp:null) { height: $length-em-3 $imp; }
@mixin h-4($imp:null) { height: $length-em-4 $imp; }
@mixin h-5($imp:null) { height: $length-em-5 $imp; }
@mixin h-6($imp:null) { height: $length-em-6 $imp; }
@mixin h-7($imp:null) { height: $length-em-7 $imp; }
@mixin h-8($imp:null) { height: $length-em-8 $imp; }
@mixin h-9($imp:null) { height: $length-em-9 $imp; }
@mixin h-10($imp:null) { height: $length-em-10 $imp; }
@mixin h-11($imp:null) { height: $length-em-11 $imp; }
@mixin h-12($imp:null) { height: $length-em-12 $imp; }
@mixin h-25pc($imp:null) { height: 25% $imp; }
@mixin h-50pc($imp:null) { height: 50% $imp; }
@mixin h-75pc($imp:null) { height: 75% $imp; }
@mixin h-100pc($imp:null) { height: 100% $imp; }
@mixin h-100vh($imp:null) { height: 100vh $imp; }
@mixin h-fit-content($imp:null) { height: fit-content $imp; }
@mixin h-max-content($imp:null) { height: max-content $imp; }
@mixin h-min-content($imp:null) { height: min-content $imp; }


// Minimum height
@mixin h-min-0($imp:null) { min-height: 0 $imp; }
@mixin h-min-100vh($imp:null) { min-height: 100vh $imp; }


// Maximum height
@mixin h-max-0($imp:null) { max-height: 0 $imp; }
@mixin h-max-100pc($imp:null) { max-height: 100% $imp; }
@mixin h-max-100vh($imp:null) { max-height: 100vh $imp; }
@mixin h-max-inf($imp:null) { max-height: 999vh $imp; }


// Width
@mixin w-auto($imp:null) { width: auto $imp; }
@mixin w-0($imp:null) { width: 0 $imp; }
@mixin w-1($imp:null) { width: $length-em-1 $imp; }
@mixin w-2($imp:null) { width: $length-em-2 $imp; }
@mixin w-3($imp:null) { width: $length-em-3 $imp; }
@mixin w-4($imp:null) { width: $length-em-4 $imp; }
@mixin w-5($imp:null) { width: $length-em-5 $imp; }
@mixin w-6($imp:null) { width: $length-em-6 $imp; }
@mixin w-7($imp:null) { width: $length-em-7 $imp; }
@mixin w-8($imp:null) { width: $length-em-8 $imp; }
@mixin w-9($imp:null) { width: $length-em-9 $imp; }
@mixin w-10($imp:null) { width: $length-em-10 $imp; }
@mixin w-11($imp:null) { width: $length-em-11 $imp; }
@mixin w-12($imp:null) { width: $length-em-12 $imp; }
@mixin w-25pc($imp:null) { width: 25% $imp; }
@mixin w-50pc($imp:null) { width: 50% $imp; }
@mixin w-75pc($imp:null) { width: 75% $imp; }
@mixin w-100pc($imp:null) { width: 100% $imp; }
@mixin w-100vw($imp:null) { width: 100vw $imp; }
@mixin w-fit-content($imp:null) { width: fit-content $imp; }
@mixin w-max-content($imp:null) { width: max-content $imp; }
@mixin w-min-content($imp:null) { width: min-content $imp; }


// Minimum width
@mixin w-min-0($imp:null) { min-width: 0 $imp; }


// Maximum width
@mixin w-max-3xs($imp:null) { max-width: #{ms(16)}rem $imp; } // [1]
@mixin w-max-2xs($imp:null) { max-width: #{ms(18)}rem $imp; } // [1]
@mixin w-max-xs($imp:null) { max-width: #{ms(20)}rem $imp; }  // [1]
@mixin w-max-sm($imp:null) { max-width: #{ms(22)}rem $imp; }  // [1]
@mixin w-max-md($imp:null) { max-width: #{ms(24)}rem $imp; }  // [1]
@mixin w-max-lg($imp:null) { max-width: #{ms(26)}rem $imp; }  // [1]
@mixin w-max-xl($imp:null) { max-width: #{ms(28)}rem $imp; }  // [1]
@mixin w-max-2xl($imp:null) { max-width: #{ms(30)}rem $imp; } // [1]
@mixin w-max-3xl($imp:null) { max-width: #{ms(32)}rem $imp; } // [1]
@mixin w-max-4xl($imp:null) { max-width: #{ms(34)}rem $imp; } // [1]
@mixin w-max-100pc($imp:null) { max-width: 100% $imp; }
@mixin w-max-100vw($imp:null) { max-width: 100vw $imp; }
// [1] http://webtypography.net/2.1.2