// =============================================================================
// WIDTHS (CSS)
// =============================================================================


// Bigcommerce Utility Classes
// -----------------------------------------------------------------------------
//
// 1. If set to false, there is no outputted CSS for this component.
//
// Width utility classes to be applied to any element
// Example: <input type="text" class="u-width-3-4" />

// Widths are based on fractions
// Example: .width-3-4 is equivalent to 3/4 or 75% in width
//
// -----------------------------------------------------------------------------
// scss-lint:disable ImportantRule

@if $exportCSS--widthUtilities { // 1

    .u-widthFull {
        @include u-width("full", !important);
    }

    .u-widthFixed {
        @include u-width("fixed", !important);
    }

    .u-width-1-1 {
        width: grid("1-1") !important;
    }

    .u-width-4-5 {
        width: grid("4-5") !important;
    }

    .u-width-3-4 {
        width: grid("3-4") !important;
    }

    .u-width-2-3 {
        width: grid("2-3") !important;
    }

    .u-width-3-5 {
        width: grid("3-5") !important;
    }

    .u-width-1-2 {
        width: grid("1-2") !important;
    }

    .u-width-2-5 {
        width: grid("2-5") !important;
    }

    .u-width-1-3 {
        width: grid("1-3") !important;
    }

    .u-width-1-4 {
        width: grid("1-4") !important;
    }

    .u-width-1-5 {
        width: grid("1-5") !important;
    }

    .u-width-1-6 {
        width: grid("1-6") !important;
    }

    .u-width-1-7 {
        width: grid("1-7") !important;
    }

    .u-width-1-8 {
        width: grid("1-8") !important;
    }

    .u-width-1-10 {
        width: grid("1-10") !important;
    }

}