@baloise/ds-styles 0.0.5-nightly.20240301

package/src/core/grid.sass

@@ -0,0 +1,477 @@
+@use "sass:math"
+
+.grid
+  flex-basis: 0
+  flex-grow: 1
+  flex-shrink: 1
+
+.col
+  display: block
+  flex-basis: 0
+  flex-grow: 1
+  flex-shrink: 1
+  padding: var(--bal-column-gap)
+  .grid.is-mobile > &.is-narrow
+    flex: none
+    width: unset
+  .grid.is-mobile > &.is-full
+    flex: none
+    width: 100%
+  .grid.is-mobile > &.is-three-quarters
+    flex: none
+    width: 75%
+  .grid.is-mobile > &.is-two-thirds
+    flex: none
+    width: 66.6666%
+  .grid.is-mobile > &.is-half
+    flex: none
+    width: 50%
+  .grid.is-mobile > &.is-one-third
+    flex: none
+    width: 33.3333%
+  .grid.is-mobile > &.is-one-quarter
+    flex: none
+    width: 25%
+  .grid.is-mobile > &.is-one-fifth
+    flex: none
+    width: 20%
+  .grid.is-mobile > &.is-two-fifths
+    flex: none
+    width: 40%
+  .grid.is-mobile > &.is-three-fifths
+    flex: none
+    width: 60%
+  .grid.is-mobile > &.is-four-fifths
+    flex: none
+    width: 80%
+  .grid.is-mobile > &.is-offset-three-quarters
+    +ltr-property("margin", 75%, false)
+  .grid.is-mobile > &.is-offset-two-thirds
+    +ltr-property("margin", 66.6666%, false)
+  .grid.is-mobile > &.is-offset-half
+    +ltr-property("margin", 50%, false)
+  .grid.is-mobile > &.is-offset-one-third
+    +ltr-property("margin", 33.3333%, false)
+  .grid.is-mobile > &.is-offset-one-quarter
+    +ltr-property("margin", 25%, false)
+  .grid.is-mobile > &.is-offset-one-fifth
+    +ltr-property("margin", 20%, false)
+  .grid.is-mobile > &.is-offset-two-fifths
+    +ltr-property("margin", 40%, false)
+  .grid.is-mobile > &.is-offset-three-fifths
+    +ltr-property("margin", 60%, false)
+  .grid.is-mobile > &.is-offset-four-fifths
+    +ltr-property("margin", 80%, false)
+  @for $i from 0 through 12
+    .grid.is-mobile > &.is-#{$i}
+      flex: none
+      width: percentage(math.div($i,12))
+    .grid.is-mobile > &.is-offset-#{$i}
+      +ltr-property("margin", percentage(math.div($i,12)), false)
+  +mobile
+    &.mobile\:is-narrow
+      flex: none
+      width: unset
+    &.mobile\:is-full
+      flex: none
+      width: 100%
+    &.mobile\:is-three-quarters
+      flex: none
+      width: 75%
+    &.mobile\:is-two-thirds
+      flex: none
+      width: 66.6666%
+    &.mobile\:is-half
+      flex: none
+      width: 50%
+    &.mobile\:is-one-third
+      flex: none
+      width: 33.3333%
+    &.mobile\:is-one-quarter
+      flex: none
+      width: 25%
+    &.mobile\:is-one-fifth
+      flex: none
+      width: 20%
+    &.mobile\:is-two-fifths
+      flex: none
+      width: 40%
+    &.mobile\:is-three-fifths
+      flex: none
+      width: 60%
+    &.mobile\:is-four-fifths
+      flex: none
+      width: 80%
+    &.mobile\:is-offset-three-quarters
+      +ltr-property("margin", 75%, false)
+    &.mobile\:is-offset-two-thirds
+      +ltr-property("margin", 66.6666%, false)
+    &.mobile\:is-offset-half
+      +ltr-property("margin", 50%, false)
+    &.mobile\:is-offset-one-third
+      +ltr-property("margin", 33.3333%, false)
+    &.mobile\:is-offset-one-quarter
+      +ltr-property("margin", 25%, false)
+    &.mobile\:is-offset-one-fifth
+      +ltr-property("margin", 20%, false)
+    &.mobile\:is-offset-two-fifths
+      +ltr-property("margin", 40%, false)
+    &.mobile\:is-offset-three-fifths
+      +ltr-property("margin", 60%, false)
+    &.mobile\-offset-four-fifths
+      +ltr-property("margin", 80%, false)
+    @for $i from 0 through 12
+      &.mobile\:is-#{$i}
+        flex: none
+        width: percentage(math.div($i,12))
+      &.mobile\:is-offset-#{$i}
+        +ltr-property("margin", percentage(math.div($i,12)), false)
+  +tablet
+    &.is-narrow,
+    &.tablet\:is-narrow
+      flex: none
+      width: unset
+    &.is-full,
+    &.tablet\:is-full
+      flex: none
+      width: 100%
+    &.is-three-quarters,
+    &.tablet\:is-three-quarters
+      flex: none
+      width: 75%
+    &.is-two-thirds,
+    &.tablet\:is-two-thirds
+      flex: none
+      width: 66.6666%
+    &.is-half,
+    &.tablet\:is-half
+      flex: none
+      width: 50%
+    &.is-one-third,
+    &.tablet\:is-one-third
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter,
+    &.tablet\:is-one-quarter
+      flex: none
+      width: 25%
+    &.is-one-fifth,
+    &.tablet\:is-one-fifth
+      flex: none
+      width: 20%
+    &.is-two-fifths,
+    &.tablet\:is-two-fifths
+      flex: none
+      width: 40%
+    &.is-three-fifths,
+    &.tablet\:is-three-fifths
+      flex: none
+      width: 60%
+    &.is-four-fifths,
+    &.tablet\:is-four-fifths
+      flex: none
+      width: 80%
+    &.is-offset-three-quarters,
+    &.tablet\:is-offset-three-quarters
+      +ltr-property("margin", 75%, false)
+    &.is-offset-two-thirds,
+    &.tablet\:is-offset-two-thirds
+      +ltr-property("margin", 66.6666%, false)
+    &.is-offset-half,
+    &.tablet\:is-offset-half
+      +ltr-property("margin", 50%, false)
+    &.is-offset-one-third,
+    &.tablet\:is-offset-one-third
+      +ltr-property("margin", 33.3333%, false)
+    &.is-offset-one-quarter,
+    &.tablet\:is-offset-one-quarter
+      +ltr-property("margin", 25%, false)
+    &.is-offset-one-fifth,
+    &.tablet\:is-offset-one-fifth
+      +ltr-property("margin", 20%, false)
+    &.is-offset-two-fifths,
+    &.tablet\:is-offset-two-fifths
+      +ltr-property("margin", 40%, false)
+    &.is-offset-three-fifths,
+    &.tablet\:is-offset-three-fifths
+      +ltr-property("margin", 60%, false)
+    &.is-offset-four-fifths,
+    &.tablet\:is-offset-four-fifths
+      +ltr-property("margin", 80%, false)
+    @for $i from 0 through 12
+      &.is-#{$i},
+      &.tablet\:is-#{$i}
+        flex: none
+        width: percentage(math.div($i,12))
+      &.is-offset-#{$i},
+      &.tablet\:is-offset-#{$i}
+        +ltr-property("margin", percentage(math.div($i,12)), false)
+  +touch
+    &.touch\:is-narrow
+      flex: none
+      width: unset
+    &.touch\:is-full
+      flex: none
+      width: 100%
+    &.touch\:is-three-quarters
+      flex: none
+      width: 75%
+    &.touch\:is-two-thirds
+      flex: none
+      width: 66.6666%
+    &.touch\:is-half
+      flex: none
+      width: 50%
+    &.touch\:is-one-third
+      flex: none
+      width: 33.3333%
+    &.touch\:is-one-quarter
+      flex: none
+      width: 25%
+    &.touch\:is-one-fifth
+      flex: none
+      width: 20%
+    &.touch\:is-two-fifths
+      flex: none
+      width: 40%
+    &.touch\:is-three-fifths
+      flex: none
+      width: 60%
+    &.touch\:is-four-fifths
+      flex: none
+      width: 80%
+    &.touch\:is-offset-three-quarters
+      +ltr-property("margin", 75%, false)
+    &.touch\:is-offset-two-thirds
+      +ltr-property("margin", 66.6666%, false)
+    &.touch\:is-offset-half
+      +ltr-property("margin", 50%, false)
+    &.touch\:is-offset-one-third
+      +ltr-property("margin", 33.3333%, false)
+    &.touch\:is-offset-one-quarter
+      +ltr-property("margin", 25%, false)
+    &.touch\:is-offset-one-fifth
+      +ltr-property("margin", 20%, false)
+    &.touch\:is-offset-two-fifths
+      +ltr-property("margin", 40%, false)
+    &.touch\:is-offset-three-fifths
+      +ltr-property("margin", 60%, false)
+    &.touch\:is-offset-four-fifths
+      +ltr-property("margin", 80%, false)
+    @for $i from 0 through 12
+      &.touch\:is-#{$i}
+        flex: none
+        width: percentage(math.div($i,12))
+      &.touch\:is-offset-#{$i}
+        +ltr-property("margin", percentage(math.div($i,12)), false)
+  +desktop
+    &.desktop\:is-narrow
+      flex: none
+      width: unset
+    &.desktop\:is-full
+      flex: none
+      width: 100%
+    &.desktop\:is-three-quarters
+      flex: none
+      width: 75%
+    &.desktop\:is-two-thirds
+      flex: none
+      width: 66.6666%
+    &.desktop\:is-half
+      flex: none
+      width: 50%
+    &.desktop\:is-one-third
+      flex: none
+      width: 33.3333%
+    &.desktop\:is-one-quarter
+      flex: none
+      width: 25%
+    &.desktop\:is-one-fifth
+      flex: none
+      width: 20%
+    &.desktop\:is-two-fifths
+      flex: none
+      width: 40%
+    &.desktop\:is-three-fifths
+      flex: none
+      width: 60%
+    &.desktop\:is-four-fifths
+      flex: none
+      width: 80%
+    &.desktop\:is-offset-three-quarters
+      +ltr-property("margin", 75%, false)
+    &.desktop\:is-offset-two-thirds
+      +ltr-property("margin", 66.6666%, false)
+    &.desktop\:is-offset-half
+      +ltr-property("margin", 50%, false)
+    &.desktop\:is-offset-one-third
+      +ltr-property("margin", 33.3333%, false)
+    &.desktop\:is-offset-one-quarter
+      +ltr-property("margin", 25%, false)
+    &.desktop\:is-offset-one-fifth
+      +ltr-property("margin", 20%, false)
+    &.desktop\:is-offset-two-fifths
+      +ltr-property("margin", 40%, false)
+    &.desktop\:is-offset-three-fifths
+      +ltr-property("margin", 60%, false)
+    &.desktop\:is-offset-four-fifths
+      +ltr-property("margin", 80%, false)
+    @for $i from 0 through 12
+      &.desktop\:is-#{$i}
+        flex: none
+        width: percentage(math.div($i,12))
+      &.desktop\:is-offset-#{$i}
+        +ltr-property("margin", percentage(math.div($i,12)), false)
+  +widescreen
+    &.widescreen\:is-narrow
+      flex: none
+      width: unset
+    &.widescreen\:is-full
+      flex: none
+      width: 100%
+    &.widescreen\:is-three-quarters
+      flex: none
+      width: 75%
+    &.widescreen\:is-two-thirds
+      flex: none
+      width: 66.6666%
+    &.widescreen\:is-half
+      flex: none
+      width: 50%
+    &.widescreen\:is-one-third
+      flex: none
+      width: 33.3333%
+    &.widescreen\:is-one-quarter
+      flex: none
+      width: 25%
+    &.widescreen\:is-one-fifth
+      flex: none
+      width: 20%
+    &.widescreen\:is-two-fifths
+      flex: none
+      width: 40%
+    &.widescreen\:is-three-fifths
+      flex: none
+      width: 60%
+    &.widescreen\:is-four-fifths
+      flex: none
+      width: 80%
+    &.widescreen\:is-offset-three-quarters
+      +ltr-property("margin", 75%, false)
+    &.widescreen\:is-offset-two-thirds
+      +ltr-property("margin", 66.6666%, false)
+    &.widescreen\:is-offset-half
+      +ltr-property("margin", 50%, false)
+    &.widescreen\:is-offset-one-third
+      +ltr-property("margin", 33.3333%, false)
+    &.widescreen\:is-offset-one-quarter
+      +ltr-property("margin", 25%, false)
+    &.widescreen\:is-offset-one-fifth
+      +ltr-property("margin", 20%, false)
+    &.widescreen\:is-offset-two-fifths
+      +ltr-property("margin", 40%, false)
+    &.widescreen\:is-offset-three-fifths
+      +ltr-property("margin", 60%, false)
+    &.widescreen\:is-offset-four-fifths
+      +ltr-property("margin", 80%, false)
+    @for $i from 0 through 12
+      &.widescreen\:is-#{$i}
+        flex: none
+        width: percentage(math.div($i,12))
+      &.widescreen\:is-offset-#{$i}
+        +ltr-property("margin", percentage(math.div($i,12)), false)
+  +fullhd
+    &.fullhd\:is-narrow
+      flex: none
+      width: unset
+    &.fullhd\:is-full
+      flex: none
+      width: 100%
+    &.fullhd\:is-three-quarters
+      flex: none
+      width: 75%
+    &.fullhd\:is-two-thirds
+      flex: none
+      width: 66.6666%
+    &.fullhd\:is-half
+      flex: none
+      width: 50%
+    &.fullhd\:is-one-third
+      flex: none
+      width: 33.3333%
+    &.fullhd\:is-one-quarter
+      flex: none
+      width: 25%
+    &.fullhd\:is-one-fifth
+      flex: none
+      width: 20%
+    &.fullhd\:is-two-fifths
+      flex: none
+      width: 40%
+    &.fullhd\:is-three-fifths
+      flex: none
+      width: 60%
+    &.fullhd\:is-four-fifths
+      flex: none
+      width: 80%
+    &.fullhd\:is-offset-three-quarters
+      +ltr-property("margin", 75%, false)
+    &.fullhd\:is-offset-two-thirds
+      +ltr-property("margin", 66.6666%, false)
+    &.fullhd\:is-offset-half
+      +ltr-property("margin", 50%, false)
+    &.fullhd\:is-offset-one-third
+      +ltr-property("margin", 33.3333%, false)
+    &.fullhd\:is-offset-one-quarter
+      +ltr-property("margin", 25%, false)
+    &.fullhd\:is-offset-one-fifth
+      +ltr-property("margin", 20%, false)
+    &.fullhd\:is-offset-two-fifths
+      +ltr-property("margin", 40%, false)
+    &.fullhd\:is-offset-three-fifths
+      +ltr-property("margin", 60%, false)
+    &.fullhd\:is-offset-four-fifths
+      +ltr-property("margin", 80%, false)
+    @for $i from 0 through 12
+      &.fullhd\:is-#{$i}
+        flex: none
+        width: percentage(math.div($i,12))
+      &.fullhd\:is-offset-#{$i}
+        +ltr-property("margin", percentage(math.div($i,12)), false)
+
+.grid
+  +ltr-property("margin", (calc(var(--bal-column-gap) * -1)), false)
+  +ltr-property("margin", (calc(var(--bal-column-gap) * -1)))
+  margin-top: (calc(var(--bal-column-gap) * -1))
+  &:last-child
+    margin-bottom: (calc(var(--bal-column-gap) * -1))
+  &:not(:last-child)
+    margin-bottom: calc(1.5rem - #{var(--bal-column-gap)})
+  // Modifiers
+  &.is-centered
+    justify-content: center
+  &.is-gapless
+    +ltr-property("margin", 0, false)
+    +ltr-property("margin", 0)
+    margin-top: 0
+    & > .col
+      margin: 0
+      padding: 0 !important
+    &:not(:last-child)
+      margin-bottom: 1.5rem
+    &:last-child
+      margin-bottom: 0
+  &.is-mobile
+    display: flex
+  &.is-multiline
+    flex-wrap: wrap
+  &.is-vcentered
+    align-items: center
+  // Responsiveness
+  +tablet
+    &:not(.is-desktop)
+      display: flex
+  +desktop
+    // Modifiers
+    &.is-desktop
+      display: flex

package/src/core/link.sass

@@ -0,0 +1,64 @@
+a.link:not(.button),
+a.is-link:not(.button)
+  color: var(--bal-link-color)
+  font-weight: var(--bal-link-font-weight)
+  text-decoration: var(--bal-link-text-decoration)
+  text-underline-offset: var(--bal-link-text-underline-offset)
+  text-decoration-thickness: var(--bal-link-text-decoration-thickness)
+  border-radius: var(--bal-link-radius)
+  +fillSvg(var(--bal-link-color))
+
+  &:hover
+    text-decoration: var(--bal-link-text-decoration)
+    text-decoration-thickness: var(--bal-link-text-decoration-thickness)
+    text-underline-offset: var(--bal-link-text-underline-offset)
+    color: var(--bal-link-color-hover)
+    +fillSvg(var(--bal-link-color-hover))
+
+  &:focus-visible
+    @extend %focus-shadow
+
+  &:active
+    text-decoration: var(--bal-link-text-decoration)
+    text-decoration-thickness: var(--bal-link-text-decoration-thickness)
+    text-underline-offset: var(--bal-link-text-underline-offset)
+    color: var(--bal-link-color-active)
+    +fillSvg(var(--bal-link-color-active))
+
+  &.is-inverted
+    color: var(--bal-link-inverted-color)
+    +fillSvg(var(--bal-link-inverted-color))
+
+    &:hover
+      text-decoration: var(--bal-link-text-decoration)
+      text-decoration-thickness: var(--bal-link-text-decoration-thickness)
+      text-underline-offset: var(--bal-link-text-underline-offset)
+      color: var(--bal-link-inverted-color-hover)
+      +fillSvg(var(--bal-link-inverted-color-hover))
+
+    &:focus-visible
+      @extend %focus-inverted-shadow
+
+    &:active
+      text-decoration: var(--bal-link-text-decoration)
+      text-decoration-thickness: var(--bal-link-text-decoration-thickness)
+      text-underline-offset: var(--bal-link-text-underline-offset)
+      color: var(--bal-link-inverted-color-active)
+      +fillSvg(var(--bal-link-inverted-color-active))
+
+  &.is-light
+    text-decoration: var(--bal-link-inverted-light-text-decoration)
+    font-weight: var(--bal-link-inverted-light-font-weight)
+    color: var(--bal-link-inverted-color)
+    +fillSvg(var(--bal-link-inverted-color))
+
+    &:hover
+      color: var(--bal-link-inverted-color-hover)
+      +fillSvg(var(--bal-link-inverted-color-hover))
+
+    &:focus-visible
+      @extend %focus-inverted-shadow
+
+    &:active
+      color: var(--bal-link-inverted-color-active)
+      +fillSvg(var(--bal-link-inverted-color-active))

package/src/core/list.sass

@@ -0,0 +1,85 @@
+ol.list,
+ul.list,
+ol.is-list,
+ul.is-list
+  margin-bottom: 1.5rem
+  margin-left: 2rem
+  +desktop
+    margin-bottom: 2rem
+  li
+    hyphens: auto
+    margin-bottom: 1rem
+    &:last-child
+      margin-bottom: 0
+    &::marker
+      color: var(--bal-list-marker-color)
+  &.has-bullet-circle li
+    &::marker
+      content: none
+    &::before
+      content: ''
+      position: absolute
+      display: inline-block
+      width: 0.75rem
+      height: 0.75rem
+      font-size: 0.75rem
+      margin-left: -1.25rem
+      margin-top: 0.313rem
+      border-radius: var(--bal-list-bullet-radius)
+      background: var(--bal-list-bullet-background)
+  &.has-bullet-circle
+    &.has-bullet-red li::before,
+    li.has-bullet-red::before
+      background: var(--bal-list-bullet-background-red)
+    &.has-bullet-yellow li::before,
+    li.has-bullet-yellow::before
+      background: var(--bal-list-bullet-background-yellow)
+    &.has-bullet-green li::before,
+    li.has-bullet-green::before
+      background: var(--bal-list-bullet-background-green)
+    &.has-bullet-purple li::before,
+    li.has-bullet-purple::before
+      background: var(--bal-list-bullet-background-purple)
+  &.has-bullets,
+  &.has-bullet-check,
+  &.has-bullet-close
+    list-style-type: none !important
+    li
+      list-style-type: none !important
+      &::marker
+        content: none !important
+      &::before
+        content: ''
+        position: absolute
+        display: inline-block
+        width: 0.875rem
+        height: 0.875rem
+        font-size: 0.875rem
+        margin-left: -1.375rem
+        margin-top: 0.313rem
+  &.has-bullet-check li::before,
+  li.has-bullet-check::before
+    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM4ODU0XzM0MjU0OSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEzLjYzNzEgMS4xOTc5MkMxNC4wNjI4IDEuNTQ5NzQgMTQuMTIyOCAyLjE4MDA2IDEzLjc3MDkgMi42MDU3OUw1LjczMDkgMTIuMzM1TDUuNzI4NDggMTIuMzM3OUM1LjU0NTYgMTIuNTU3NSA1LjMxNjA4IDEyLjczMzYgNS4wNTY2MSAxMi44NTM0QzQuNzk3MTMgMTIuOTczMSA0LjUxNDIzIDEzLjAzMzYgNC4yMjg0OCAxMy4wMzAySDQuMjI3NThDMy45MzcxNSAxMy4wMjY2IDMuNjUxMzEgMTIuOTU3MyAzLjM5MTUyIDEyLjgyNzRDMy4xMzI2IDEyLjY5NzkgMi45MDYyNiAxMi41MTE3IDIuNzI5MzcgMTIuMjgyNkMyLjcyODc3IDEyLjI4MTggMi43MjgxOCAxMi4yODEgMi43Mjc1OCAxMi4yODAyTDAuMjEwNjk0IDkuMDQ0MjZDLTAuMTI4Mzc2IDguNjA4MzEgLTAuMDQ5ODQyIDcuOTgwMDMgMC4zODYxMDUgNy42NDA5NkMwLjgyMjA1MyA3LjMwMTg5IDEuNDUwMzMgNy4zODA0MyAxLjc4OTQgNy44MTYzOEw0LjI1Mjk3IDEwLjk4MzhMMTIuMjI5MiAxLjMzMTc2QzEyLjU4MSAwLjkwNjAzNSAxMy4yMTE0IDAuODQ2MTEzIDEzLjYzNzEgMS4xOTc5MloiIGZpbGw9IiMwMDBENkUiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8zODg1NF8zNDI1NDkiPgo8cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==) no-repeat left top
+  &.has-bullet-close li::before,
+  li.has-bullet-close::before
+    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM4ODU0XzM0MjU5OSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEuNzA3MTEgMC4yOTI4OTNDMS4zMTY1OCAtMC4wOTc2MzEgMC42ODM0MTcgLTAuMDk3NjMxIDAuMjkyODkzIDAuMjkyODkzQy0wLjA5NzYzMSAwLjY4MzQxNyAtMC4wOTc2MzEgMS4zMTY1OCAwLjI5Mjg5MyAxLjcwNzExTDUuNTg1NzkgN0wwLjI5Mjg5MyAxMi4yOTI5Qy0wLjA5NzYzMSAxMi42ODM0IC0wLjA5NzYzMSAxMy4zMTY2IDAuMjkyODkzIDEzLjcwNzFDMC42ODM0MTcgMTQuMDk3NiAxLjMxNjU4IDE0LjA5NzYgMS43MDcxMSAxMy43MDcxTDcgOC40MTQyMUwxMi4yOTI5IDEzLjcwNzFDMTIuNjgzNCAxNC4wOTc2IDEzLjMxNjYgMTQuMDk3NiAxMy43MDcxIDEzLjcwNzFDMTQuMDk3NiAxMy4zMTY2IDE0LjA5NzYgMTIuNjgzNCAxMy43MDcxIDEyLjI5MjlMOC40MTQyMSA3TDEzLjcwNzEgMS43MDcxMUMxNC4wOTc2IDEuMzE2NTggMTQuMDk3NiAwLjY4MzQxNyAxMy43MDcxIDAuMjkyODkzQzEzLjMxNjYgLTAuMDk3NjMxIDEyLjY4MzQgLTAuMDk3NjMxIDEyLjI5MjkgMC4yOTI4OTNMNyA1LjU4NTc5TDEuNzA3MTEgMC4yOTI4OTNaIiBmaWxsPSIjMDAwRDZFIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMzg4NTRfMzQyNTk5Ij4KPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=) no-repeat left top
+  &.has-bullet-check.has-bullet-green li::before,
+  li.has-bullet-check.has-bullet-green::before
+    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI1MDdfMTkzNDYxKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTMuNjM3MSAxLjE5NzkyQzE0LjA2MjggMS41NDk3NCAxNC4xMjI4IDIuMTgwMDYgMTMuNzcwOSAyLjYwNTc5TDUuNzMwOSAxMi4zMzVMNS43Mjg0OCAxMi4zMzc5QzUuNTQ1NiAxMi41NTc1IDUuMzE2MDggMTIuNzMzNiA1LjA1NjYxIDEyLjg1MzRDNC43OTcxMyAxMi45NzMxIDQuNTE0MjMgMTMuMDMzNiA0LjIyODQ4IDEzLjAzMDJDMy45MzgwNSAxMy4wMjY2IDMuNjUxMzEgMTIuOTU3MyAzLjM5MTUyIDEyLjgyNzRDMy4xMzI2IDEyLjY5NzkgMi45MDYyNiAxMi41MTE3IDIuNzI5MzcgMTIuMjgyNkMyLjcyODc3IDEyLjI4MTggMi43MjgxOCAxMi4yODEgMi43Mjc1OCAxMi4yODAyTDAuMjEwNjk0IDkuMDQ0MjZDLTAuMTI4Mzc2IDguNjA4MzEgLTAuMDQ5ODQyIDcuOTgwMDMgMC4zODYxMDUgNy42NDA5NkMwLjgyMjA1MyA3LjMwMTg5IDEuNDUwMzMgNy4zODA0MyAxLjc4OTQgNy44MTYzOEw0LjI1Mjk3IDEwLjk4MzhMMTIuMjI5MiAxLjMzMTc2QzEyLjU4MSAwLjkwNjAzNSAxMy4yMTE0IDAuODQ2MTEzIDEzLjYzNzEgMS4xOTc5MloiIGZpbGw9IiMwMEIyOEYiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNTA3XzE5MzQ2MSI+CjxyZWN0IHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K) no-repeat left top
+  &.has-bullet-close.has-bullet-red li::before,
+  li.has-bullet-close.has-bullet-red::before
+    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI1MDdfMTkzNDY1KSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS43MDcxMSAwLjI5Mjg5M0MxLjMxNjU4IC0wLjA5NzYzMSAwLjY4MzQxNyAtMC4wOTc2MzEgMC4yOTI4OTMgMC4yOTI4OTNDLTAuMDk3NjMxIDAuNjgzNDE3IC0wLjA5NzYzMSAxLjMxNjU4IDAuMjkyODkzIDEuNzA3MTFMNS41ODU3OSA3TDAuMjkyODkzIDEyLjI5MjlDLTAuMDk3NjMxIDEyLjY4MzQgLTAuMDk3NjMxIDEzLjMxNjYgMC4yOTI4OTMgMTMuNzA3MUMwLjY4MzQxNyAxNC4wOTc2IDEuMzE2NTggMTQuMDk3NiAxLjcwNzExIDEzLjcwNzFMNyA4LjQxNDIxTDEyLjI5MjkgMTMuNzA3MUMxMi42ODM0IDE0LjA5NzYgMTMuMzE2NiAxNC4wOTc2IDEzLjcwNzEgMTMuNzA3MUMxNC4wOTc2IDEzLjMxNjYgMTQuMDk3NiAxMi42ODM0IDEzLjcwNzEgMTIuMjkyOUw4LjQxNDIxIDdMMTMuNzA3MSAxLjcwNzExQzE0LjA5NzYgMS4zMTY1OCAxNC4wOTc2IDAuNjgzNDE3IDEzLjcwNzEgMC4yOTI4OTNDMTMuMzE2NiAtMC4wOTc2MzEgMTIuNjgzNCAtMC4wOTc2MzEgMTIuMjkyOSAwLjI5Mjg5M0w3IDUuNTg1NzlMMS43MDcxMSAwLjI5Mjg5M1oiIGZpbGw9IiNEOTMwNEMiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNTA3XzE5MzQ2NSI+CjxyZWN0IHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K) no-repeat left top
+  &.is-inverted
+    li,
+    li::marker
+      color: var(--bal-list-marker-inverted-color)
+    &.has-bullet-check li::before,
+    li.has-bullet-check::before
+      background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM4ODU0XzM0MjU0OSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEzLjYzNzEgMS4xOTc5MkMxNC4wNjI4IDEuNTQ5NzQgMTQuMTIyOCAyLjE4MDA2IDEzLjc3MDkgMi42MDU3OUw1LjczMDkgMTIuMzM1TDUuNzI4NDggMTIuMzM3OUM1LjU0NTYgMTIuNTU3NSA1LjMxNjA4IDEyLjczMzYgNS4wNTY2MSAxMi44NTM0QzQuNzk3MTMgMTIuOTczMSA0LjUxNDIzIDEzLjAzMzYgNC4yMjg0OCAxMy4wMzAySDQuMjI3NThDMy45MzcxNSAxMy4wMjY2IDMuNjUxMzEgMTIuOTU3MyAzLjM5MTUyIDEyLjgyNzRDMy4xMzI2IDEyLjY5NzkgMi45MDYyNiAxMi41MTE3IDIuNzI5MzcgMTIuMjgyNkMyLjcyODc3IDEyLjI4MTggMi43MjgxOCAxMi4yODEgMi43Mjc1OCAxMi4yODAyTDAuMjEwNjk0IDkuMDQ0MjZDLTAuMTI4Mzc2IDguNjA4MzEgLTAuMDQ5ODQyIDcuOTgwMDMgMC4zODYxMDUgNy42NDA5NkMwLjgyMjA1MyA3LjMwMTg5IDEuNDUwMzMgNy4zODA0MyAxLjc4OTQgNy44MTYzOEw0LjI1Mjk3IDEwLjk4MzhMMTIuMjI5MiAxLjMzMTc2QzEyLjU4MSAwLjkwNjAzNSAxMy4yMTE0IDAuODQ2MTEzIDEzLjYzNzEgMS4xOTc5MloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMzg4NTRfMzQyNTQ5Ij4KPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=) no-repeat left top
+    &.has-bullet-close li::before,
+    li.has-bullet-close::before
+      background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM4ODU0XzM0MjU5OSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEuNzA3MTEgMC4yOTI4OTNDMS4zMTY1OCAtMC4wOTc2MzEgMC42ODM0MTcgLTAuMDk3NjMxIDAuMjkyODkzIDAuMjkyODkzQy0wLjA5NzYzMSAwLjY4MzQxNyAtMC4wOTc2MzEgMS4zMTY1OCAwLjI5Mjg5MyAxLjcwNzExTDUuNTg1NzkgN0wwLjI5Mjg5MyAxMi4yOTI5Qy0wLjA5NzYzMSAxMi42ODM0IC0wLjA5NzYzMSAxMy4zMTY2IDAuMjkyODkzIDEzLjcwNzFDMC42ODM0MTcgMTQuMDk3NiAxLjMxNjU4IDE0LjA5NzYgMS43MDcxMSAxMy43MDcxTDcgOC40MTQyMUwxMi4yOTI5IDEzLjcwNzFDMTIuNjgzNCAxNC4wOTc2IDEzLjMxNjYgMTQuMDk3NiAxMy43MDcxIDEzLjcwNzFDMTQuMDk3NiAxMy4zMTY2IDE0LjA5NzYgMTIuNjgzNCAxMy43MDcxIDEyLjI5MjlMOC40MTQyMSA3TDEzLjcwNzEgMS43MDcxMUMxNC4wOTc2IDEuMzE2NTggMTQuMDk3NiAwLjY4MzQxNyAxMy43MDcxIDAuMjkyODkzQzEzLjMxNjYgLTAuMDk3NjMxIDEyLjY4MzQgLTAuMDk3NjMxIDEyLjI5MjkgMC4yOTI4OTNMNyA1LjU4NTc5TDEuNzA3MTEgMC4yOTI4OTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM4ODU0XzM0MjU5OSI+CjxyZWN0IHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K) no-repeat left top
+
+ul.list:not(.has-bullet-circle):not(.has-bullet-check) li,
+ul.is-list:not(.has-bullet-circle):not(.has-bullet-check) li
+  list-style: disc