// Utilities $utilities: () !default; // stylelint-disable-next-line scss/dollar-variable-default $utilities: map-merge( ( // scss-docs-start utils-vertical-align "align": ( property: vertical-align, class: align, values: baseline top middle bottom text-bottom text-top ), // scss-docs-end utils-vertical-align // scss-docs-start utils-float "float": ( responsive: true, property: float, values: ( start: left, end: right, none: none, ) ), // scss-docs-end utils-float // Opacity utilities // scss-docs-start utils-opacity "opacity": ( property: opacity, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ), // scss-docs-end utils-opacity // scss-docs-start utils-overflow "overflow": ( property: overflow, values: auto hidden visible scroll, ), // scss-docs-end utils-overflow // scss-docs-start utils-display "display": ( responsive: true, print: true, property: display, class: d, values: inline inline-block block grid table table-row table-cell flex inline-flex none ), // scss-docs-end utils-display // scss-docs-start utils-shadow "shadow": ( property: box-shadow, class: shadow, values: ( null: $box-shadow, sm: $box-shadow-sm, lg: $box-shadow-lg, none: none, ) ), // scss-docs-end utils-shadow // scss-docs-start utils-position "position": ( property: position, values: static relative absolute fixed sticky ), "top": ( property: top, values: $position-values ), "bottom": ( property: bottom, values: $position-values ), "start": ( property: left, class: start, values: $position-values ), "end": ( property: right, class: end, values: $position-values ), "translate-middle": ( property: transform, class: translate-middle, values: ( null: translate(-50%, -50%), x: translateX(-50%), y: translateY(-50%), ) ), // scss-docs-end utils-position // scss-docs-start utils-borders "border": ( property: border, values: ( null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), 0: 0, ) ), "border-top": ( property: border-top, values: ( null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), 0: 0, ) ), "border-end": ( property: border-right, class: border-end, values: ( null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), 0: 0, ) ), "border-bottom": ( property: border-bottom, values: ( null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), 0: 0, ) ), "border-start": ( property: border-left, class: border-start, values: ( null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), 0: 0, ) ), "border-color": ( property: border-color, class: border, local-vars: ( "border-opacity": 1 ), values: $utilities-border-colors ), "border-width": ( css-var: true, css-variable-name: border-width, class: border, values: $border-widths ), "border-opacity": ( css-var: true, class: border-opacity, values: ( 10: .1, 25: .25, 50: .5, 75: .75, 100: 1 ) ), // scss-docs-end utils-borders // Sizing utilities // scss-docs-start utils-sizing "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) ), // scss-docs-end utils-sizing // Flex utilities // scss-docs-start utils-flex "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, ), ), // scss-docs-end utils-flex // Margin utilities // scss-docs-start utils-spacing "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-end": ( responsive: true, property: margin-right, class: me, values: map-merge($spacers, (auto: auto)) ), "margin-bottom": ( responsive: true, property: margin-bottom, class: mb, values: map-merge($spacers, (auto: auto)) ), "margin-start": ( responsive: true, property: margin-left, class: ms, 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-end": ( responsive: true, property: margin-right, class: me, values: $negative-spacers ), "negative-margin-bottom": ( responsive: true, property: margin-bottom, class: mb, values: $negative-spacers ), "negative-margin-start": ( responsive: true, property: margin-left, class: ms, 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-end": ( responsive: true, property: padding-right, class: pe, values: $spacers ), "padding-bottom": ( responsive: true, property: padding-bottom, class: pb, values: $spacers ), "padding-start": ( responsive: true, property: padding-left, class: ps, values: $spacers ), // Gap utility "gap": ( responsive: true, property: gap, class: gap, values: $spacers ), // scss-docs-end utils-spacing // Text // scss-docs-start utils-text "font-family": ( property: font-family, class: font, values: (monospace: var(--#{$prefix}font-monospace)) ), "font-size": ( rfs: true, property: font-size, class: fs, values: $font-sizes ), "font-style": ( property: font-style, class: fst, values: italic normal ), "font-weight": ( property: font-weight, class: fw, values: ( light: $font-weight-light, lighter: $font-weight-lighter, normal: $font-weight-normal, bold: $font-weight-bold, semibold: $font-weight-semibold, bolder: $font-weight-bolder ) ), "line-height": ( property: line-height, class: lh, values: ( 1: 1, sm: $line-height-sm, base: $line-height-base, lg: $line-height-lg, ) ), "text-align": ( responsive: true, property: text-align, class: text, values: ( start: left, end: right, center: center, ) ), "text-decoration": ( property: text-decoration, values: none underline line-through ), "text-transform": ( property: text-transform, class: text, values: lowercase uppercase capitalize ), "white-space": ( property: white-space, class: text, values: ( wrap: normal, nowrap: nowrap, ) ), "word-wrap": ( property: word-wrap word-break, class: text, values: (break: break-word), rtl: false ), // scss-docs-end utils-text // scss-docs-start utils-color "color": ( property: color, class: text, local-vars: ( "text-opacity": 1 ), values: map-merge( $utilities-text-colors, ( "muted": $text-muted, "black-50": rgba($black, .5), // deprecated "white-50": rgba($white, .5), // deprecated "reset": inherit, ) ) ), "text-opacity": ( css-var: true, class: text-opacity, values: ( 25: .25, 50: .5, 75: .75, 100: 1 ) ), // scss-docs-end utils-color // scss-docs-start utils-bg-color "background-color": ( property: background-color, class: bg, local-vars: ( "bg-opacity": 1 ), values: map-merge( $utilities-bg-colors, ( "transparent": transparent ) ) ), "bg-opacity": ( css-var: true, class: bg-opacity, values: ( 10: .1, 25: .25, 50: .5, 75: .75, 100: 1 ) ), // scss-docs-end utils-bg-color "gradient": ( property: background-image, class: bg, values: (gradient: var(--#{$prefix}gradient)) ), // scss-docs-start utils-interaction "user-select": ( property: user-select, values: all auto none ), "pointer-events": ( property: pointer-events, class: pe, values: none auto, ), // scss-docs-end utils-interaction // scss-docs-start utils-border-radius "rounded": ( property: border-radius, class: rounded, values: ( null: var(--#{$prefix}border-radius), 0: 0, 1: var(--#{$prefix}border-radius-sm), 2: var(--#{$prefix}border-radius), 3: var(--#{$prefix}border-radius-lg), 4: var(--#{$prefix}border-radius-xl), 5: var(--#{$prefix}border-radius-2xl), circle: 50%, pill: var(--#{$prefix}border-radius-pill) ) ), "rounded-top": ( property: border-top-left-radius border-top-right-radius, class: rounded-top, values: (null: var(--#{$prefix}border-radius)) ), "rounded-end": ( property: border-top-right-radius border-bottom-right-radius, class: rounded-end, values: (null: var(--#{$prefix}border-radius)) ), "rounded-bottom": ( property: border-bottom-right-radius border-bottom-left-radius, class: rounded-bottom, values: (null: var(--#{$prefix}border-radius)) ), "rounded-start": ( property: border-bottom-left-radius border-top-left-radius, class: rounded-start, values: (null: var(--#{$prefix}border-radius)) ), // scss-docs-end utils-border-radius // scss-docs-start utils-visibility "visibility": ( property: visibility, class: null, values: ( visible: visible, invisible: hidden, ) ) // scss-docs-end utils-visibility ), $utilities );