$sizes-height: (
    7,
    8,
    9,
    10,
    11,
    12,
    14,
    15,
    16,
    18,
    22,
    24,
    26,
    28,
    30,
    34,
    37,
    40,
    42,
    44,
    52,
    80,
    160,
    231,
    486,
    800,
    960
);

// DO NOT USE 25, 33, ,50,75,100. They are bootstrap width classes
$sizes-width: (
    2,
    7,
    8,
    10,
    12,
    14,
    15,
    16,
    18,
    22,
    24,
    26,
    29,
    30,
    36,
    40,
    42,
    46,
    49,
    57,
    60,
    68,
    70,
    71,
    78,
    80,
    83,
    84,
    88,
    90,
    91,
    93,
    96,
    98,
    101,
    106,
    108,
    116,
    118,
    126,
    144,
    155,
    172,
    179,
    180,
    202,
    214,
    223,
    252,
    264,
    268,
    272,
    276,
    277,
    300,
    334,
    442,
    462,
    612,
    616,
    620
);

@mixin size-classes($class, $property, $sizes) {
    .#{$class} {
        @each $size in $sizes {
            &-#{$size} {
                #{$property}: #{$size}px !important;
                min-#{$property}: #{$size}px !important;
            }
        }
    }
}

@include size-classes('h', height, $sizes-height);
@include size-classes('w', width, $sizes-width);

.min-w {
    &-0 {
        min-width: 0;
    }

    &-16 {
        min-width: 16px;
    }

    &-18 {
        min-width: 18px;
    }

    &-40 {
        min-width: 40px;
    }

    &-100 {
        min-width: 100px;
    }
}

.max-w {
    &-159 {
        max-width: 159px;
    }
}

.min-h {
    &-100 {
        min-height: 100px;
    }
}

.flex-1 {
    flex: 1;
}

.w {
    &-33 {
        width: 33%;
    }
    &-40p {
        width: 40%;
    }
    &-90p {
        width: 90%;
    }
    &-100p {
        width: 100%;
    }
}

.ca-full-width {
    width: 100% !important;
}