@use "../abstracts/breakpoints" as bp;
$breakpoints: bp.$breakpoints;

$width-sizes: (
    0: 0,
    10: 10%,
    20: 20%,
    25: 25%,
    30: 30%,
    33: 33.333%,
    40: 40%,
    50: 50%,
    60: 60%,
    66: 66.666%,
    70: 70%,
    75: 75%,
    80: 80%,
    90: 90%,
    100: 100%,
    auto: auto
);

$height-sizes: (
    0: 0,
    10: 10vh,
    20: 20vh,
    25: 25vh,
    30: 30vh,
    40: 40vh,
    50: 50vh,
    60: 60vh,
    70: 70vh,
    75: 75vh,
    80: 80vh,
    90: 90vh,
    100: 100vh
);


.fit-width  { width: fit-content; }
.fit-height { height: fit-content; }
.fit-size   { width: fit-content; height: fit-content; }

.fit-max-width  { width: max-content; }
.fit-max-height { height: max-content; }
.fit-max-size   { width: max-content; height: max-content; }

.fit-min-width  { width: min-content; }
.fit-min-height { height: min-content; }
.fit-min-size   { width: min-content; height: min-content; }

@each $key, $value in $width-sizes {
    .w-#{$key} { width: $value; }
    @if $key != auto {
        .min-w-#{$key} { min-width: $value; }
        .max-w-#{$key} { max-width: $value; }
    }
}

@each $key, $value in $height-sizes {
    .h-#{$key} { height: $value; }
    .min-h-#{$key} { min-height: $value; }
    .max-h-#{$key} { max-height: $value; }
}

@each $bp, $size in $breakpoints {
    @media (min-width: #{$size}) {

        .fit-width-#{$bp}  { width: fit-content; }
        .fit-height-#{$bp} { height: fit-content; }
        .fit-size-#{$bp}   { width: fit-content; height: fit-content; }
        .fit-max-width-#{$bp}  { width: max-content; }
        .fit-max-height-#{$bp} { height: max-content; }
        .fit-max-size-#{$bp}   { width: max-content; height: max-content; }
        .fit-min-width-#{$bp}  { width: min-content; }
        .fit-min-height-#{$bp} { height: min-content; }
        .fit-min-size-#{$bp}   { width: min-content; height: min-content; }


        @each $key, $value in $width-sizes {
            .w-#{$key}-#{$bp} { width: $value; }
            @if $key != auto {
                .min-w-#{$key}-#{$bp} { min-width: $value; }
                .max-w-#{$key}-#{$bp} { max-width: $value; }
            }
        }

        @each $key, $value in $height-sizes {
            .h-#{$key}-#{$bp} { height: $value; }
            .min-h-#{$key}-#{$bp} { min-height: $value; }
            .max-h-#{$key}-#{$bp} { max-height: $value; }
        }
    }
}