ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯨ꯫ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯗꯥ ꯆꯠꯂꯨ꯫
in English

ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ

ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯅꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯁꯥꯁꯇꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯈꯨꯠꯂꯥꯌ ꯑꯃꯅꯤ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯦꯃꯒꯠꯄꯅꯤ ꯑꯃꯁꯨꯡ ꯃꯁꯤ ꯁꯥꯁꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯁꯦꯠ ꯑꯁꯤ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯅꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯁꯥꯡꯗꯣꯛꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯅꯥ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯏꯃꯨꯡꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯁꯨꯡ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯅꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯁꯥꯁ ꯃꯦꯄꯁꯤꯡ ꯈꯪꯗ꯭ꯔꯕꯗꯤ, ꯍꯧꯗꯣꯛꯅꯕꯒꯤꯗꯃꯛ ꯑꯣꯐꯤꯁꯤꯑꯦꯜ ꯁꯥꯁ ꯗꯣꯀꯁꯤꯡꯗꯥ ꯄꯥꯕꯤꯌꯨ꯫

ꯃꯦꯞ ꯑꯗꯨꯗꯥ $utilitiesꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯄꯨꯝꯅꯃꯛ ꯌꯥꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯃꯇꯨꯡꯗꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯁ꯭ꯇꯝ $utilitiesꯃꯦꯞ ꯑꯗꯨꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯩ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯂꯩꯔꯕꯗꯤ꯫ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯃꯦꯞ ꯑꯗꯨꯗꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯌꯥꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯒꯤ ꯀꯤ ꯇꯧꯔꯕꯥ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯌꯥꯎꯏ:

ꯑꯄꯥꯝꯕ ꯈꯟꯅꯕ ꯃꯈꯜ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯚꯦꯜꯌꯨ꯫ ꯋꯥꯔꯣꯜ
property ꯃꯊꯧ ꯇꯥꯕ – ꯳. ꯄ꯭ꯔꯣꯄꯔꯇꯤꯒꯤ ꯃꯃꯤꯡ, ꯃꯁꯤ ꯁ꯭ꯠꯔꯤꯡ ꯑꯃꯥ ꯅꯠꯠꯔꯒꯥ ꯁ꯭ꯠꯔꯤꯡꯁꯤꯡꯒꯤ ꯑꯦꯔꯦ ꯑꯃꯥ ꯑꯣꯏꯕꯥ ꯌꯥꯏ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯄꯦꯗꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯃꯥꯔꯖꯤꯟ)꯫
values ꯃꯊꯧ ꯇꯥꯕ – ꯳. ꯚꯦꯜꯌꯨꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ, ꯅꯠꯠꯔꯒꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯃꯤꯡ ꯑꯗꯨ ꯚꯦꯜꯌꯨ ꯑꯗꯨꯒꯥ ꯃꯥꯟꯅꯅꯥ ꯂꯩꯕꯥ ꯄꯥꯝꯂꯕꯗꯤ ꯃꯦꯞ ꯑꯃꯥ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ nullꯃꯦꯞ ꯀꯤ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ, ꯃꯁꯤ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯗꯦ꯫
class ꯈꯟꯕ ꯌꯥꯕ ꯑꯃꯠꯇ ꯑꯣꯏꯗꯕ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯤ ꯃꯃꯤꯡ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯄꯤꯗ꯭ꯔꯕꯗꯤ ꯑꯃꯁꯨꯡ propertyꯁ꯭ꯠꯔꯤꯡꯁꯤꯡꯒꯤ ꯑꯦꯔꯦ ꯑꯃꯥ ꯑꯣꯏꯔꯕꯗꯤ, ꯑꯦꯔꯦ classꯑꯗꯨꯒꯤ ꯑꯍꯥꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯗꯤꯐꯣꯜꯇ propertyꯑꯣꯏꯒꯅꯤ꯫
css-var ꯈꯟꯕ ꯌꯥꯕ false CSS ꯔꯨꯂꯁꯤꯡꯒꯤ ꯃꯍꯨꯠꯇꯥ CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯕꯨꯂꯦꯇꯤꯟ꯫
local-vars ꯈꯟꯕ ꯌꯥꯕ ꯑꯃꯠꯇ ꯑꯣꯏꯗꯕ CSS ꯔꯨꯂꯁꯤꯡꯒꯤ ꯃꯊꯛꯇꯥ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯅꯕꯥ ꯂꯣꯀꯦꯜ CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯃꯦꯞ꯫
state ꯈꯟꯕ ꯌꯥꯕ ꯑꯃꯠꯇ ꯑꯣꯏꯗꯕ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯒꯗꯕꯥ ꯁ꯭ꯌꯨꯗꯣ-ꯀ꯭ꯂꯥꯁ ꯚꯦꯔꯤꯑꯦꯟꯇꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, :hoverꯅꯠꯠꯔꯒꯥ )꯫:focus
responsive ꯈꯟꯕ ꯌꯥꯕ false ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯦꯃꯒꯠꯀꯗꯕꯅꯤ ꯍꯥꯌꯕꯥ ꯇꯥꯀꯄꯥ ꯕꯨꯂꯦꯇꯤꯟ꯫
rfs ꯈꯟꯕ ꯌꯥꯕ false ꯑꯥꯔ.ꯑꯦꯐ.ꯑꯦꯁ.ꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯐ꯭ꯂꯨꯏꯗ ꯔꯤꯁ꯭ꯀꯦꯂꯤꯡ ꯇꯧꯕꯥ ꯉꯃꯍꯟꯅꯕꯥ ꯕꯨꯂꯦꯟ .
print ꯈꯟꯕ ꯌꯥꯕ false ꯄ꯭ꯔꯤꯟꯇ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯥ ꯃꯊꯧ ꯇꯥꯔꯕꯗꯤ ꯇꯥꯀꯄꯥ ꯕꯨꯂꯦꯇꯤꯟ꯫
rtl ꯈꯟꯕ ꯌꯥꯕ true ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯁꯤ RTLꯗꯥ ꯊꯃꯒꯗꯕꯅꯤ ꯍꯥꯌꯕꯥ ꯇꯥꯀꯄꯥ ꯕꯨꯂꯦꯇꯤꯟ꯫

ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯅꯥ ꯁꯟꯗꯣꯛꯅꯥ ꯇꯥꯀꯈꯤ꯫

ꯌꯨꯇꯤꯂꯤꯇꯤ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯄꯨꯝꯅꯃꯛ $utilitiesꯑꯩꯈꯣꯌꯒꯤ _utilities.scssꯁ꯭ꯇꯥꯏꯂꯁꯤꯠꯀꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ꯫ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯀꯥꯡꯂꯨꯞ ꯈꯨꯗꯤꯡꯃꯛ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯨꯝꯅꯥ ꯎꯕꯥ ꯐꯪꯏ:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤ ꯑꯥꯎꯠꯄꯨꯠ ꯇꯧꯔꯤ:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

ꯂꯟ ꯊꯨꯝ

ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯃꯍꯦꯛꯇꯒꯤꯗꯃꯛ ꯃꯊꯧ ꯇꯥꯕꯥ propertyꯀꯤ ꯑꯗꯨ ꯁꯦꯠ ꯇꯧꯒꯗꯕꯅꯤ, ꯑꯃꯁꯨꯡ ꯃꯁꯤꯗꯥ ꯆꯠꯅꯕꯥ ꯌꯥꯕꯥ CSS ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯃꯥ ꯌꯥꯑꯣꯒꯗꯕꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯁꯤ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯒꯤ ꯔꯨꯂꯁꯦꯇꯇꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯀꯤ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯄꯥ ꯃꯇꯃꯗꯥ class, ꯃꯁꯤꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯃꯤꯡ ꯑꯣꯏꯅꯥꯁꯨ ꯊꯕꯛ ꯇꯧꯏ꯫ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯁꯤ ꯈꯟꯅꯕꯤꯌꯨ text-decoration:

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

ꯑꯥꯎꯠꯄꯨꯠ: ꯱.

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

ꯚꯦꯜꯌꯨꯁꯤꯡ꯫

ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯃꯤꯡ ꯑꯃꯁꯨꯡ ꯔꯨꯂꯁꯤꯡꯗꯥ valuesꯑꯀꯛꯅꯕꯥ ꯑꯗꯨꯒꯤꯗꯃꯛ ꯀꯔꯝꯕꯥ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯒꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯇꯥꯛꯅꯕꯥ ꯀꯤ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ . propertyꯂꯤꯁ꯭ꯠ ꯅꯠꯠꯔꯒꯥ ꯃꯦꯞ ꯑꯃꯥ ꯑꯣꯏꯕꯥ ꯌꯥꯏ (ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯗꯥ ꯅꯠꯠꯔꯒꯥ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯃꯗꯥ ꯁꯦꯠ ꯇꯧꯕꯥ)꯫

ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯑꯣꯏꯅꯥ, text-decorationꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯅꯥ :

values: none underline line-through

ꯃꯦꯞ ꯑꯃꯥ ꯑꯣꯏꯅꯥ, opacityꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯅꯥ :

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)

ꯑꯩꯈꯣꯌꯒꯤ positionꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯑꯗꯨꯒꯨꯝꯅꯥ ꯂꯤꯁ꯭ꯠ ꯅꯠꯔꯒꯥ ꯃꯦꯞ ꯁꯦꯠ ꯇꯧꯕꯥ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯃꯥ ꯑꯣꯏꯅꯥ :

values: $position-values

ꯀ꯭ꯂꯥꯁ

classꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ CSSꯗꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯀ꯭ꯂꯥꯁ ꯄ꯭ꯔꯤꯐꯤꯛꯁ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯑꯣꯄꯁꯟ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯗꯒꯤ .opacity-*ꯍꯣꯡꯗꯣꯛꯅꯕꯥ .o-*:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

ꯑꯥꯎꯠꯄꯨꯠ: ꯱.

.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ꯫

css-varꯕꯨꯂꯦꯟ ꯑꯣꯄꯁꯟ ꯑꯗꯨ ꯁꯦꯠ ꯇꯧ ꯑꯃꯁꯨꯡ APIꯅꯥ ꯃꯍꯧꯁꯥꯒꯤ ꯔꯨꯂꯁꯤꯡꯒꯤ trueꯃꯍꯨꯠꯇꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯦꯂꯦꯛꯇꯔ ꯑꯗꯨꯒꯤꯗꯃꯛ ꯂꯣꯀꯦꯜ CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯒꯅꯤ꯫ property: valueꯑꯩꯈꯣꯌꯒꯤ .text-opacity-*ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯌꯦꯡꯕꯤꯌꯨ:

$utilities: (
  "text-opacity": (
    css-var: true,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

ꯑꯥꯎꯠꯄꯨꯠ: ꯱.

.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }

ꯂꯣꯀꯦꯜ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

local-varsꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯀꯤ ꯔꯨꯂꯁꯦꯇꯀꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯣꯀꯦꯜ CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯒꯗꯕꯥ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯥ ꯁ꯭ꯄꯦꯁꯤꯐꯥꯏ ꯇꯧꯅꯕꯥ ꯑꯣꯄꯁꯟ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯈꯉꯖꯤꯅꯕꯤꯌꯨ ꯃꯗꯨꯗꯤ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯔꯕꯥ CSS ꯔꯨꯂꯁꯤꯡꯗꯥ ꯂꯣꯀꯦꯜ CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯗꯨ ꯀꯟꯖ꯭ꯌꯨꯝ ꯇꯧꯅꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯊꯕꯛ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯩꯈꯣꯌꯒꯤ .bg-*ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯌꯦꯡꯕꯤꯌꯨ:

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

ꯑꯥꯎꯠꯄꯨꯠ: ꯱.

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

ꯔꯥꯖ꯭ꯌꯁꯤꯡꯅꯥ ꯑꯦꯟ.ꯗꯤ.ꯑꯦ

stateꯁ꯭ꯌꯨꯗꯣ-ꯀ꯭ꯂꯥꯁ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯣꯄꯁꯟ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯁ꯭ꯌꯨꯗꯣ-ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ :hoverꯑꯃꯁꯨꯡ :focus. ꯔꯥꯖ꯭ꯌꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯄꯤꯕꯥ ꯃꯇꯃꯗꯥ, ꯑꯗꯨꯒꯨꯝꯕꯥ ꯁ꯭ꯌꯨꯗꯣ-ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯤꯗꯃꯛ ꯀ꯭ꯂꯥꯁꯅꯦꯃꯁꯤꯡ ꯁꯦꯝꯃꯤ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯍꯣꯚꯔꯗꯥ ꯑꯣꯄꯦꯁꯤꯇꯤ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ, ꯍꯥꯄꯆꯤꯜꯂꯨ state: hoverꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯅꯥ .opacity-hover:hoverꯅꯍꯥꯛꯀꯤ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ CSS ꯑꯗꯨꯗꯥ ꯐꯪꯒꯅꯤ꯫

ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯄ꯭ꯁꯨꯗꯣ-ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯕꯔꯥ? ꯁ꯭ꯄꯦꯁ-ꯁꯦꯄꯥꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯔꯥꯖ꯭ꯌꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ: state: hover focus.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

ꯑꯥꯎꯠꯄꯨꯠ: ꯱.

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ꯫

ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯃꯔꯛꯇꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ) responsiveꯁꯦꯃꯒꯠꯅꯕꯥ ꯕꯨꯂꯦꯟ ꯍꯥꯄꯆꯤꯜꯂꯨ ..opacity-md-25

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

ꯑꯥꯎꯠꯄꯨꯠ: ꯱.

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

ꯄ꯭ꯔꯤꯟꯇ ꯇꯧꯕꯥ꯫

printꯑꯣꯄꯁꯟ ꯑꯁꯤ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯅꯥ ꯄ꯭ꯔꯤꯟꯇ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ@media print { ... } ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯁꯨ ꯁꯦꯃꯒꯅꯤ, ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯈꯛꯇꯃꯛ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

ꯑꯥꯎꯠꯄꯨꯠ: ꯱.

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

ꯃꯔꯨꯑꯣꯏꯕꯥ꯫

ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯅꯥ ꯁꯦꯃꯒꯠꯄꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯄꯨꯝꯅꯃꯛꯇꯥ !importantꯃꯈꯣꯌꯅꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤꯕꯥ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯥ ꯁꯣꯏꯗꯅꯥ ꯌꯥꯑꯣꯍꯜꯂꯤ꯫ $enable-important-utilitiesꯅꯍꯥꯛꯅꯥ ꯁꯦꯇꯤꯡ ꯑꯁꯤ ꯚꯦꯔꯤꯑꯦꯕꯜ (ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ true) ꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯇꯣꯒꯜ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯅꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ꯫

ꯍꯧꯖꯤꯛꯇꯤ ꯑꯗꯣꯝꯅꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯅꯥ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯈꯉꯂꯦ, ꯑꯗꯣꯃꯒꯤ ꯏꯁꯥꯒꯤ ꯀꯁ꯭ꯇꯝ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯀꯔꯝꯅꯥ ꯍꯥꯄꯆꯤꯅꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯒꯅꯤ ꯍꯥꯌꯕꯗꯨ ꯇꯃꯕꯤꯌꯨ꯫

ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯥ꯫

ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯀꯤ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯗꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯍꯦꯅꯕꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯚꯔꯐ꯭ꯂꯣ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯄꯥꯝꯂꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯇꯧꯕꯥ ꯌꯥꯏ:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ꯫

$utilitiesꯑꯅꯧꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯃꯦꯄꯇꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ map-merge. ꯑꯩꯈꯣꯌꯒꯤ ꯃꯊꯧ ꯇꯥꯕꯥ ꯁꯥꯁ ꯐꯥꯏꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ _utilities.scssꯑꯍꯥꯅꯕꯗꯥ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯁꯣꯏꯗꯅꯥ ꯇꯧꯕꯤꯌꯨ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ map-mergeꯅꯍꯥꯛꯀꯤ ꯑꯍꯦꯅꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯃꯐꯃꯁꯤꯗꯥ cursorꯚꯦꯜꯌꯨ ꯑꯍꯨꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯃꯥ ꯀꯔꯝꯅꯥ ꯍꯥꯄꯆꯤꯅꯒꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ꯫

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ꯫

ꯑꯃꯁꯨꯡ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡꯒꯥ $utilitiesꯂꯣꯌꯅꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯃꯦꯄꯇꯥ ꯂꯩꯔꯤꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ꯫ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯁꯤꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯚꯦꯜꯌꯨ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ꯫ ꯏꯅꯤꯁꯤꯑꯦꯜ ꯑꯃꯗꯒꯤ ꯍꯧꯒꯠꯂꯨ ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯔꯝꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯗꯨ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯄꯥꯝꯂꯤꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯇꯥꯀꯄꯤꯌꯨ꯫ ꯃꯐꯝ ꯑꯗꯨꯗꯒꯤ, ꯌꯨꯇꯤꯂꯤꯇꯤꯒꯤ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯦꯛꯁꯦꯁ ꯇꯧꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯅꯕꯥ ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯃꯦꯞ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯎ꯫map-getmap-mergewidthmap-merge"width"map-get

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ꯫

ꯍꯧꯖꯤꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯗꯕꯥ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯒꯤꯗꯃꯛ ꯅꯍꯥꯛꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, borderꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯍꯟꯅꯕꯥ:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

ꯃꯁꯤꯅꯥ ꯍꯧꯖꯤꯛ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ .borderꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤꯗꯃꯛꯇꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡ ꯁꯦꯃꯒꯅꯤ꯫ .border-0ꯅꯍꯥꯛꯅꯥ ꯁꯦꯝꯕꯥ CSS ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯒꯨꯝꯅꯥ ꯑꯣꯏꯒꯅꯤ:

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯃꯃꯤꯡ ꯍꯣꯡꯗꯣꯀꯄꯥ꯫

v4 ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯃꯥꯡꯈꯤꯕꯥ, ꯅꯠꯠꯔꯒꯥ ꯑꯇꯣꯞꯄꯥ ꯅꯦꯃꯤꯡ ꯀꯅꯚꯦꯟꯁꯟ ꯑꯃꯗꯥ ꯁꯤꯖꯤꯟꯅꯈꯤꯕꯥ? ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ API ꯑꯁꯤ ꯑꯄꯤꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯃꯒꯤ ꯔꯤꯖꯜꯇ ꯑꯗꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ class—ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, .ms-*ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯃꯃꯤꯡ ꯑꯔꯤꯕꯥ ꯑꯣꯏꯅꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ .ml-*:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯂꯧꯊꯣꯀꯄꯥ꯫

ꯒ꯭ꯔꯨꯞ ꯀꯤ ꯑꯗꯨ ꯁꯦꯠ ꯇꯧꯗꯨꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯃꯍꯦꯛꯇꯕꯨ nullꯂꯧꯊꯣꯀꯎ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯩꯈꯣꯌꯒꯤ widthꯌꯨꯇꯤꯂꯤꯇꯤ ꯄꯨꯝꯅꯃꯛ ꯂꯧꯊꯣꯛꯅꯕꯥ, ꯑꯃꯥ ꯁꯦꯝꯃꯨ $utilities map-mergeꯑꯃꯁꯨꯡ "width": nullꯃꯅꯨꯡꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

ꯑꯥꯔ.ꯇꯤ.ꯑꯦꯜ.ꯗꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯂꯧꯊꯣꯀꯄꯥ꯫

ꯑꯦꯖ ꯀꯦꯁ ꯈꯔꯅꯥ ꯑꯥꯔ.ꯇꯤ.ꯑꯦꯜ.ꯒꯤ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯇꯧꯕꯗꯥ ꯑꯋꯥꯕꯥ ꯑꯣꯏꯍꯜꯂꯤ , ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯑꯔꯕꯤꯛꯇꯥ ꯂꯥꯏꯟ ꯕ꯭ꯔꯦꯀꯁꯤꯡ꯫ rtlꯑꯁꯨꯝꯅꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯑꯣꯄꯁꯟ ꯑꯁꯤ ꯁꯦꯠ ꯇꯧꯗꯨꯅꯥ ꯑꯥꯔ.ꯇꯤ.ꯑꯦꯜ false.

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

ꯑꯥꯎꯠꯄꯨꯠ: ꯱.

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

ꯃꯁꯤꯅꯥ ꯑꯥꯔ.ꯇꯤ.ꯑꯦꯜ.ꯗꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯃꯠꯇꯥ ꯑꯥꯎꯠꯄꯨꯠ ꯇꯧꯗꯦ, ꯃꯁꯤꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯑꯥꯔ.ꯇꯤ.ꯑꯦꯜ.ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯀꯟꯠꯔꯣꯜ removeꯗꯥꯏꯔꯦꯛꯇꯣꯔꯤ .