@use 'sass:map';

@function size-map($default, $prefix, $size: 30) {
    $size-map: ();

    /* Add content type objects to map */
    $size-map: map.merge($default, ('#{$prefix}-min': min-content, '#{$prefix}-max': max-content, '#{$prefix}-fit': fit-content));

    /* Add rem type objects to map */
    $rem-map: ();
    @for $i from 1 through $size {
        $rem-map: map.merge($rem-map, ('#{$prefix}-#{$i}rem': $i * 1rem));
    }
    $size-map: map.merge($size-map, $rem-map);
    
    @return $size-map;
}

$width-properties: size-map((
    'w-full': 100%,
    'w-screen': 100vw,
    'w-auto': auto,
    'w-1': 8.3333%,
    'w-2': 16.6667%,
    'w-3': 25%,
    'w-4': 33.3333%,
    'w-5': 41.6667%,
    'w-6': 50%,
    'w-7': 58.3333%,
    'w-8': 66.6667%,
    'w-9': 75%,
    'w-10': 83.3333%,
    'w-11': 91.6667%,
    'w-12': 100%
), 'w') !default;

$height-properties: size-map((
    'h-full': 100%,
    'h-screen': 100vh,
    'h-auto': auto,
), 'h') !default;

$min-width-properties: (
    'min-w-0': 0px,
    'min-w-full': 100%,
    'min-w-screen': 100vw,
    'min-w-min': min-content,
    'min-w-max': max-content
) !default;

$max-width-properties: size-map((
    'max-w-0': 0px,
    'max-w-full': 100%,
    'max-w-screen': 100vw
), 'max-w') !default;

$min-height-properties: (
    'min-h-0': 0px,
    'min-h-full': 100%,
    'min-h-screen': 100vh
) !default;

$max-height-properties: size-map((
    'max-h-0': 0px,
    'max-h-full': 100%,
    'max-h-screen': 100vh
), 'max-h') !default;

@include style-class('width', $width-properties, true);
@include style-class('height', $height-properties, true);
@include style-class('min-width', $min-width-properties, true);
@include style-class('max-width', $max-width-properties, true);
@include style-class('min-height', $min-height-properties, true);
@include style-class('max-height', $max-height-properties, true);