Sizes

//  ------------------------------------------------------------
//  Sizes
//  ------------------------------------------------------------
$size-auto:           auto;
$size-fit-content:    fit-content;
$size-min-content:    min-content;
$size-max-content:    max-content;
$size-100pc:          100%;
$inline-100vw:        100vw;
$inline-100dvw:       100dvw;
$inline-calc-vw:      calc(100vw - var(--vw)) !default;
$inline-calc-dvw:     calc(100dvw - var(--dvw)) !default;
$inline-size:         var(--width) !default;
$inline-size-min:     var(--min-width) !default;
$inline-size-max:     var(--max-width) !default;
$block-100vh:         100vh;
$block-100dvh:        100dvh;
$block-calc-vh:       calc(100vh - var(--vh)) !default;
$block-calc-dvh:      calc(100dvh - var(--dvh)) !default;
$block-size:          var(--height) !default;
$block-size-min:      var(--min-height) !default;
$block-size-max:      var(--max-height) !default;

$inline-sizes: (
  "w-auto": $size-auto,
  "w-fit-content": $size-fit-content,
  "w-min-content": $size-min-content,
  "w-max-content": $size-max-content,
  "w-100": $size-100pc,
  "w-100vw": $inline-100vw,
  "w-100dvw": $inline-100dvw,
  "w-vw-calc": $inline-calc-vw,
  "w-dvw-calc": $inline-calc-dvw,
) !default;

$inline-variable-sizes: (
  "min": $inline-size-min,
  "max": $inline-size-max,
) !default;

$block-sizes: (
  "h-auto": $size-auto,
  "h-fit-content": $size-fit-content,
  "h-min-content": $size-min-content,
  "h-max-content": $size-max-content,
  "h-100": $size-100pc,
  "h-100vh": $block-100vh,
  "h-100dvh": $block-100dvh,
  "h-vh-calc": $block-calc-vh,
  "h-dvh-calc": $block-calc-dvh,
) !default;

$block-variable-sizes: (
  "min": $block-size-min,
  "max": $block-size-max,
) !default;

@mixin inline-size-css {   
  @each $name, $value in $inline-sizes {
    .#{$name} {
      inline-size: #{$value};
    }
  }

  @each $name, $value in $inline-sizes {
    .#{$name}-min {
      min-inline-size: #{$value};
    }
  }

  @each $name, $value in $inline-sizes {
    .#{$name}-max {
      max-inline-size: #{$value};
    }
  }

  .width {
    inline-size: $inline-size;
  }

  @each $name, $value in $inline-variable-sizes {
    .#{$name}-width {
      #{$name}-inline-size: #{$value};
    }
  }
}

@mixin block-size-css {  
  @each $name, $value in $block-sizes {
    .#{$name} {
      block-size: #{$value};
    }
  }

  @each $name, $value in $block-sizes {
    .#{$name}-min {
      min-block-size: #{$value};
    }
  }

  @each $name, $value in $block-sizes {
    .#{$name}-max {
      max-block-size: #{$value};
    }
  }

  .height {
    block-size: $block-size;
  }

  @each $name, $value in $block-variable-sizes {
    .#{$name}-height {
      #{$name}-block-size: #{$value};
    }
  }
}

// XXL
@mixin inline-size-xxl-css {  
  @each $name, $value in $inline-sizes {
    .#{$name}-xxl {
      inline-size: #{$value};
    }
  }

  @each $name, $value in $inline-sizes {
    .#{$name}-min-xxl {
      min-inline-size: #{$value};
    }
  }

  @each $name, $value in $inline-sizes {
    .#{$name}-max-xxl {
      max-inline-size: #{$value};
    }
  }

  .width-xxl {
    inline-size: $inline-size;
  }

  @each $name, $value in $inline-variable-sizes {
    .#{$name}-width-xxl {
      #{$name}-inline-size: #{$value};
    }
  }
}

@mixin block-size-xxl-css {
  @each $name, $value in $block-sizes {
    .#{$name}-xxl {
      block-size: #{$value};
    }
  }

  @each $name, $value in $block-sizes {
    .#{$name}-min-xxl {
      min-block-size: #{$value};
    }
  }

  @each $name, $value in $block-sizes {
    .#{$name}-max-xxl {
      max-block-size: #{$value};
    }
  }

  .height-xxl {
    block-size: $block-size;
  }

  @each $name, $value in $block-variable-sizes {
    .#{$name}-height-xxl {
      #{$name}-block-size: #{$value};
    }
  }
}

// XL
@mixin inline-size-xl-css {  
  @each $name, $value in $inline-sizes {
    .#{$name}-xl {
      inline-size: #{$value};
    }
  }

  @each $name, $value in $inline-sizes {
    .#{$name}-min-xl {
      min-inline-size: #{$value};
    }
  }

  @each $name, $value in $inline-sizes {
    .#{$name}-max-xl {
      max-inline-size: #{$value};
    }
  }

  .width-xl {
    inline-size: $inline-size;
  }

  @each $name, $value in $inline-variable-sizes {
    .#{$name}-width-xl {
      #{$name}-inline-size: #{$value};
    }
  }
}

@mixin block-size-xl-css {
  @each $name, $value in $block-sizes {
    .#{$name}-xl {
      block-size: #{$value};
    }
  }

  @each $name, $value in $block-sizes {
    .#{$name}-min-xl {
      min-block-size: #{$value};
    }
  }

  @each $name, $value in $block-sizes {
    .#{$name}-max-xl {
      max-block-size: #{$value};
    }
  }

  .height-xl {
    block-size: $block-size;
  }

  @each $name, $value in $block-variable-sizes {
    .#{$name}-height-xl {
      #{$name}-block-size: #{$value};
    }
  }
}

// LG
@mixin inline-size-lg-css {
  @each $name, $value in $inline-sizes {
    .#{$name}-lg {
      inline-size: #{$value};
    }
  }

  @each $name, $value in $inline-sizes {
    .#{$name}-min-lg {
      min-inline-size: #{$value};
    }
  }

  @each $name, $value in $inline-sizes {
    .#{$name}-max-lg {
      max-inline-size: #{$value};
    }
  }

  .width-lg {
    inline-size: $inline-size;
  }

  @each $name, $value in $inline-variable-sizes {
    .#{$name}-width-lg {
      #{$name}-inline-size: #{$value};
    }
  }
}

@mixin block-size-lg-css {
  @each $name, $value in $block-sizes {
    .#{$name}-lg {
      block-size: #{$value};
    }
  }

  @each $name, $value in $block-sizes {
    .#{$name}-min-lg {
      min-block-size: #{$value};
    }
  }

  @each $name, $value in $block-sizes {
    .#{$name}-max-lg {
      max-block-size: #{$value};
    }
  }

  .height-lg {
    block-size: $block-size;
  }

  @each $name, $value in $block-variable-sizes {
    .#{$name}-height-lg {
      #{$name}-block-size: #{$value};
    }
  }
}

// MD
@mixin inline-size-md-css {
  @each $name, $value in $inline-sizes {
    .#{$name}-md {
      inline-size: #{$value};
    }
  }

  @each $name, $value in $inline-sizes {
    .#{$name}-min-md {
      min-inline-size: #{$value};
    }
  }

  @each $name, $value in $inline-sizes {
    .#{$name}-max-md {
      max-inline-size: #{$value};
    }
  }

  .width-md {
    inline-size: $inline-size;
  }

  @each $name, $value in $inline-variable-sizes {
    .#{$name}-width-md {
      #{$name}-inline-size: #{$value};
    }
  }
}

@mixin block-size-md-css {
  @each $name, $value in $block-sizes {
    .#{$name}-md {
      block-size: #{$value};
    }
  }

  @each $name, $value in $block-sizes {
    .#{$name}-min-md {
      min-block-size: #{$value};
    }
  }

  @each $name, $value in $block-sizes {
    .#{$name}-max-md {
      max-block-size: #{$value};
    }
  }

  .height-md {
    block-size: $block-size;
  }

  @each $name, $value in $block-variable-sizes {
    .#{$name}-height-md {
      #{$name}-block-size: #{$value};
    }
  }
}

// SM
@mixin inline-size-sm-css {
  @each $name, $value in $inline-sizes {
    .#{$name}-sm {
      inline-size: #{$value};
    }
  }

  @each $name, $value in $inline-sizes {
    .#{$name}-min-sm {
      min-inline-size: #{$value};
    }
  }

  @each $name, $value in $inline-sizes {
    .#{$name}-max-sm {
      max-inline-size: #{$value};
    }
  }
  
  .width-sm {
    inline-size: $inline-size;
  }

  @each $name, $value in $inline-variable-sizes {
    .#{$name}-width-sm {
      #{$name}-inline-size: #{$value};
    }
  }
}

@mixin block-size-sm-css {
  @each $name, $value in $block-sizes {
    .#{$name}-sm {
      block-size: #{$value};
    }
  }

  @each $name, $value in $block-sizes {
    .#{$name}-min-sm {
      min-block-size: #{$value};
    }
  }

  @each $name, $value in $block-sizes {
    .#{$name}-max-sm {
      max-block-size: #{$value};
    }
  }
  
  .height-sm {
    block-size: $block-size;
  }

  @each $name, $value in $block-variable-sizes {
    .#{$name}-height-sm {
      #{$name}-block-size: #{$value};
    }
  }
}

// XS
@mixin inline-size-xs-css {
  @each $name, $value in $inline-sizes {
    .#{$name}-xs {
      inline-size: #{$value};
    }
  }

  @each $name, $value in $inline-sizes {
    .#{$name}-min-xs {
      min-inline-size: #{$value};
    }
  }

  @each $name, $value in $inline-sizes {
    .#{$name}-max-xs {
      max-inline-size: #{$value};
    }
  }
  
  .width-xs {
    inline-size: $inline-size;
  }

  @each $name, $value in $inline-variable-sizes {
    .#{$name}-width-xs {
      #{$name}-inline-size: #{$value};
    }
  }
}

@mixin block-size-xs-css {
  @each $name, $value in $block-sizes {
    .#{$name}-xs {
      block-size: #{$value};
    }
  }

  @each $name, $value in $block-sizes {
    .#{$name}-min-xs {
      min-block-size: #{$value};
    }
  }

  @each $name, $value in $block-sizes {
    .#{$name}-max-xs {
      max-block-size: #{$value};
    }
  }
  
  .height-xs {
    block-size: $block-size;
  }

  @each $name, $value in $block-variable-sizes {
    .#{$name}-height-xs {
      #{$name}-block-size: #{$value};
    }
  }
}

// XXS
@mixin inline-size-xxs-css {
  @each $name, $value in $inline-sizes {
    .#{$name}-xxs {
      inline-size: #{$value};
    }
  }

  @each $name, $value in $inline-sizes {
    .#{$name}-min-xxs {
      min-inline-size: #{$value};
    }
  }

  @each $name, $value in $inline-sizes {
    .#{$name}-max-xxs {
      max-inline-size: #{$value};
    }
  }

  .width-xxs {
    inline-size: $inline-size;
  }

  @each $name, $value in $inline-variable-sizes {
    .#{$name}-width-xxs {
      #{$name}-inline-size: #{$value};
    }
  }
}

@mixin block-size-xxs-css {
  @each $name, $value in $block-sizes {
    .#{$name}-xxs {
      block-size: #{$value};
    }
  }

  @each $name, $value in $block-sizes {
    .#{$name}-min-xxs {
      min-block-size: #{$value};
    }
  }

  @each $name, $value in $block-sizes {
    .#{$name}-max-xxs {
      max-block-size: #{$value};
    }
  }
  
  .height-xxs {
    block-size: $block-size;
  }

  @each $name, $value in $block-variable-sizes {
    .#{$name}-height-xxs {
      #{$name}-block-size: #{$value};
    }
  }
}

// Combined inline and block sizes
@mixin sizes-css {
  @include inline-size-css;
  @include block-size-css;
}

@mixin sizes-xxl-css {
  @include inline-size-xxl-css;
  @include block-size-xxl-css;
}

@mixin sizes-xl-css {
  @include inline-size-xl-css;
  @include block-size-xl-css;
}

@mixin sizes-lg-css {
  @include inline-size-lg-css;
  @include block-size-lg-css;
}

@mixin sizes-md-css {
  @include inline-size-md-css;
  @include block-size-md-css;
}

@mixin sizes-sm-css {
  @include inline-size-sm-css;
  @include block-size-sm-css;
}

@mixin sizes-xs-css {
  @include inline-size-xs-css;
  @include block-size-xs-css;
}

@mixin sizes-xxs-css {
  @include inline-size-xxs-css;
  @include block-size-xxs-css;
}