@use "sass-utilizer/_utilizer.scss" as *;

/* Sass-Utilizer */
$utilities: (
    /* DISPLAY & ALIGNMENT */
    flex: (
        styles: (
            display: flex
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    block: (
        styles: (
            display: block
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),
    
    inline-block: (
        styles: (
            display: inline-block
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),
    
    inline: (
        styles: (
            display: inline
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    hidden: (
        styles: (
            display: none
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    // Text align
    text-left: (
        styles: (
            text-align: left
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    text-center: (
        styles: (
            text-align: center
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    text-right: (
        styles: (
            text-align: right
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    text-justify: (
        styles: (
            text-align: justify
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    // Vertical align
    align-baseline: (
        styles: (
            vertical-align: baseline
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    align-top: (
        styles: (
            vertical-align: top
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    align-middle: (
        styles: (
            vertical-align: middle
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    align-bottom: (
        styles: (
            vertical-align: bottom
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    align-text-top: (
        styles: (
            vertical-align: text-top
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    align-text-bottom: (
        styles: (
            vertical-align: text-bottom
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    // Flex
    flex-none: (
        styles: (
            flex: none
        )
    ),
    
    inline-flex: (
        styles: (
            display: inline-flex
        )
    ),

    flex-auto: (
        styles: (
            flex: 1 1 auto
        )
    ),
    
    flex-initial: (
        styles: (
            flex: 0 1 auto
        )
    ),

    flex-grow: (
        styles: (
            flex-grow: 1
        ),
        increments: (
            min: 1,
            max: 12,
            factor: 1
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    flex-shrink:(
        styles: (
            flex-shrink: 1
        ),
        increments: (
            min: 1,
            max: 12,
            factor: 1
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    order: (
        styles: (
            order: 1
        ),
        increments: (
            min: 1,
            max: 12,
            factor: 1
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    flex-row: (
        styles:(
            flex-direction: row
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),
    
    flex-row-reverse: (
        styles: (
            flex-direction: row-reverse
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),
    
    flex-column: (
        styles: (
            flex-direction: column
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),
    
    flex-column-reverse: (
        styles: (
            flex-direction: column-reverse
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    flex-wrap: (
        styles: (
            flex-wrap: wrap
        )
    ),
    
    flex-wrap-reverse: (
        styles: (
            flex-wrap: wrap-reverse
        )
    ),
    
    flex-no-wrap: (
        styles: (
            flex-wrap: nowrap
        )
    ),

    // Flex - Justify Content
    justify-start: (
        styles: (
            justify-content: flex-start
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),
    
    justify-end: (
        styles: (
            justify-content: flex-end
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),
    
    justify-center: (
        styles: (
            justify-content: center
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),
    
    justify-around: (
        styles: (
            justify-content: space-around
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),
    
    justify-between: (
        styles: (
            justify-content: space-between
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),
    
    justify-evenly: (
        styles: (
            justify-content: space-evenly
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    // Flex - Justify Items
    justify-items-auto: (
        styles: (
            justify-items: auto
        )
    ),

    justify-items-start: (
        styles: (
            justify-items: start
        )
    ),

    justify-items-end: (
        styles: (
            justify-items: end
        )
    ),

    justify-items-center: (
        styles: (
            justify-items: center
        )
    ),

    justify-items-stretch: (
        styles: (
            justify-items: stretch
        )
    ),

    // Flex - Justify Self
    justify-self-auto: (
        styles: (
            justify-self: auto
        )
    ),

    justify-self-start: (
        styles: (
            justify-self: start
        )
    ),

    justify-self-end: (
        styles: (
            justify-self: end
        )
    ),

    justify-self-center: (
        styles: (
            justify-self: center
        )
    ),

    justify-self-stretch: (
        styles: (
            justify-self: stretch
        )
    ),

    // Flex - Align Content
    content-center: (
        styles: (
            align-content: center
        )
    ),

    content-start: (
        styles: (
            align-content: flex-start
        )
    ),

    content-end: (
        styles: (
            align-content: flex-end
        )
    ),

    content-between: (
        styles: (
            align-content: space-between
        )
    ),

    content-around: (
        styles: (
            align-content: space-around
        )
    ),

    content-evenly: (
        styles: (
            align-content: space-evenly
        )
    ),
    
    // Flex - Align Items
    items-start: (
        styles: (
            align-items: flex-start
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    items-end: (
        styles: (
            align-items: flex-end
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    items-center: (
        styles: (
            align-items: center
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    items-baseline: (
        styles: (
            align-items: baseline
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    items-stretch: (
        styles: (
            align-items: stretch
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),
    
    // Flex - Align Self
    self-auto: (
        styles: (
            align-self: auto
        )
    ),

    self-start: (
        styles: (
            align-self: flex-start
        )
    ),

    self-end: (
        styles: (
            align-self: flex-end
        )
    ),

    self-center: (
        styles: (
            align-self: center
        )
    ),

    self-stretch: (
        styles: (
            align-self: stretch
        )
    ),

    // Table
    table: (
        styles: (
            display: table
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),
    
    table-header-group: (
        styles: (
            display: table-header-group
        )
    ),
    
    table-row-group: (
        styles: (
            display: table-row-group
        )
    ),

    table-column-group: (
        styles: (
            display: table-column-group
        )
    ),
    
    table-footer-group: (
        styles: (
            display: table-footer-group
        )
    ),
    
    table-row: (
        styles: (
            display: table-row
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),
    
    table-column: (
        styles: (
            display: table-column
        )
    ),

    table-cell: (
        styles: (
            display: table-cell
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),
    
    table-caption: (
        styles: (
            display: table-caption
        )
    ),

    table-auto: (
        styles: (
            table-layout: auto
        )
    ),

    table-fixed: (
        styles: (
            table-layout: fixed
        )
    ),

    border-collapse: (
        styles: (
            border-collapse: collapse
        )
    ),

    border-separate: (
        styles: (
            border-collapse: separate
        )
    ),

    // Positioning
    static: (
        styles: (
            position: static
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    fixed: (
        styles: (
            position: fixed
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    absolute: (
        styles: (
            position: absolute
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),
    
    pin: (
        styles: (
            position: absolute
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    relative: (
        styles: (
            position: relative
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    sticky: (
        styles: (
            position: sticky
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    inset: (
        styles: (
            top: $spacing,
            bottom: $spacing,
            left: $spacing,
            right: $spacing
        ),
        increments: (
            min: $incrementMin,
            max: $incrementMax,
            factor: $incrementFactor
        ),
        breakpoints: $sass-utilizer-breakpoints,
        negatives: true
    ),
    
    inset-y: (
        styles: (
            top: $spacing,
            bottom: $spacing
        ),
        increments: (
            min: $incrementMin,
            max: $incrementMax,
            factor: $incrementFactor
        ),
        breakpoints: $sass-utilizer-breakpoints,
        negatives: true
    ),
    
    inset-x: (
        styles: (
            left: $spacing,
            right: $spacing
        ),
        increments: (
            min: $incrementMin,
            max: $incrementMax,
            factor: $incrementFactor
        ),
        breakpoints: $sass-utilizer-breakpoints,
        negatives: true
    ),

    top: (
        styles: (
            top: $spacing
        ),
        increments: (
            min: $incrementMin,
            max: $incrementMax,
            factor: $incrementFactor
        ),
        breakpoints: $sass-utilizer-breakpoints,
        negatives: true
    ),
    
    bottom: (
        styles: (
            bottom: $spacing
        ),
        increments: (
            min: $incrementMin,
            max: $incrementMax,
            factor: $incrementFactor
        ),
        breakpoints: $sass-utilizer-breakpoints,
        negatives: true
    ),
    
    left: (
        styles: (
            left: $spacing
        ),
        increments: (
            min: $incrementMin,
            max: $incrementMax,
            factor: $incrementFactor
        ),
        breakpoints: $sass-utilizer-breakpoints,
        negatives: true
    ),
    
    right: (
        styles: (
            right: $spacing
        ),
        increments: (
            min: $incrementMin,
            max: $incrementMax,
            factor: $incrementFactor
        ),
        breakpoints: $sass-utilizer-breakpoints,
        negatives: true
    ),

    transform-center: (
        styles: (
            top: 50%,
            left: 50%,
            transform: translate(-50%, -50%)
        ),
        breakpoints: $sass-utilizer-breakpoints,
    ),
    
    transform-center-x: (
        styles: (
            left: 50%,
            transform: translateX(-50%)
        ),
        breakpoints: $sass-utilizer-breakpoints,
    ),

    transform-center-y: (
        styles: (
            top: 50%,
            transform: translateY(-50%)
        ),
        breakpoints: $sass-utilizer-breakpoints,
    ),

    z: (
        styles: (
            z-index: 1
        ),
        increments: (
            min: -1,
            max: 10,
            factor: 1
        ),
        breakpoints: $sass-utilizer-breakpoints,
        negatives: true
    ),

    // Box Model
    w-100: (
        styles: (
            width: 100%
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    h-100: (
        styles: (
            height: 100%
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    overflow-auto: (
        styles: (
            overflow: auto
        )
    ),

    overflow-hidden: (
        styles: (
            overflow: hidden
        )
    ),

    overflow-visible: (
        styles: (
            overflow: visible
        )
    ),

    overflow-scroll: (
        styles: (
            overflow: scroll
        )
    ),

    overflow-x-auto: (
        styles: (
            overflow-x: auto
        )
    ),
    
    overflow-y-auto: (
        styles: (
            overflow-y: auto
        )
    ),
    
    overflow-x-hidden: (
        styles: (
            overflow-x: hidden
        )
    ),
    
    overflow-y-hidden: (
        styles: (
            overflow-y: hidden
        )
    ),
    
    overflow-x-visible: (
        styles: (
            overflow-x: visible
        )
    ),
    
    overflow-y-visible: (
        styles: (
            overflow-y: visible
        )
    ),
    
    overflow-x-scroll: (
        styles: (
            overflow-x: scroll
        )
    ),
    
    overflow-y-scroll: (
        styles: (
            overflow-y: scroll
        )
    ),

    box-border: (
        styles: (
            box-sizing: border-box
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    box-content: (
        styles: (
            box-sizing: content-box
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    m: (
        styles: (
            margin: $spacing
        ),
        directions: true,
        breakpoints: $sass-utilizer-breakpoints,
        increments: (
            min: $incrementMin,
            max: $incrementMax,
            factor: $incrementFactor
        ),
        negatives: true,
        dives: true
    ),

    my: (
        styles: (
            margin-top: $spacing,
            margin-bottom: $spacing
        ),
        directions: false,
        breakpoints: $sass-utilizer-breakpoints,
        increments: (
            min: $incrementMin,
            max: $incrementMax,
            factor: $incrementFactor
        ),
        negatives: true,
        dives: true
    ),

    mx: (
        styles: (
            margin-left: $spacing,
            margin-right: $spacing
        ),
        directions: false,
        breakpoints: $sass-utilizer-breakpoints,
        increments: (
            min: $incrementMin,
            max: $incrementMax,
            factor: $incrementFactor
        ),
        negatives: true,
        dives: true
    ),

    m-auto: (
        styles: (
            margin: auto,
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true,
    ),

    mx-auto: (
        styles: (
            margin-left: auto,
            margin-right: auto,
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    my-auto: (
        styles: (
            margin-top: auto,
            margin-bottom: auto,
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    ml-auto: (
        styles: (
            margin-left: auto,
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    mr-auto: (
        styles: (
            margin-right: auto,
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    mt-auto: (
        styles: (
            margin-top: auto,
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),

    mb-auto: (
        styles: (
            margin-bottom: auto,
        ),
        breakpoints: $sass-utilizer-breakpoints,
        dives: true
    ),
    
    p: (
        styles: (
            padding: $spacing
        ),
        directions: true,
        breakpoints: $sass-utilizer-breakpoints,
        increments: (
            min: $incrementMin,
            max: $incrementMax,
            factor: $incrementFactor
        ),
        dives: true
    ),

    py: (
        styles: (
            padding-top: $spacing,
            padding-bottom: $spacing
        ),
        directions: false,
        breakpoints: $sass-utilizer-breakpoints,
        increments: (
            min: $incrementMin,
            max: $incrementMax,
            factor: $incrementFactor
        ),
        dives: true
    ),

    px: (
        styles: (
            padding-left: $spacing,
            padding-right: $spacing
        ),
        directions: false,
        breakpoints: $sass-utilizer-breakpoints,
        increments: (
            min: $incrementMin,
            max: $incrementMax,
            factor: $incrementFactor
        ),
        dives: true
    ),

    border-radius: (
        styles: (
            border-radius: $radius
        ),
        increments: (
            min: 1,
            max: 5,
            factor: 1
        ),
        breakpoints: $sass-utilizer-breakpoints
    ),

    border-round: (
        styles: (
            border-radius: 50%
        ),
        breakpoints: $sass-utilizer-breakpoints
    ),

    border-solid: (
        styles: (
            border-style: solid
        )
    ),

    border-dashed: (
        styles: (
            border-style: dashed
        )
    ),

    border: (
        styles: (
            border-width: 1px
        ),
        increments: (
            min: 1,
            max: 5,
            factor: 1
        ),
        breakpoints: $sass-utilizer-breakpoints
    ),

    border-none: (
        styles: (
            border: none
        ),
        breakpoints: $sass-utilizer-breakpoints
    ),

    border-t-solid: (
        styles: (
            border-top-style: solid
        ),
        breakpoints: $sass-utilizer-breakpoints
    ),

    border-b-solid: (
        styles: (
            border-bottom-style: solid
        )
    ),

    border-l-solid: (
        styles: (
            border-left-style: solid
        )
    ),

    border-r-solid: (
        styles: (
            border-right-style: solid
        )
    ),

    border-t-dashed: (
        styles: (
            border-top-style: dashed
        )
    ),

    border-b-dashed: (
        styles: (
            border-bottom-style: dashed
        )
    ),

    border-l-dashed: (
        styles: (
            border-left-style: dashed
        )
    ),

    border-r-dashed: (
        styles: (
            border-right-style: dashed
        )
    ),

    border-t: (
        styles: (
            border-top-width: 0.1rem
        ),
        increments: (
            min: 1,
            max: 5,
            factor: 1
        ),
        breakpoints: $sass-utilizer-breakpoints
    ),

    border-b: (
        styles: (
            border-bottom-width: 0.1rem
        ),
        increments: (
            min: 1,
            max: 5,
            factor: 1
        ),
        breakpoints: $sass-utilizer-breakpoints
    ),

    border-l: (
        styles: (
            border-left-width: 0.1rem
        ),
        increments: (
            min: 1,
            max: 5,
            factor: 1
        ),
        breakpoints: $sass-utilizer-breakpoints
    ),

    border-r: (
        styles: (
            border-right-width: 0.1rem
        ),
        increments: (
            min: 1,
            max: 5,
            factor: 1
        ),
        breakpoints: $sass-utilizer-breakpoints
    ),

    // Typography
    text: (
        styles: (
            font-size: 1rem
        )
    ),

    italic: (
        styles: (
            font-style: italic
        )
    ),
    
    not-italic: (
        styles: (
            font-style: normal
        )
    ),

    underline: (
        styles: (
            text-decoration: underline
        )
    ),

    line-through: (
        styles: (
            text-decoration: line-through
        )
    ),

    no-underline: (
        styles: (
            text-decoration: none
        )
    ),

    uppercase: (
        styles: (
            text-transform: uppercase
        )
    ),

    lowercase: (
        styles: (
            text-transform: lowercase
        )
    ),

    capitalize: (
        styles: (
            text-transform: capitalize
        )
    ),

    normal-case: (
        styles: (
            text-transform: none
        )
    ),

    leading: (
        styles: (
            line-height: 1
        ),
        increments: (
            min: 1,
            max: 2,
            factor: 0.25
        )
    ),
    
    tracking-0\.1: (
        styles: (
            letter-spacing: 0.1em
        )
    ),

    whitespace-normal: (
        styles: (
            white-space: normal
        )
    ),

    whitespace-no-wrap: (
        styles: (
            white-space: nowrap
        )
    ),

    whitespace-pre: (
        styles: (
            white-space: pre
        )
    ),

    whitespace-pre-line: (
        styles: (
            white-space: pre-line
        )
    ),

    whitespace-pre-wrap: (
        styles: (
            white-space: pre-wrap
        )
    ),

    break-normal: (
        styles: (
            overflow-wrap: normal,
            word-break: normal
        )
    ),

    break-words: (
        styles: (
            overflow-wrap: break-word
        )
    ),

    break-all: (
        styles: (
            word-break: break-all
        )
    ),

    truncate: (
        styles: (
            overflow: hidden,
            text-overflow: ellipsis,
            white-space: nowrap
        )
    ),

    list-none: (
        styles: (
            list-style-type: none
        )
    ),

    list-disc: (
        styles: (
            list-style-type: disc
        )
    ),

    list-decimal: (
        styles: (
            list-style-type: decimal
        )
    ),

    list-inside: (
        styles: (
            list-style-position: inside
        )
    ),
    
    list-outside: (
        styles: (
            list-style-position: outside
        )
    ),

    // Misc
    visible: (
        styles: (
            visibility: visible
        )
    ),
    
    invisible: (
        styles: (
            visibility: hidden
        )
    ),

    opacity: (
        styles: (
            opacity: 1
        )
    ),

    appearance-none: (
        styles: (
            appearance: none
        )
    ),

    cursor-auto: (
        styles: (
            cursor: auto
        )
    ),

    cursor-default: (
        styles: (
            cursor: default
        )
    ),

    cursor-pointer: (
        styles: (
            cursor: pointer
        )
    ),

    cursor-wait: (
        styles: (
            cursor: wait
        )
    ),

    cursor-text: (
        styles: (
            cursor: text
        )
    ),

    cursor-move: (
        styles: (
            cursor: move
        )
    ),

    cursor-not-allowed: (
        styles: (
            cursor: not-allowed
        )
    ),

    // Different to tailwind
    outline-none: (
        styles: (
            outline: none
        )
    ),

    // Different to tailwind
    outline-white: (
        styles: (
            outline: 0.1rem dotted white,
            outline-offset: 0.1rem
        )
    ),

    // Different to tailwind
    outline-black: (
        styles: (
            outline: 0.1rem dotted black,
            outline-offset: 0.1rem
        )
    ),

    pointer-events-none: (
        styles: (
            pointer-events: none
        )
    ),

    pointer-events-all: (
        styles: (
            pointer-events: all
        )
    ),

    pointer-events-auto: (
        styles: (
            pointer-events: auto
        )
    ),

    select-none: (
        styles: (
            user-select: none
        )
    ),

    select-text: (
        styles: (
            user-select: text
        )
    ),

    select-all: (
        styles: (
            user-select: all
        )
    ),

    select-auto: (
        styles: (
            user-select: auto
        )
    ),
);

$bpConfig: (
    breakpoints: (
        desktop: $desktopMax,
        tablet: $tabletMax,
        mobile: $mobileMax,
        base: $baseMax
    ),
    paradigm: max-width
);

// Setup Color Utilities
@for $i from 0 to length($colors) {
    $utilities: join(
        $utilities,
        ((
            color-#{$i}: (
                styles: ( color: nth($colors, $i + 1) ),
                dives: false,
                breakpoints: false,
                pseudos: (hover, visited, focus, active)
            ),

            fill-#{$i}: (
                styles: ( fill: nth($colors, $i + 1) ),
                dives: false,
                breakpoints: false,
                pseudos: (hover, focus, active)
            ),

            bg-#{$i}: (
                styles: ( background-color: nth($colors, $i + 1) ),
                dives: false,
                breakpoints: false,
                pseudos: (hover, focus, active)
            ),

            border-color-#{$i}: (
                styles: ( border-color: nth($colors, $i + 1) )
            ),

            border-t-color-#{$i}: (
                styles: ( border-top-color: nth($colors, $i + 1) )
            ),

            border-b-color-#{$i}: (
                styles: ( border-bottom-color: nth($colors, $i + 1) )
            ),

            border-l-color-#{$i}: (
                styles: ( border-left-color: nth($colors, $i + 1) )
            ),

            border-r-color-#{$i}: (
                styles: ( border-right-color: nth($colors, $i + 1) )
            )
        ))
    );
}

@for $i from 1 through 9 {
    $utilities: join(
        $utilities,
        (font-#{$i * 100}: ( styles: ( font-weight: $i * 100 ) ))
    );
}

@for $i from 1 through 9 {
    $utilities: join(
        $utilities,
        (tracking-0\.0#{$i}: ( styles: ( letter-spacing: #{$i * 0.01}em ) ))
    );
}

@include render($utilities, $bpConfig);