// Utilities $utilities: () !default; // stylelint-disable-next-line scss/dollar-variable-default $utilities: map-merge( ( "align": ( property: vertical-align, class: align, values: baseline top middle bottom text-bottom text-top ), "float": ( responsive: true, property: float, values: left right none ), "overflow": ( property: overflow, values: auto hidden visible scroll, ), "display": ( responsive: true, print: true, property: display, class: d, values: inline inline-block block table table-row table-cell flex inline-flex none ), "shadow": ( property: box-shadow, class: shadow, values: ( null: $box-shadow, sm: $box-shadow-sm, lg: $box-shadow-lg, none: none, ) ), "position": ( property: position, values: static relative absolute fixed sticky ), "top": ( property: top, values: $position-values ), "bottom": ( property: bottom, values: $position-values ), "left": ( property: left, values: $position-values ), "right": ( property: right, values: $position-values ), "translate-middle": ( property: transform, class: translate-middle, values: ( null: (translateX(-50%) translateY(-50%)) ) ), "border": ( property: border, values: ( null: $border-width solid $border-color, 0: 0, ) ), "border-top": ( property: border-top, values: ( null: $border-width solid $border-color, 0: 0, ) ), "border-right": ( property: border-right, values: ( null: $border-width solid $border-color, 0: 0, ) ), "border-bottom": ( property: border-bottom, values: ( null: $border-width solid $border-color, 0: 0, ) ), "border-left": ( property: border-left, values: ( null: $border-width solid $border-color, 0: 0, ) ), "border-color": ( property: border-color, class: border, values: map-merge($theme-colors, ("white": $white)) ), "border-width": ( property: border-width, class: border, values: $border-widths ), // Sizing utilities "width": ( property: width, class: w, values: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ) ), "max-width": ( property: max-width, class: mw, values: (100: 100%) ), "viewport-width": ( property: width, class: vw, values: (100: 100vw) ), "min-viewport-width": ( property: min-width, class: min-vw, values: (100: 100vw) ), "height": ( property: height, class: h, values: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ) ), "max-height": ( property: max-height, class: mh, values: (100: 100%) ), "viewport-height": ( property: height, class: vh, values: (100: 100vh) ), "min-viewport-height": ( property: min-height, class: min-vh, values: (100: 100vh) ), // Flex utilities "flex": ( responsive: true, property: flex, values: (fill: 1 1 auto) ), "flex-direction": ( responsive: true, property: flex-direction, class: flex, values: row column row-reverse column-reverse ), "flex-grow": ( responsive: true, property: flex-grow, class: flex, values: ( grow-0: 0, grow-1: 1, ) ), "flex-shrink": ( responsive: true, property: flex-shrink, class: flex, values: ( shrink-0: 0, shrink-1: 1, ) ), "flex-wrap": ( responsive: true, property: flex-wrap, class: flex, values: wrap nowrap wrap-reverse ), "justify-content": ( responsive: true, property: justify-content, values: ( start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, evenly: space-evenly, ) ), "align-items": ( responsive: true, property: align-items, values: ( start: flex-start, end: flex-end, center: center, baseline: baseline, stretch: stretch, ) ), "align-content": ( responsive: true, property: align-content, values: ( start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, stretch: stretch, ) ), "align-self": ( responsive: true, property: align-self, values: ( auto: auto, start: flex-start, end: flex-end, center: center, baseline: baseline, stretch: stretch, ) ), "order": ( responsive: true, property: order, values: ( first: -1, 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, last: 6, ), ), // Margin utilities "margin": ( responsive: true, property: margin, class: m, values: map-merge($spacers, (auto: auto)) ), "margin-x": ( responsive: true, property: margin-right margin-left, class: mx, values: map-merge($spacers, (auto: auto)) ), "margin-y": ( responsive: true, property: margin-top margin-bottom, class: my, values: map-merge($spacers, (auto: auto)) ), "margin-top": ( responsive: true, property: margin-top, class: mt, values: map-merge($spacers, (auto: auto)) ), "margin-right": ( responsive: true, property: margin-right, class: mr, values: map-merge($spacers, (auto: auto)) ), "margin-bottom": ( responsive: true, property: margin-bottom, class: mb, values: map-merge($spacers, (auto: auto)) ), "margin-left": ( responsive: true, property: margin-left, class: ml, values: map-merge($spacers, (auto: auto)) ), // Negative margin utilities "negative-margin": ( responsive: true, property: margin, class: m, values: $negative-spacers ), "negative-margin-x": ( responsive: true, property: margin-right margin-left, class: mx, values: $negative-spacers ), "negative-margin-y": ( responsive: true, property: margin-top margin-bottom, class: my, values: $negative-spacers ), "negative-margin-top": ( responsive: true, property: margin-top, class: mt, values: $negative-spacers ), "negative-margin-right": ( responsive: true, property: margin-right, class: mr, values: $negative-spacers ), "negative-margin-bottom": ( responsive: true, property: margin-bottom, class: mb, values: $negative-spacers ), "negative-margin-left": ( responsive: true, property: margin-left, class: ml, values: $negative-spacers ), // Padding utilities "padding": ( responsive: true, property: padding, class: p, values: $spacers ), "padding-x": ( responsive: true, property: padding-right padding-left, class: px, values: $spacers ), "padding-y": ( responsive: true, property: padding-top padding-bottom, class: py, values: $spacers ), "padding-top": ( responsive: true, property: padding-top, class: pt, values: $spacers ), "padding-right": ( responsive: true, property: padding-right, class: pr, values: $spacers ), "padding-bottom": ( responsive: true, property: padding-bottom, class: pb, values: $spacers ), "padding-left": ( responsive: true, property: padding-left, class: pl, values: $spacers ), // Text "font-weight": ( property: font-weight, values: ( light: $font-weight-light, lighter: $font-weight-lighter, normal: $font-weight-normal, bold: $font-weight-bold, bolder: $font-weight-bolder ) ), "text-transform": ( property: text-transform, class: text, values: lowercase uppercase capitalize ), "text-align": ( responsive: true, property: text-align, class: text, values: left right center ), "color": ( property: color, class: text, values: map-merge( $theme-colors, ( "white": $white, "body": $body-color, "muted": $text-muted, "black-50": rgba($black, .5), "white-50": rgba($white, .5), "reset": inherit, ) ) ), "line-height": ( property: line-height, class: lh, values: ( 1: 1, sm: $line-height-sm, base: $line-height-base, lg: $line-height-lg, ) ), "background-color": ( property: background-color, class: bg, values: map-merge( $theme-colors, ( "body": $body-bg, "white": $white, "transparent": transparent ) ) ), "gradient": ( property: background-image, class: bg, values: (gradient: var(--#{$variable-prefix}gradient)) ), "white-space": ( property: white-space, class: text, values: ( wrap: normal, nowrap: nowrap, ) ), "text-decoration": ( property: text-decoration, values: none underline line-through ), "font-style": ( property: font-style, class: font, values: italic normal ), "word-wrap": ( property: word-wrap word-break, class: text, values: (break: break-word) ), "font-family": ( property: font-family, class: font, values: (monospace: var(--#{$variable-prefix}font-monospace)) ), "user-select": ( property: user-select, values: all auto none ), "pointer-events": ( property: pointer-events, class: pe, values: none auto, ), "rounded": ( property: border-radius, class: rounded, values: ( null: $border-radius, sm: $border-radius-sm, lg: $border-radius-lg, circle: 50%, pill: $rounded-pill, 0: 0, ) ), "rounded-top": ( property: border-top-left-radius border-top-right-radius, class: rounded-top, values: (null: $border-radius) ), "rounded-right": ( property: border-top-right-radius border-bottom-right-radius, class: rounded-right, values: (null: $border-radius) ), "rounded-bottom": ( property: border-bottom-right-radius border-bottom-left-radius, class: rounded-bottom, values: (null: $border-radius) ), "rounded-left": ( property: border-bottom-left-radius border-top-left-radius, class: rounded-left, values: (null: $border-radius) ), "visibility": ( property: visibility, class: null, values: ( visible: visible, invisible: hidden, ) ) ), $utilities );