@import "../00_Abstracts/index";

$widths: (10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100);
$heights: (25, 50, 75, 100);
$breakpoints: (xl, lg, md, sm, xs, xxs, print);

// WIDTH

.w-content {
    max-width: var(--ks-content-width) !important;
}

@each $width in $widths {
    .w-#{$width} {
        width: #{$width + "%"} !important;
    }
}

@each $mq, $value in $breakpoints {
    @each $width in $widths {
        @include mq($mq) {
            /*
                sm:w-100
                xl:w-50
            */
            .#{$mq}\:w-#{$width} {
                width: #{$width + "%"} !important;
            }
        }
    }
}

@each $height in $heights {
    .h-#{$height} {
        height: #{$height + "%"} !important;
    }
}

@each $mq, $value in $breakpoints {
    @each $height in $heights {
        @include mq($mq) {
            /*
                sm:h-100
                xl:h-50
            */
            .#{$mq}\:h-#{$height} {
                height: #{$height + "%"} !important;
            }
        }
    }
}