// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$sizes: map-merge(
                (
                        25: 25%,
                        50: 50%,
                        75: 75%,
                        90: 90%,
                        100: 100%,
                        auto: auto
                ),
                $sizes
);


@each $prop, $abbrev in (width: w, height: h) {
    @each $size, $length in $sizes {
        .#{$abbrev}-#{$size} {
            #{$prop}: $length !important;
        }
    }
}

$all-size: ();
$all-size: map-merge(
        (
            '4':4,
            '9':9,
            '12':12,
            '16':16,
            '20':20,
            '24':24,
            '26':26,
            '28':28,
            '32':32,
            '36':36,
            '38':38,
            '40':40,
            '44':44,
            '48':48,
            '52':52,
            '53':53,
            '54':54,
            '56':56,
            '58':58,
            '60':60,
            '64':64,
            '68':68,
            '72':72,
            '74':74,
            '80':80,
            '84':84,
            '88':88,
            '92':92,
            '96':96,
            '100':100,
            '110':110,
            '112':112,
            '120':120,
            '124':124,
            '126':126,
            '128':128,
            '136':136,
            '140':140,
            '144':144,
            '148':148,
            '200':200,
            '218':218,
        ),
        $all-size
);

@each $name, $val in $all-size {
    .size-#{$name} {
        width: #{$val}px;
        min-width: #{$val}px;
        height: #{$val}px;
    }
}

.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }

.w-100-calc-56 {
    width: calc(100% - 56px);
}

.mx-w-150 {
    max-width: 150px;
}

.mx-w-110 {
    max-width: 110px;
}

.mx-w-200 {
    max-width: 200px;
}