.eui-u-width-auto {
    width: auto !important;
}

.eui-u-width-100 {
    width: 100% !important;
}

.eui-u-width-1 {
    max-width: v(eui-base-spacing-m);
    min-width: v(eui-base-spacing-m);
    width: v(eui-base-spacing-m) !important;
}

.eui-u-width-2 {
    max-width: calc(2 * #{v(eui-base-spacing-m)});
    min-width: calc(2 * #{v(eui-base-spacing-m)});
    width: calc(2 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-3 {
    max-width: calc(3 * #{v(eui-base-spacing-m)});
    min-width: calc(3 * #{v(eui-base-spacing-m)});
    width: calc(3 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-4 {
    max-width: calc(4 * #{v(eui-base-spacing-m)});
    min-width: calc(4 * #{v(eui-base-spacing-m)});
    width: calc(4 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-5 {
    max-width: calc(5 * #{v(eui-base-spacing-m)});
    min-width: calc(5 * #{v(eui-base-spacing-m)});
    width: calc(5 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-6 {
    max-width: calc(6 * #{v(eui-base-spacing-m)});
    min-width: calc(6 * #{v(eui-base-spacing-m)});
    width: calc(6 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-7 {
    max-width: calc(7 * #{v(eui-base-spacing-m)});
    min-width: calc(7 * #{v(eui-base-spacing-m)});
    width: calc(7 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-8 {
    max-width: calc(8 * #{v(eui-base-spacing-m)});
    min-width: calc(8 * #{v(eui-base-spacing-m)});
    width: calc(8 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-9 {
    max-width: calc(9 * #{v(eui-base-spacing-m)});
    min-width: calc(9 * #{v(eui-base-spacing-m)});
    width: calc(9 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-10 {
    max-width: calc(10 * #{v(eui-base-spacing-m)});
    min-width: calc(10 * #{v(eui-base-spacing-m)});
    width: calc(10 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-11 {
    max-width: calc(11 * #{v(eui-base-spacing-m)});
    min-width: calc(11 * #{v(eui-base-spacing-m)});
    width: calc(11 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-12 {
    max-width: calc(12 * #{v(eui-base-spacing-m)});
    min-width: calc(12 * #{v(eui-base-spacing-m)});
    width: calc(12 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-13 {
    max-width: calc(13 * #{v(eui-base-spacing-m)});
    min-width: calc(13 * #{v(eui-base-spacing-m)});
    width: calc(13 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-14 {
    max-width: calc(14 * #{v(eui-base-spacing-m)});
    min-width: calc(14 * #{v(eui-base-spacing-m)});
    width: calc(14 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-15 {
    max-width: calc(15 * #{v(eui-base-spacing-m)});
    min-width: calc(15 * #{v(eui-base-spacing-m)});
    width: calc(15 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-16 {
    max-width: calc(16 * #{v(eui-base-spacing-m)});
    min-width: calc(16 * #{v(eui-base-spacing-m)});
    width: calc(16 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-17 {
    max-width: calc(17 * #{v(eui-base-spacing-m)});
    min-width: calc(17 * #{v(eui-base-spacing-m)});
    width: calc(17 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-18 {
    max-width: calc(18 * #{v(eui-base-spacing-m)});
    min-width: calc(18 * #{v(eui-base-spacing-m)});
    width: calc(18 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-19 {
    max-width: calc(19 * #{v(eui-base-spacing-m)});
    min-width: calc(19 * #{v(eui-base-spacing-m)});
    width: calc(19 * #{v(eui-base-spacing-m)}) !important;
}

.eui-u-width-20 {
    max-width: calc(20 * #{v(eui-base-spacing-m)});
    min-width: calc(20 * #{v(eui-base-spacing-m)});
    width: calc(20 * #{v(eui-base-spacing-m)}) !important;
}
