@itcase/ui 1.8.103 → 1.8.105

package/dist/css/styles/bundle.css

@@ -0,0 +1,1594 @@
+.align-items {
+  @each $val in stretch, flex-start, flex-end, center, baseline, auto {
+    &_(val) {
+      align-items: $(val);
+    }
+  }
+}
+.align-self {
+  @each $val in stretch, flex-start, flex-end, center, baseline, auto {
+    &_$(val) {
+      align-self: $(val);
+    }
+  }
+}
+.align {
+  &_center {
+    margin: 0 auto;
+  }
+}
+%align-horizontal-reverse {
+  display: flex;
+  flex-direction: row-reverse;
+}
+.align {
+  &_horizontal-reverse {
+    display: flex;
+    flex-direction: row-reverse;
+    @extend %align-horizontal-reverse;
+    &-top {
+      &-left {
+        align-items: flex-start;
+        @extend %align-horizontal-reverse;
+      }
+      &-center {
+        text-align: center;
+        justify-content: center;
+        align-items: flex-start;
+        @extend %align-horizontal-reverse;
+      }
+      &-right {
+        text-align: right;
+        justify-content: flex-end;
+        align-items: flex-start;
+        @extend %align-horizontal-reverse;
+      }
+    }
+    &-left {
+      align-items: center;
+      @extend %align-horizontal-reverse;
+    }
+    &-center {
+      text-align: center;
+      justify-content: center;
+      align-items: center;
+      @extend %align-horizontal-reverse;
+    }
+    &-right {
+      text-align: right;
+      justify-content: flex-end;
+      align-items: center;
+      @extend %align-horizontal-reverse;
+    }
+    &-bottom {
+      &-left {
+        flex-direction: row;
+        align-items: flex-end;
+        @extend %align-horizontal-reverse;
+      }
+      &-center {
+        text-align: center;
+        justify-content: center;
+        align-items: flex-end;
+        @extend %align-horizontal-reverse;
+      }
+      &-right {
+        text-align: right;
+        justify-content: flex-end;
+        align-items: flex-end;
+        @extend %align-horizontal-reverse;
+      }
+    }
+  }
+}
+%align-horizontal {
+  display: flex;
+  flex-direction: row;
+}
+.align {
+  &_horizontal {
+    &_top {
+      align-items: flex-start;
+      @extend %align-horizontal;
+      &-left {
+        align-items: flex-start;
+        @extend %align-horizontal;
+      }
+      &-center {
+        text-align: center;
+        justify-content: center;
+        align-items: flex-start;
+        @extend %align-horizontal;
+      }
+      &-right {
+        text-align: right;
+        justify-content: flex-end;
+        align-items: flex-start;
+        @extend %align-horizontal;
+      }
+    }
+    &_bottom {
+      align-items: flex-end;
+      @extend %align-horizontal;
+      &-left {
+        align-items: flex-end;
+        @extend %align-horizontal;
+      }
+      &-center {
+        text-align: center;
+        justify-content: center;
+        align-items: flex-end;
+        @extend %align-horizontal;
+      }
+      &-right {
+        text-align: right;
+        justify-content: flex-end;
+        align-items: flex-end;
+        @extend %align-horizontal;
+      }
+    }
+    &-left {
+      align-items: center;
+      @extend %align-horizontal;
+    }
+    &-center {
+      text-align: center;
+      justify-content: center;
+      align-items: center;
+      @extend %align-horizontal;
+    }
+    &-right {
+      text-align: right;
+      justify-content: flex-end;
+      align-items: center;
+      @extend %align-horizontal;
+    }
+  }
+}
+%align-vertical-reverse {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.align {
+  &_vertical-reverse {
+    &-top {
+      &-left {
+        @extend %align-horizontal-reverse;
+        align-items: flex-start;
+      }
+      &-center {
+        @extend %align-horizontal-reverse;
+        text-align: center;
+        align-items: center;
+      }
+      &-right {
+        @extend %align-horizontal-reverse;
+        text-align: right;
+        align-items: flex-end;
+      }
+    }
+    &-left {
+      @extend %align-horizontal-reverse;
+      justify-content: center;
+      align-items: flex-start;
+    }
+    &-center {
+      @extend %align-horizontal-reverse;
+      text-align: center;
+      justify-content: center;
+      align-items: center;
+    }
+    &-right {
+      @extend %align-horizontal-reverse;
+      text-align: right;
+      justify-content: center;
+      align-items: flex-end;
+    }
+    &-bottom {
+      &-left {
+        @extend %align-horizontal-reverse;
+        justify-content: flex-end;
+        align-items: flex-start;
+      }
+      &-center {
+        @extend %align-horizontal-reverse;
+        text-align: center;
+        justify-content: flex-end;
+        align-items: center;
+      }
+      &-right {
+        @extend %align-horizontal-reverse;
+        text-align: right;
+        justify-content: flex-end;
+        align-items: flex-end;
+      }
+    }
+  }
+}
+%align-vertical {
+  display: flex;
+  flex-direction: column;
+}
+.align {
+  &_vertical {
+    &-top {
+      &-left {
+        align-items: flex-start;
+        @extend %align-vertical;
+      }
+      &-center {
+        text-align: center;
+        align-items: center;
+        @extend %align-vertical;
+      }
+      &-right {
+        text-align: right;
+        align-items: flex-end;
+        @extend %align-vertical;
+      }
+    }
+    &-left {
+      justify-content: center;
+      align-items: flex-start;
+      @extend %align-vertical;
+    }
+    &-center {
+      text-align: center;
+      justify-content: center;
+      align-items: center;
+      @extend %align-vertical;
+    }
+    &-right {
+      text-align: right;
+      justify-content: center;
+      align-items: flex-end;
+      @extend %align-vertical;
+    }
+    &-bottom {
+      &-left {
+        justify-content: flex-end;
+        align-items: flex-start;
+        @extend %align-vertical;
+      }
+      &-center {
+        text-align: center;
+        justify-content: flex-end;
+        align-items: center;
+        @extend %align-vertical;
+      }
+      &-right {
+        text-align: right;
+        justify-content: flex-end;
+        align-items: flex-end;
+        @extend %align-vertical;
+      }
+    }
+  }
+}
+.alignment {
+  &_top {
+    &-left {
+      position: absolute;
+      right: 100%;
+      bottom: 100%;
+    }
+    &-center {
+      position: absolute;
+      left: 50%;
+      bottom: 100%;
+    }
+    &-right {
+      position: absolute;
+      left: 100%;
+      bottom: 100%;
+    }
+  }
+  &_bottom {
+    &-left {
+      position: absolute;
+      top: 100%;
+      right: 100%;
+    }
+    &-center {
+      position: absolute;
+      left: 50%;
+      top: 100%;
+    }
+    &-right {
+      position: absolute;
+      left: 100%;
+      top: 100%;
+    }
+  }
+  &_left-center {
+    position: absolute;
+    top: 50%;
+    right: 100%;
+  }
+  &_right-center {
+    position: absolute;
+    left: 100%;
+    top: 50%;
+  }
+}
+.blur {
+  @each $val in 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85,
+    90, 95, 100 {
+    &_$(val) {
+      /* stylelint-disable-next-line prettier/prettier */
+      backdrop-filter: blur($(val)px);
+    }
+  }
+}
+.border-color,
+button.border-color {
+  &_none {
+    border-width: 1px;
+    border-color: transparent;
+    border-style: solid;
+  }
+  @each $type in accent, primary, secondary, surface, error, warning, success,
+    danger, info, disabled {
+    @each $color in primary, secondary, tertiary, quaternary {
+      &_$(type) {
+        &-border {
+          &-$(color) {
+            border-width: 1px;
+            border-color: var(--color-$(type)-border-$(color));
+            border-style: solid;
+          }
+        }
+      }
+    }
+  }
+  @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
+    pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
+    apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
+    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
+    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
+    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
+    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
+    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
+    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
+    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
+    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
+    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
+    sonic-silver {
+    &_$(palette) {
+      border-width: 1px;
+      border-color: var(--color-palette-$(palette));
+      border-style: solid;
+    }
+  }
+}
+.border-color,
+button.border-color {
+  &_active {
+    &_none {
+      border-width: 1px;
+      border-color: transparent;
+      border-style: solid;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-border {
+            &-$(color) {
+              border-width: 1px;
+              border-color: var(--color-$(type)-border-$(color));
+              border-style: solid;
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        border-width: 1px;
+        border-color: var(--color-palette-$(palette));
+        border-style: solid;
+      }
+    }
+  }
+}
+.border-color,
+button.border-color {
+  &_active {
+    &_none {
+      border-width: 1px;
+      border-color: transparent;
+      border-style: solid;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-border {
+            &-$(color) {
+              &:hover {
+                border-width: 1px;
+                border-color: var(--color-$(type)-border-$(color));
+                border-style: solid;
+              }
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &:hover {
+          border-width: 1px;
+          border-color: var(--color-palette-$(palette));
+          border-style: solid;
+        }
+      }
+    }
+  }
+}
+.border-color,
+button.border-color {
+  &_focus {
+    &_none {
+      border-width: 1px;
+      border-color: transparent;
+      border-style: solid;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-border {
+            &-$(color) {
+              &:focus {
+                border-width: 1px;
+                border-color: var(--color-$(type)-border-$(color)) !important;
+                border-style: solid;
+                outline: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &:focus {
+          border-width: 1px;
+          border-color: var(--color-palette-$(palette)) !important;
+          border-style: solid;
+          outline: 0;
+        }
+      }
+    }
+  }
+}
+.border-color,
+button.border-color {
+  &_hover {
+    &_none {
+      border-width: 1px;
+      border-color: transparent;
+      border-style: solid;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-border {
+            &-$(color) {
+              &:hover {
+                border-width: 1px;
+                border-color: var(--color-$(type)-border-$(color));
+                border-style: solid;
+              }
+              &-hover {
+                &:hover {
+                  border-width: 1px;
+                  border-color: var(--color-$(type)-border-$(color));
+                  border-style: solid;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &:hover {
+          border-width: 1px;
+          border-color: var(--color-palette-$(palette));
+          border-style: solid;
+        }
+        &-hover {
+          &:hover {
+            border-width: 1px;
+            border-color: var(--color-palette-$(palette));
+            border-style: solid;
+          }
+        }
+      }
+    }
+  }
+}
+.border {
+  &_type {
+    &_outline {
+      border-style: solid;
+    }
+    &_solid {
+      border-style: solid;
+    }
+    &_none {
+      border: none;
+    }
+  }
+}
+.border-width {
+  @each $width in 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
+    &_$(width) {
+      /* stylelint-disable-next-line prettier/prettier */
+      border-width: $(width)px;
+      border-style: solid;
+    }
+  }
+}
+/* stylelint-disable prettier/prettier */
+.border {
+  @each $width in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
+    &_top {
+      &_$(width) {
+        border-top-style: solid;
+        border-width: $(width)px 0 0 0;
+      }
+    }
+    &_right {
+      &_$(width) {
+        border-right-style: solid;
+        border-width: 0 $(width)px 0 0;
+      }
+    }
+    &_bottom {
+      &_$(width) {
+        border-bottom-style: solid;
+        border-width: 0 0 $(width)px 0;
+      }
+    }
+    &_left {
+      &_$(width) {
+        border-left-style: solid;
+        border-width: 0 0 0 $(width)px;
+      }
+    }
+  }
+}
+.caret-color {
+  @each $type in accent, primary, secondary, surface, error, warning, success,
+    danger, info, disabled {
+    @each $color in primary, secondary, tertiary, quaternary {
+      &_$(type) {
+        &-item {
+          &-$(color) {
+            caret-color: var(--color-$(type)-item-$(color));
+          }
+        }
+      }
+    }
+  }
+}
+.centering {
+  &_horizontal {
+    display: flex;
+    justify-content: center;
+  }
+  &_vertical {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  &_both {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+.constraints {
+  &_top {
+    top: 0;
+  }
+  &_top-left {
+    left: 0;
+    top: 0;
+  }
+  &_top-right {
+    top: 0;
+    right: 0;
+  }
+  &_top-fill {
+    left: 0;
+    top: 0;
+    right: 0;
+  }
+  &_top-center {
+    position: absolute;
+    left: 50%;
+    top: 0%;
+    right: 0;
+    transform: translate(-50%, 0);
+  }
+  &_bottom {
+    bottom: 0;
+  }
+  &_bottom-left {
+    left: 0;
+    bottom: 0;
+  }
+  &_bottom-right {
+    right: 0;
+    bottom: 0;
+  }
+  &_bottom-left-right {
+    left: 0;
+    top: 0;
+    right: 0;
+  }
+  &_bottom_center {
+    position: absolute;
+    left: 50%;
+    right: 0;
+    bottom: 0;
+    transform: translate(-50%, 0);
+  }
+  &_bottom-fill {
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  &_left {
+    left: 0;
+  }
+  &_right {
+    right: 0;
+  }
+  &_center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+  &_fill {
+    inset: 0 0 0 0;
+  }
+  &_fill_vertical {
+    top: 0;
+    bottom: 0;
+  }
+}
+.cursor {
+  &_type {
+    @each $val in auto, default, none, pointer {
+      &_$(val) {
+        cursor: $(val);
+        &:hover {
+          cursor: $(val);
+        }
+      }
+    }
+  }
+}
+.direction {
+  &_vertical {
+    display: flex;
+    flex-direction: column;
+    &-reverse {
+      display: flex;
+      flex-direction: column-reverse;
+    }
+  }
+  &_horizontal {
+    display: flex;
+    flex-direction: row;
+    &-reverse {
+      display: flex;
+      flex-direction: row-reverse;
+    }
+  }
+}
+.elevation {
+  @each $val in 1, 2, 4, 6, 8, 12, 16, 24 {
+    &_$(val) {
+      @mixin elevation-$(val);
+    }
+  }
+}
+.elevation {
+  &_hover {
+    @each $val in 1, 2, 4, 6, 8, 12, 16, 24 {
+      &_$(val) {
+        &:hover {
+          @mixin elevation-$(val);
+        }
+      }
+    }
+  }
+}
+.fill,
+button.fill {
+  &_none {
+    background-color: transparent;
+  }
+  @each $type in accent, primary, secondary, surface, error, warning, success,
+    danger, info, disabled {
+    @each $color in primary, secondary, tertiary, quaternary {
+      /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+      &_$(type) {
+        &-item {
+          &-$(color) {
+            background: var(--color-$(type)-item-$(color));
+
+            /* &$(alpha) {
+                background: var(--color-$(type)-item-$(color)-$(alpha));
+              } */
+          }
+        }
+        &-$(color) {
+          background: var(--color-$(type)-fill-$(color));
+
+          /* &$(alpha) {
+              background: var(--color-$(type)-$(color)-$(alpha));
+            } */
+        }
+      }
+
+      /* } */
+    }
+  }
+  @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
+    pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
+    apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
+    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
+    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
+    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
+    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
+    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
+    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
+    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
+    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
+    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
+    sonic-silver {
+    &_$(palette) {
+      background: var(--color-palette-$(palette));
+      &-item {
+        &_$(palette) {
+          background: var(--color-palette-$(palette));
+        }
+      }
+    }
+  }
+}
+.fill,
+button.fill {
+  &_active {
+    &_none {
+      background-color: transparent;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-item {
+            &-$(color) {
+              background: var(--color-$(type)-item-$(color));
+            }
+          }
+          &-$(color) {
+            background: var(--color-$(type)-fill-$(color));
+          }
+          &-$(color)-active {
+            background: var(--color-$(type)-fill-active-$(color));
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        background: var(--color-palette-$(palette));
+        &-item {
+          &_$(palette) {
+            background: var(--color-palette-$(palette));
+          }
+        }
+      }
+    }
+  }
+}
+.fill,
+button.fill {
+  &_active {
+    &_hover {
+      &_none {
+        background-color: transparent;
+      }
+      @each $type in accent, primary, secondary, surface, error, warning,
+        success, danger, info, disabled {
+        @each $color in primary, secondary, tertiary, quaternary {
+          /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+          &_$(type) {
+            &-item {
+              &-$(color) {
+                &:hover {
+                  background: var(--color-$(type)-item-$(color));
+                }
+
+                /* &$(alpha) {
+                    &:hover {
+                      background: var(--color-$(type)-item-$(color)-$(alpha));
+                    }
+                  } */
+                &-hover {
+                  &:hover {
+                    background: var(--color-$(type)-item-$(color)-hover);
+                  }
+
+                  /* &$(alpha) {
+                      &:hover {
+                        background: var(
+                          --color-$(type)-item-$(color)-$(alpha)-hover
+                        );
+                      }
+                    } */
+                  &-active {
+                    &:hover {
+                      background: var(
+                        --color-$(type)-item-$(color)-active-hover
+                      );
+                    }
+
+                    /* &$(alpha) {
+                        &:hover {
+                          background: var(
+                            --color-$(type)-item-$(color)-$(alpha)-active-hover
+                          );
+                        }
+                      } */
+                  }
+                }
+              }
+            }
+            &-$(color) {
+              &:hover {
+                background: var(--color-$(type)-fill-$(color));
+              }
+              &-hover {
+                &:hover {
+                  background: var(--color-$(type)-fill-$(color)-hover);
+                }
+                &-active {
+                  &:hover {
+                    background: var(--color-$(type)-fill-$(color)-active-hover);
+                  }
+                }
+              }
+              &-active {
+                &:hover {
+                  background: var(--color-$(type)-fill-$(color)-active);
+                }
+              }
+            }
+            &-hover {
+              &-$(color) {
+                &:hover {
+                  background: var(--color-$(type)-fill-hover-$(color));
+                }
+              }
+            }
+          }
+
+          /* } */
+        }
+      }
+      @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+        pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
+        orange, clementine, apricot, papaya, kumquat, light-orange, peach,
+        flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
+        mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+        dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
+        light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
+        blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
+        ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
+        lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
+        northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
+        antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
+        coastal-gray, white, black, alto, athens-gray, sonic-silver {
+        &_$(palette) {
+          &:hover {
+            background: var(--color-palette-$(palette));
+          }
+          &-item {
+            &_$(palette) {
+              &:hover {
+                background: var(--color-palette-$(palette));
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.fill_gradient,
+button.fill {
+  @each $type in primary, secondary, tertiary, quaternary {
+    &-$(type) {
+      @each $direction, $degree in (top, right, diagonal, bottom, left),
+        (0deg, 90deg, 135deg, 180deg, 270deg) {
+        &-$(direction) {
+          background: linear-gradient($(degree), var(--color-gradient-$(type)));
+        }
+      }
+    }
+  }
+}
+.fill,
+button.fill {
+  &_hover {
+    &_none {
+      background-color: transparent;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+        &_$(type) {
+          &-item {
+            &-$(color) {
+              &:hover {
+                background: var(--color-$(type)-item-$(color));
+              }
+
+              /* &$(alpha) {
+                  &:hover {
+                    background: var(--color-$(type)-item-$(color)-$(alpha));
+                  }
+                } */
+              &-hover {
+                &:hover {
+                  background: var(--color-$(type)-item-$(color)-hover);
+                }
+
+                /* &$(alpha) {
+                    &:hover {
+                      background: var(
+                        --color-$(type)-item-$(color)-$(alpha)-hover
+                      );
+                    }
+                  } */
+              }
+            }
+          }
+          &-$(color) {
+            &:hover {
+              background: var(--color-$(type)-fill-$(color));
+            }
+            &-hover {
+              &:hover {
+                background: var(--color-$(type)-fill-$(color)-hover);
+              }
+            }
+          }
+          &-hover {
+            &-$(color) {
+              &:hover {
+                background: var(--color-$(type)-fill-hover-$(color));
+              }
+            }
+          }
+        }
+
+        /* } */
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &:hover {
+          background: var(--color-palette-$(palette));
+        }
+        &-item {
+          &_$(palette) {
+            &:hover {
+              background: var(--color-palette-$(palette));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.flex-grow {
+  @each $val in 0, 1 {
+    &_$(val) {
+      flex-grow: $(val);
+    }
+  }
+}
+.height {
+  &_hug {
+    display: inline-flex;
+  }
+  &_fill {
+    height: 100%;
+    &-vh {
+      height: 100vh;
+    }
+  }
+}
+.hover-fill-color {
+  @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+    error, success, warning, info, danger, gradient, disabled, hover, inverse {
+    @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
+      hover, inverse {
+      &_$(type) {
+        &-$(color) {
+          &:hover {
+            background: var(--color-$(type)-fill-$(color));
+          }
+        }
+      }
+    }
+  }
+}
+.hover-item-color {
+  @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+    error, success, warning, info, danger, gradient, disabled, hover, inverse {
+    @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
+      hover, inverse {
+      &_$(type) {
+        &-item {
+          &-$(color) {
+            &:hover {
+              color: var(--color-$(type)-item-$(color));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.hover-text-color {
+  @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+    error, success, warning, info, danger, gradient, disabled, hover, inverse {
+    @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
+      hover, inverse {
+      &_$(type) {
+        &-text {
+          &-$(color) {
+            &:hover {
+              color: var(--color-$(type)-text-$(color));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.justify-content {
+  @each $val in flexStart, flexEnd, spaceBetween, spaceAround, spaceEvenly, flex-start, flex-end, center, space-between, space-around, space-evenly {
+    &_$(val) {
+      justify-content: $(val);
+    }
+  }
+}
+.opacity {
+  @each $val in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85,
+    90, 95 {
+    &_$(val) {
+      /* stylelint-disable-next-line prettier/prettier */
+      opacity: $(val)%;
+    }
+  }
+}
+.placeholder-text-color {
+  @each $type in accent, primary, secondary, surface, error, warning, success,
+    danger, info, disabled {
+    @each $color in primary, secondary, tertiary, quaternary {
+      &_$(type) {
+        &-text {
+          &-$(color) {
+            &::placeholder {
+              color: var(--color-$(type)-text-$(color));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.position {
+  &_absolute {
+    position: absolute;
+  }
+  &_relative {
+    position: relative;
+  }
+  &_fixed {
+    position: fixed;
+  }
+  &_static {
+    position: static;
+  }
+}
+.resize-horizontal {
+  &_hug {
+    display: inline-flex;
+  }
+  &_fill {
+    width: 100%;
+  }
+  &_fit-content {
+    display: inline-flex;
+  }
+}
+.resize-vertical {
+  &_hug {
+    display: inline-flex;
+  }
+  &_fill {
+    min-height: 100%;
+    flex: 1;
+  }
+}
+.shape_rounded.shape-strength,
+.shape-strength {
+  &_05-m {
+    border-radius: 0.5m;
+  }
+  &_1-m {
+    border-radius: 1m;
+  }
+  &_15-m {
+    border-radius: 1.5m;
+  }
+  &_2-m {
+    border-radius: 2m;
+  }
+}
+.shape {
+  &_rounded {
+    border-radius: 8px;
+  }
+  &_circular {
+    border-radius: 50%;
+  }
+}
+.svg {
+  &_fill {
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-item {
+            &-$(color) {
+              & svg {
+                stroke: none;
+                fill: var(--color-$(type)-item-$(color));
+              }
+
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-$(color) {
+            & svg {
+              stroke: none;
+              fill: var(--color-$(type)-fill-$(color));
+            }
+
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+      }
+    }
+  }
+}
+.svg {
+  &_fill_hover {
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-item {
+            &-$(color) {
+              &:hover {
+                & svg {
+                  stroke: none;
+                  fill: var(--color-$(type)-item-$(color));
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.svg {
+  &_path_fill {
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-item {
+            &-$(color) {
+              & path {
+                fill: var(--color-$(type)-item-$(color));
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.text_align {
+  @each $align in left, center, right {
+    &_$(align) {
+      text-align: ($align);
+    }
+  }
+}
+.text {
+  &&-color {
+    &_none {
+      color: transparent;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-text {
+            &-$(color) {
+              color: var(--color-$(type)-text-$(color));
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        color: var(--color-palette-$(palette));
+      }
+    }
+  }
+}
+.text {
+  &&-color {
+    &_active {
+      &_none {
+        color: transparent;
+      }
+      @each $type in accent, primary, secondary, surface, error, warning,
+        success, danger, info, disabled {
+        @each $color in primary, secondary, tertiary, quaternary {
+          &_$(type) {
+            &-text {
+              &-$(color) {
+                color: var(--color-$(type)-text-$(color));
+              }
+            }
+          }
+        }
+      }
+      @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+        pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
+        orange, clementine, apricot, papaya, kumquat, light-orange, peach,
+        flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
+        mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+        dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
+        light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
+        blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
+        ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
+        lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
+        northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
+        antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
+        coastal-gray, white, black, alto, athens-gray, sonic-silver {
+        &_$(palette) {
+          color: var(--color-palette-$(palette));
+        }
+      }
+    }
+  }
+}
+.text {
+  &&-color {
+    &_active {
+      &_hover {
+        &_none {
+          color: transparent;
+        }
+        @each $type in accent, primary, secondary, surface, error, warning,
+          success, danger, info, disabled {
+          @each $color in primary, secondary, tertiary, quaternary {
+            &_$(type) {
+              &-text {
+                &-$(color) {
+                  &:hover {
+                    color: var(--color-$(type)-text-$(color));
+                  }
+                }
+              }
+            }
+          }
+        }
+        @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+          pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
+          orange, clementine, apricot, papaya, kumquat, light-orange, peach,
+          flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
+          mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+          dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
+          light-blue, cerulean, surf-blue, pacific-green, blue-cobalt,
+          dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+          midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue,
+          indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
+          pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
+          dark-olive, soft-white, antique-white, yellow-gold, gold, camel,
+          walnut, stone, pebble, cocoa, coastal-gray, white, black, alto,
+          athens-gray, sonic-silver {
+          &_$(palette) {
+            &:hover {
+              color: var(--color-palette-$(palette));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.text {
+  &&-color {
+    &_disabled {
+      &-text {
+        @each $color in primary, secondary, tertiary, quaternary {
+          &-$(color) {
+            color: var(--color-disabled-text-$(color));
+          }
+        }
+      }
+    }
+  }
+}
+.text {
+  &&-color {
+    &_hover {
+      &_none {
+        color: transparent;
+      }
+      @each $type in accent, primary, secondary, surface, error, warning,
+        success, danger, info, disabled {
+        @each $color in primary, secondary, tertiary, quaternary {
+          &_$(type) {
+            &-text {
+              &-$(color) {
+                &:hover {
+                  color: var(--color-$(type)-text-$(color));
+                }
+                &-hover {
+                  &:hover {
+                    color: var(--color-$(type)-text-$(color)-hover);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.text {
+  &-decoration {
+    @each $val in underline, none {
+      &_$(val) {
+        text-decoration: $(val);
+      }
+    }
+  }
+}
+.text-gradient {
+  &_primary {
+    @mixin text-gradient-primary;
+  }
+  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_$(type) {
+      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
+        hover {
+        &-$(color) {
+          @each $direction in left, top, right, bottom {
+            &-$(direction) {
+              color: transparent;
+              background: linear-gradient(
+                to $(direction),
+                var(--color-$(type)-text-gradient-$(color)-start) 0%,
+                var(--color-$(type)-text-gradient-$(color)-end) 100%
+              );
+              background-clip: text;
+              text-fill-color: transparent;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.text {
+  &&-style {
+    @each $val in normal, italic {
+      &_$(val) {
+        font-style: $(val);
+      }
+    }
+  }
+}
+.text-truncate {
+  &_true {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+/* stylelint-disable order/order */
+.text {
+  &-weight {
+    @each $val in 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 {
+      &_$(val) {
+        font-weight: $(val);
+      }
+    }
+    &_thin {
+      font-weight: 100;
+    }
+    &_extra-light,
+    &_extralight,
+    &_ultra-light,
+    &_ultralight {
+      font-weight: 200;
+    }
+    &_light {
+      font-weight: 300;
+    }
+    &_normal {
+      font-weight: 400;
+    }
+    &_medium {
+      font-weight: 500;
+    }
+    &_semibold,
+    &_semi-bold,
+    &_demi-bold {
+      font-weight: 600;
+    }
+    &_bold {
+      font-weight: 700;
+    }
+    &_extrabold,
+    &_extra-bold,
+    &_ultrabold,
+    &_ultra-bold {
+      font-weight: 800;
+    }
+    &_black,
+    &_heavy {
+      font-weight: 900;
+    }
+  }
+}
+.width {
+  &_hug {
+    display: inline-flex;
+  }
+  &_fill {
+    width: 100%;
+  }
+  &_auto {
+    width: auto;
+  }
+}
+.word-wrap {
+  &_wrap {
+    @mixin word-wrap;
+  }
+  &_nowrap {
+    white-space: nowrap;
+  }
+}