@itcase/ui 1.8.178 → 1.9.0

package/dist/css/components/Badge/Badge.css

@@ -1,1235 +0,0 @@
-.badge {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  &__dot {
-    display: flex;
-  }
-}
-.badge {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: badgeSkeleton 3s infinite linear !important;
-    background-image: linear-gradient(
-      90deg,
-      var(--color-surface-fill-secondary),
-      var(--color-surface-fill-tertiary),
-      var(--color-surface-fill-secondary)
-    ) !important;
-    & * {
-      opacity: 0%;
-    }
-  }
-}
-@keyframes badgeSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-.badge {
-  &_size {
-      &_xxs {
-        min-width: var(--badge-size-xxs-min-width);
-        min-height: var(--badge-size-xxs-min-height);
-        gap: var(--badge-size-xxs-gap);
-        padding: var(--badge-size-xxs-padding);
-      }
-      &_xs {
-        min-width: var(--badge-size-xs-min-width);
-        min-height: var(--badge-size-xs-min-height);
-        gap: var(--badge-size-xs-gap);
-        padding: var(--badge-size-xs-padding);
-      }
-      &_s {
-        min-width: var(--badge-size-s-min-width);
-        min-height: var(--badge-size-s-min-height);
-        gap: var(--badge-size-s-gap);
-        padding: var(--badge-size-s-padding);
-      }
-      &_m {
-        min-width: var(--badge-size-m-min-width);
-        min-height: var(--badge-size-m-min-height);
-        gap: var(--badge-size-m-gap);
-        padding: var(--badge-size-m-padding);
-      }
-      &_l {
-        min-width: var(--badge-size-l-min-width);
-        min-height: var(--badge-size-l-min-height);
-        gap: var(--badge-size-l-gap);
-        padding: var(--badge-size-l-padding);
-      }
-      &_xl {
-        min-width: var(--badge-size-xl-min-width);
-        min-height: var(--badge-size-xl-min-height);
-        gap: var(--badge-size-xl-gap);
-        padding: var(--badge-size-xl-padding);
-      }
-      &_xxl {
-        min-width: var(--badge-size-xxl-min-width);
-        min-height: var(--badge-size-xxl-min-height);
-        gap: var(--badge-size-xxl-gap);
-        padding: var(--badge-size-xxl-padding);
-      }
-  }
-}
-.badge {
-    &_type_dot-icon-counter {
-        &^&_size_xxl {
-          min-width: var(
-            --badge-type-dot-icon-counter-size-xxl-min-width,
-            var(--badge-size-xxl-min-width)
-          );
-          min-height: var(
-            --badge-type-dot-icon-counter-size-xxl-min-height,
-            var(--badge-size-xxl-min-height)
-          );
-          max-width: var(
-            --badge-type-dot-icon-counter-size-xxl-max-width,
-            var(--badge-size-xxl-max-width)
-          );
-          max-height: var(
-            --badge-type-dot-icon-counter-size-xxl-max-height,
-            var(--badge-size-xxl-max-height)
-          );
-          padding: var(
-            --badge-type-dot-icon-counter-size-xxl-padding,
-            var(--badge-size-xxl-padding)
-          );
-          gap: var(
-            --badge-type-dot-icon-counter-size-xxl-gap,
-            var(--badge-size-xxl-gap)
-          );
-        }
-        &^&_size_xl {
-          min-width: var(
-            --badge-type-dot-icon-counter-size-xl-min-width,
-            var(--badge-size-xl-min-width)
-          );
-          min-height: var(
-            --badge-type-dot-icon-counter-size-xl-min-height,
-            var(--badge-size-xl-min-height)
-          );
-          max-width: var(
-            --badge-type-dot-icon-counter-size-xl-max-width,
-            var(--badge-size-xl-max-width)
-          );
-          max-height: var(
-            --badge-type-dot-icon-counter-size-xl-max-height,
-            var(--badge-size-xl-max-height)
-          );
-          padding: var(
-            --badge-type-dot-icon-counter-size-xl-padding,
-            var(--badge-size-xl-padding)
-          );
-          gap: var(
-            --badge-type-dot-icon-counter-size-xl-gap,
-            var(--badge-size-xl-gap)
-          );
-        }
-        &^&_size_l {
-          min-width: var(
-            --badge-type-dot-icon-counter-size-l-min-width,
-            var(--badge-size-l-min-width)
-          );
-          min-height: var(
-            --badge-type-dot-icon-counter-size-l-min-height,
-            var(--badge-size-l-min-height)
-          );
-          max-width: var(
-            --badge-type-dot-icon-counter-size-l-max-width,
-            var(--badge-size-l-max-width)
-          );
-          max-height: var(
-            --badge-type-dot-icon-counter-size-l-max-height,
-            var(--badge-size-l-max-height)
-          );
-          padding: var(
-            --badge-type-dot-icon-counter-size-l-padding,
-            var(--badge-size-l-padding)
-          );
-          gap: var(
-            --badge-type-dot-icon-counter-size-l-gap,
-            var(--badge-size-l-gap)
-          );
-        }
-        &^&_size_m {
-          min-width: var(
-            --badge-type-dot-icon-counter-size-m-min-width,
-            var(--badge-size-m-min-width)
-          );
-          min-height: var(
-            --badge-type-dot-icon-counter-size-m-min-height,
-            var(--badge-size-m-min-height)
-          );
-          max-width: var(
-            --badge-type-dot-icon-counter-size-m-max-width,
-            var(--badge-size-m-max-width)
-          );
-          max-height: var(
-            --badge-type-dot-icon-counter-size-m-max-height,
-            var(--badge-size-m-max-height)
-          );
-          padding: var(
-            --badge-type-dot-icon-counter-size-m-padding,
-            var(--badge-size-m-padding)
-          );
-          gap: var(
-            --badge-type-dot-icon-counter-size-m-gap,
-            var(--badge-size-m-gap)
-          );
-        }
-        &^&_size_s {
-          min-width: var(
-            --badge-type-dot-icon-counter-size-s-min-width,
-            var(--badge-size-s-min-width)
-          );
-          min-height: var(
-            --badge-type-dot-icon-counter-size-s-min-height,
-            var(--badge-size-s-min-height)
-          );
-          max-width: var(
-            --badge-type-dot-icon-counter-size-s-max-width,
-            var(--badge-size-s-max-width)
-          );
-          max-height: var(
-            --badge-type-dot-icon-counter-size-s-max-height,
-            var(--badge-size-s-max-height)
-          );
-          padding: var(
-            --badge-type-dot-icon-counter-size-s-padding,
-            var(--badge-size-s-padding)
-          );
-          gap: var(
-            --badge-type-dot-icon-counter-size-s-gap,
-            var(--badge-size-s-gap)
-          );
-        }
-        &^&_size_xs {
-          min-width: var(
-            --badge-type-dot-icon-counter-size-xs-min-width,
-            var(--badge-size-xs-min-width)
-          );
-          min-height: var(
-            --badge-type-dot-icon-counter-size-xs-min-height,
-            var(--badge-size-xs-min-height)
-          );
-          max-width: var(
-            --badge-type-dot-icon-counter-size-xs-max-width,
-            var(--badge-size-xs-max-width)
-          );
-          max-height: var(
-            --badge-type-dot-icon-counter-size-xs-max-height,
-            var(--badge-size-xs-max-height)
-          );
-          padding: var(
-            --badge-type-dot-icon-counter-size-xs-padding,
-            var(--badge-size-xs-padding)
-          );
-          gap: var(
-            --badge-type-dot-icon-counter-size-xs-gap,
-            var(--badge-size-xs-gap)
-          );
-        }
-        &^&_size_xxs {
-          min-width: var(
-            --badge-type-dot-icon-counter-size-xxs-min-width,
-            var(--badge-size-xxs-min-width)
-          );
-          min-height: var(
-            --badge-type-dot-icon-counter-size-xxs-min-height,
-            var(--badge-size-xxs-min-height)
-          );
-          max-width: var(
-            --badge-type-dot-icon-counter-size-xxs-max-width,
-            var(--badge-size-xxs-max-width)
-          );
-          max-height: var(
-            --badge-type-dot-icon-counter-size-xxs-max-height,
-            var(--badge-size-xxs-max-height)
-          );
-          padding: var(
-            --badge-type-dot-icon-counter-size-xxs-padding,
-            var(--badge-size-xxs-padding)
-          );
-          gap: var(
-            --badge-type-dot-icon-counter-size-xxs-gap,
-            var(--badge-size-xxs-gap)
-          );
-        }
-    }
-    &_type_icon-counter {
-        &^&_size_xxl {
-          min-width: var(
-            --badge-type-icon-counter-size-xxl-min-width,
-            var(--badge-size-xxl-min-width)
-          );
-          min-height: var(
-            --badge-type-icon-counter-size-xxl-min-height,
-            var(--badge-size-xxl-min-height)
-          );
-          max-width: var(
-            --badge-type-icon-counter-size-xxl-max-width,
-            var(--badge-size-xxl-max-width)
-          );
-          max-height: var(
-            --badge-type-icon-counter-size-xxl-max-height,
-            var(--badge-size-xxl-max-height)
-          );
-          padding: var(
-            --badge-type-icon-counter-size-xxl-padding,
-            var(--badge-size-xxl-padding)
-          );
-          gap: var(
-            --badge-type-icon-counter-size-xxl-gap,
-            var(--badge-size-xxl-gap)
-          );
-        }
-        &^&_size_xl {
-          min-width: var(
-            --badge-type-icon-counter-size-xl-min-width,
-            var(--badge-size-xl-min-width)
-          );
-          min-height: var(
-            --badge-type-icon-counter-size-xl-min-height,
-            var(--badge-size-xl-min-height)
-          );
-          max-width: var(
-            --badge-type-icon-counter-size-xl-max-width,
-            var(--badge-size-xl-max-width)
-          );
-          max-height: var(
-            --badge-type-icon-counter-size-xl-max-height,
-            var(--badge-size-xl-max-height)
-          );
-          padding: var(
-            --badge-type-icon-counter-size-xl-padding,
-            var(--badge-size-xl-padding)
-          );
-          gap: var(
-            --badge-type-icon-counter-size-xl-gap,
-            var(--badge-size-xl-gap)
-          );
-        }
-        &^&_size_l {
-          min-width: var(
-            --badge-type-icon-counter-size-l-min-width,
-            var(--badge-size-l-min-width)
-          );
-          min-height: var(
-            --badge-type-icon-counter-size-l-min-height,
-            var(--badge-size-l-min-height)
-          );
-          max-width: var(
-            --badge-type-icon-counter-size-l-max-width,
-            var(--badge-size-l-max-width)
-          );
-          max-height: var(
-            --badge-type-icon-counter-size-l-max-height,
-            var(--badge-size-l-max-height)
-          );
-          padding: var(
-            --badge-type-icon-counter-size-l-padding,
-            var(--badge-size-l-padding)
-          );
-          gap: var(
-            --badge-type-icon-counter-size-l-gap,
-            var(--badge-size-l-gap)
-          );
-        }
-        &^&_size_m {
-          min-width: var(
-            --badge-type-icon-counter-size-m-min-width,
-            var(--badge-size-m-min-width)
-          );
-          min-height: var(
-            --badge-type-icon-counter-size-m-min-height,
-            var(--badge-size-m-min-height)
-          );
-          max-width: var(
-            --badge-type-icon-counter-size-m-max-width,
-            var(--badge-size-m-max-width)
-          );
-          max-height: var(
-            --badge-type-icon-counter-size-m-max-height,
-            var(--badge-size-m-max-height)
-          );
-          padding: var(
-            --badge-type-icon-counter-size-m-padding,
-            var(--badge-size-m-padding)
-          );
-          gap: var(
-            --badge-type-icon-counter-size-m-gap,
-            var(--badge-size-m-gap)
-          );
-        }
-        &^&_size_s {
-          min-width: var(
-            --badge-type-icon-counter-size-s-min-width,
-            var(--badge-size-s-min-width)
-          );
-          min-height: var(
-            --badge-type-icon-counter-size-s-min-height,
-            var(--badge-size-s-min-height)
-          );
-          max-width: var(
-            --badge-type-icon-counter-size-s-max-width,
-            var(--badge-size-s-max-width)
-          );
-          max-height: var(
-            --badge-type-icon-counter-size-s-max-height,
-            var(--badge-size-s-max-height)
-          );
-          padding: var(
-            --badge-type-icon-counter-size-s-padding,
-            var(--badge-size-s-padding)
-          );
-          gap: var(
-            --badge-type-icon-counter-size-s-gap,
-            var(--badge-size-s-gap)
-          );
-        }
-        &^&_size_xs {
-          min-width: var(
-            --badge-type-icon-counter-size-xs-min-width,
-            var(--badge-size-xs-min-width)
-          );
-          min-height: var(
-            --badge-type-icon-counter-size-xs-min-height,
-            var(--badge-size-xs-min-height)
-          );
-          max-width: var(
-            --badge-type-icon-counter-size-xs-max-width,
-            var(--badge-size-xs-max-width)
-          );
-          max-height: var(
-            --badge-type-icon-counter-size-xs-max-height,
-            var(--badge-size-xs-max-height)
-          );
-          padding: var(
-            --badge-type-icon-counter-size-xs-padding,
-            var(--badge-size-xs-padding)
-          );
-          gap: var(
-            --badge-type-icon-counter-size-xs-gap,
-            var(--badge-size-xs-gap)
-          );
-        }
-        &^&_size_xxs {
-          min-width: var(
-            --badge-type-icon-counter-size-xxs-min-width,
-            var(--badge-size-xxs-min-width)
-          );
-          min-height: var(
-            --badge-type-icon-counter-size-xxs-min-height,
-            var(--badge-size-xxs-min-height)
-          );
-          max-width: var(
-            --badge-type-icon-counter-size-xxs-max-width,
-            var(--badge-size-xxs-max-width)
-          );
-          max-height: var(
-            --badge-type-icon-counter-size-xxs-max-height,
-            var(--badge-size-xxs-max-height)
-          );
-          padding: var(
-            --badge-type-icon-counter-size-xxs-padding,
-            var(--badge-size-xxs-padding)
-          );
-          gap: var(
-            --badge-type-icon-counter-size-xxs-gap,
-            var(--badge-size-xxs-gap)
-          );
-        }
-    }
-    &_type_counter {
-        &^&_size_xxl {
-          min-width: var(
-            --badge-type-counter-size-xxl-min-width,
-            var(--badge-size-xxl-min-width)
-          );
-          min-height: var(
-            --badge-type-counter-size-xxl-min-height,
-            var(--badge-size-xxl-min-height)
-          );
-          max-width: var(
-            --badge-type-counter-size-xxl-max-width,
-            var(--badge-size-xxl-max-width)
-          );
-          max-height: var(
-            --badge-type-counter-size-xxl-max-height,
-            var(--badge-size-xxl-max-height)
-          );
-          padding: var(
-            --badge-type-counter-size-xxl-padding,
-            var(--badge-size-xxl-padding)
-          );
-          gap: var(
-            --badge-type-counter-size-xxl-gap,
-            var(--badge-size-xxl-gap)
-          );
-        }
-        &^&_size_xl {
-          min-width: var(
-            --badge-type-counter-size-xl-min-width,
-            var(--badge-size-xl-min-width)
-          );
-          min-height: var(
-            --badge-type-counter-size-xl-min-height,
-            var(--badge-size-xl-min-height)
-          );
-          max-width: var(
-            --badge-type-counter-size-xl-max-width,
-            var(--badge-size-xl-max-width)
-          );
-          max-height: var(
-            --badge-type-counter-size-xl-max-height,
-            var(--badge-size-xl-max-height)
-          );
-          padding: var(
-            --badge-type-counter-size-xl-padding,
-            var(--badge-size-xl-padding)
-          );
-          gap: var(
-            --badge-type-counter-size-xl-gap,
-            var(--badge-size-xl-gap)
-          );
-        }
-        &^&_size_l {
-          min-width: var(
-            --badge-type-counter-size-l-min-width,
-            var(--badge-size-l-min-width)
-          );
-          min-height: var(
-            --badge-type-counter-size-l-min-height,
-            var(--badge-size-l-min-height)
-          );
-          max-width: var(
-            --badge-type-counter-size-l-max-width,
-            var(--badge-size-l-max-width)
-          );
-          max-height: var(
-            --badge-type-counter-size-l-max-height,
-            var(--badge-size-l-max-height)
-          );
-          padding: var(
-            --badge-type-counter-size-l-padding,
-            var(--badge-size-l-padding)
-          );
-          gap: var(
-            --badge-type-counter-size-l-gap,
-            var(--badge-size-l-gap)
-          );
-        }
-        &^&_size_m {
-          min-width: var(
-            --badge-type-counter-size-m-min-width,
-            var(--badge-size-m-min-width)
-          );
-          min-height: var(
-            --badge-type-counter-size-m-min-height,
-            var(--badge-size-m-min-height)
-          );
-          max-width: var(
-            --badge-type-counter-size-m-max-width,
-            var(--badge-size-m-max-width)
-          );
-          max-height: var(
-            --badge-type-counter-size-m-max-height,
-            var(--badge-size-m-max-height)
-          );
-          padding: var(
-            --badge-type-counter-size-m-padding,
-            var(--badge-size-m-padding)
-          );
-          gap: var(
-            --badge-type-counter-size-m-gap,
-            var(--badge-size-m-gap)
-          );
-        }
-        &^&_size_s {
-          min-width: var(
-            --badge-type-counter-size-s-min-width,
-            var(--badge-size-s-min-width)
-          );
-          min-height: var(
-            --badge-type-counter-size-s-min-height,
-            var(--badge-size-s-min-height)
-          );
-          max-width: var(
-            --badge-type-counter-size-s-max-width,
-            var(--badge-size-s-max-width)
-          );
-          max-height: var(
-            --badge-type-counter-size-s-max-height,
-            var(--badge-size-s-max-height)
-          );
-          padding: var(
-            --badge-type-counter-size-s-padding,
-            var(--badge-size-s-padding)
-          );
-          gap: var(
-            --badge-type-counter-size-s-gap,
-            var(--badge-size-s-gap)
-          );
-        }
-        &^&_size_xs {
-          min-width: var(
-            --badge-type-counter-size-xs-min-width,
-            var(--badge-size-xs-min-width)
-          );
-          min-height: var(
-            --badge-type-counter-size-xs-min-height,
-            var(--badge-size-xs-min-height)
-          );
-          max-width: var(
-            --badge-type-counter-size-xs-max-width,
-            var(--badge-size-xs-max-width)
-          );
-          max-height: var(
-            --badge-type-counter-size-xs-max-height,
-            var(--badge-size-xs-max-height)
-          );
-          padding: var(
-            --badge-type-counter-size-xs-padding,
-            var(--badge-size-xs-padding)
-          );
-          gap: var(
-            --badge-type-counter-size-xs-gap,
-            var(--badge-size-xs-gap)
-          );
-        }
-        &^&_size_xxs {
-          min-width: var(
-            --badge-type-counter-size-xxs-min-width,
-            var(--badge-size-xxs-min-width)
-          );
-          min-height: var(
-            --badge-type-counter-size-xxs-min-height,
-            var(--badge-size-xxs-min-height)
-          );
-          max-width: var(
-            --badge-type-counter-size-xxs-max-width,
-            var(--badge-size-xxs-max-width)
-          );
-          max-height: var(
-            --badge-type-counter-size-xxs-max-height,
-            var(--badge-size-xxs-max-height)
-          );
-          padding: var(
-            --badge-type-counter-size-xxs-padding,
-            var(--badge-size-xxs-padding)
-          );
-          gap: var(
-            --badge-type-counter-size-xxs-gap,
-            var(--badge-size-xxs-gap)
-          );
-        }
-    }
-    &_type_dot {
-        &^&_size_xxl {
-          min-width: var(
-            --badge-type-dot-size-xxl-min-width,
-            var(--badge-size-xxl-min-width)
-          );
-          min-height: var(
-            --badge-type-dot-size-xxl-min-height,
-            var(--badge-size-xxl-min-height)
-          );
-          max-width: var(
-            --badge-type-dot-size-xxl-max-width,
-            var(--badge-size-xxl-max-width)
-          );
-          max-height: var(
-            --badge-type-dot-size-xxl-max-height,
-            var(--badge-size-xxl-max-height)
-          );
-          padding: var(
-            --badge-type-dot-size-xxl-padding,
-            var(--badge-size-xxl-padding)
-          );
-          gap: var(
-            --badge-type-dot-size-xxl-gap,
-            var(--badge-size-xxl-gap)
-          );
-        }
-        &^&_size_xl {
-          min-width: var(
-            --badge-type-dot-size-xl-min-width,
-            var(--badge-size-xl-min-width)
-          );
-          min-height: var(
-            --badge-type-dot-size-xl-min-height,
-            var(--badge-size-xl-min-height)
-          );
-          max-width: var(
-            --badge-type-dot-size-xl-max-width,
-            var(--badge-size-xl-max-width)
-          );
-          max-height: var(
-            --badge-type-dot-size-xl-max-height,
-            var(--badge-size-xl-max-height)
-          );
-          padding: var(
-            --badge-type-dot-size-xl-padding,
-            var(--badge-size-xl-padding)
-          );
-          gap: var(
-            --badge-type-dot-size-xl-gap,
-            var(--badge-size-xl-gap)
-          );
-        }
-        &^&_size_l {
-          min-width: var(
-            --badge-type-dot-size-l-min-width,
-            var(--badge-size-l-min-width)
-          );
-          min-height: var(
-            --badge-type-dot-size-l-min-height,
-            var(--badge-size-l-min-height)
-          );
-          max-width: var(
-            --badge-type-dot-size-l-max-width,
-            var(--badge-size-l-max-width)
-          );
-          max-height: var(
-            --badge-type-dot-size-l-max-height,
-            var(--badge-size-l-max-height)
-          );
-          padding: var(
-            --badge-type-dot-size-l-padding,
-            var(--badge-size-l-padding)
-          );
-          gap: var(
-            --badge-type-dot-size-l-gap,
-            var(--badge-size-l-gap)
-          );
-        }
-        &^&_size_m {
-          min-width: var(
-            --badge-type-dot-size-m-min-width,
-            var(--badge-size-m-min-width)
-          );
-          min-height: var(
-            --badge-type-dot-size-m-min-height,
-            var(--badge-size-m-min-height)
-          );
-          max-width: var(
-            --badge-type-dot-size-m-max-width,
-            var(--badge-size-m-max-width)
-          );
-          max-height: var(
-            --badge-type-dot-size-m-max-height,
-            var(--badge-size-m-max-height)
-          );
-          padding: var(
-            --badge-type-dot-size-m-padding,
-            var(--badge-size-m-padding)
-          );
-          gap: var(
-            --badge-type-dot-size-m-gap,
-            var(--badge-size-m-gap)
-          );
-        }
-        &^&_size_s {
-          min-width: var(
-            --badge-type-dot-size-s-min-width,
-            var(--badge-size-s-min-width)
-          );
-          min-height: var(
-            --badge-type-dot-size-s-min-height,
-            var(--badge-size-s-min-height)
-          );
-          max-width: var(
-            --badge-type-dot-size-s-max-width,
-            var(--badge-size-s-max-width)
-          );
-          max-height: var(
-            --badge-type-dot-size-s-max-height,
-            var(--badge-size-s-max-height)
-          );
-          padding: var(
-            --badge-type-dot-size-s-padding,
-            var(--badge-size-s-padding)
-          );
-          gap: var(
-            --badge-type-dot-size-s-gap,
-            var(--badge-size-s-gap)
-          );
-        }
-        &^&_size_xs {
-          min-width: var(
-            --badge-type-dot-size-xs-min-width,
-            var(--badge-size-xs-min-width)
-          );
-          min-height: var(
-            --badge-type-dot-size-xs-min-height,
-            var(--badge-size-xs-min-height)
-          );
-          max-width: var(
-            --badge-type-dot-size-xs-max-width,
-            var(--badge-size-xs-max-width)
-          );
-          max-height: var(
-            --badge-type-dot-size-xs-max-height,
-            var(--badge-size-xs-max-height)
-          );
-          padding: var(
-            --badge-type-dot-size-xs-padding,
-            var(--badge-size-xs-padding)
-          );
-          gap: var(
-            --badge-type-dot-size-xs-gap,
-            var(--badge-size-xs-gap)
-          );
-        }
-        &^&_size_xxs {
-          min-width: var(
-            --badge-type-dot-size-xxs-min-width,
-            var(--badge-size-xxs-min-width)
-          );
-          min-height: var(
-            --badge-type-dot-size-xxs-min-height,
-            var(--badge-size-xxs-min-height)
-          );
-          max-width: var(
-            --badge-type-dot-size-xxs-max-width,
-            var(--badge-size-xxs-max-width)
-          );
-          max-height: var(
-            --badge-type-dot-size-xxs-max-height,
-            var(--badge-size-xxs-max-height)
-          );
-          padding: var(
-            --badge-type-dot-size-xxs-padding,
-            var(--badge-size-xxs-padding)
-          );
-          gap: var(
-            --badge-type-dot-size-xxs-gap,
-            var(--badge-size-xxs-gap)
-          );
-        }
-    }
-    &_type_icon {
-        &^&_size_xxl {
-          min-width: var(
-            --badge-type-icon-size-xxl-min-width,
-            var(--badge-size-xxl-min-width)
-          );
-          min-height: var(
-            --badge-type-icon-size-xxl-min-height,
-            var(--badge-size-xxl-min-height)
-          );
-          max-width: var(
-            --badge-type-icon-size-xxl-max-width,
-            var(--badge-size-xxl-max-width)
-          );
-          max-height: var(
-            --badge-type-icon-size-xxl-max-height,
-            var(--badge-size-xxl-max-height)
-          );
-          padding: var(
-            --badge-type-icon-size-xxl-padding,
-            var(--badge-size-xxl-padding)
-          );
-          gap: var(
-            --badge-type-icon-size-xxl-gap,
-            var(--badge-size-xxl-gap)
-          );
-        }
-        &^&_size_xl {
-          min-width: var(
-            --badge-type-icon-size-xl-min-width,
-            var(--badge-size-xl-min-width)
-          );
-          min-height: var(
-            --badge-type-icon-size-xl-min-height,
-            var(--badge-size-xl-min-height)
-          );
-          max-width: var(
-            --badge-type-icon-size-xl-max-width,
-            var(--badge-size-xl-max-width)
-          );
-          max-height: var(
-            --badge-type-icon-size-xl-max-height,
-            var(--badge-size-xl-max-height)
-          );
-          padding: var(
-            --badge-type-icon-size-xl-padding,
-            var(--badge-size-xl-padding)
-          );
-          gap: var(
-            --badge-type-icon-size-xl-gap,
-            var(--badge-size-xl-gap)
-          );
-        }
-        &^&_size_l {
-          min-width: var(
-            --badge-type-icon-size-l-min-width,
-            var(--badge-size-l-min-width)
-          );
-          min-height: var(
-            --badge-type-icon-size-l-min-height,
-            var(--badge-size-l-min-height)
-          );
-          max-width: var(
-            --badge-type-icon-size-l-max-width,
-            var(--badge-size-l-max-width)
-          );
-          max-height: var(
-            --badge-type-icon-size-l-max-height,
-            var(--badge-size-l-max-height)
-          );
-          padding: var(
-            --badge-type-icon-size-l-padding,
-            var(--badge-size-l-padding)
-          );
-          gap: var(
-            --badge-type-icon-size-l-gap,
-            var(--badge-size-l-gap)
-          );
-        }
-        &^&_size_m {
-          min-width: var(
-            --badge-type-icon-size-m-min-width,
-            var(--badge-size-m-min-width)
-          );
-          min-height: var(
-            --badge-type-icon-size-m-min-height,
-            var(--badge-size-m-min-height)
-          );
-          max-width: var(
-            --badge-type-icon-size-m-max-width,
-            var(--badge-size-m-max-width)
-          );
-          max-height: var(
-            --badge-type-icon-size-m-max-height,
-            var(--badge-size-m-max-height)
-          );
-          padding: var(
-            --badge-type-icon-size-m-padding,
-            var(--badge-size-m-padding)
-          );
-          gap: var(
-            --badge-type-icon-size-m-gap,
-            var(--badge-size-m-gap)
-          );
-        }
-        &^&_size_s {
-          min-width: var(
-            --badge-type-icon-size-s-min-width,
-            var(--badge-size-s-min-width)
-          );
-          min-height: var(
-            --badge-type-icon-size-s-min-height,
-            var(--badge-size-s-min-height)
-          );
-          max-width: var(
-            --badge-type-icon-size-s-max-width,
-            var(--badge-size-s-max-width)
-          );
-          max-height: var(
-            --badge-type-icon-size-s-max-height,
-            var(--badge-size-s-max-height)
-          );
-          padding: var(
-            --badge-type-icon-size-s-padding,
-            var(--badge-size-s-padding)
-          );
-          gap: var(
-            --badge-type-icon-size-s-gap,
-            var(--badge-size-s-gap)
-          );
-        }
-        &^&_size_xs {
-          min-width: var(
-            --badge-type-icon-size-xs-min-width,
-            var(--badge-size-xs-min-width)
-          );
-          min-height: var(
-            --badge-type-icon-size-xs-min-height,
-            var(--badge-size-xs-min-height)
-          );
-          max-width: var(
-            --badge-type-icon-size-xs-max-width,
-            var(--badge-size-xs-max-width)
-          );
-          max-height: var(
-            --badge-type-icon-size-xs-max-height,
-            var(--badge-size-xs-max-height)
-          );
-          padding: var(
-            --badge-type-icon-size-xs-padding,
-            var(--badge-size-xs-padding)
-          );
-          gap: var(
-            --badge-type-icon-size-xs-gap,
-            var(--badge-size-xs-gap)
-          );
-        }
-        &^&_size_xxs {
-          min-width: var(
-            --badge-type-icon-size-xxs-min-width,
-            var(--badge-size-xxs-min-width)
-          );
-          min-height: var(
-            --badge-type-icon-size-xxs-min-height,
-            var(--badge-size-xxs-min-height)
-          );
-          max-width: var(
-            --badge-type-icon-size-xxs-max-width,
-            var(--badge-size-xxs-max-width)
-          );
-          max-height: var(
-            --badge-type-icon-size-xxs-max-height,
-            var(--badge-size-xxs-max-height)
-          );
-          padding: var(
-            --badge-type-icon-size-xxs-padding,
-            var(--badge-size-xxs-padding)
-          );
-          gap: var(
-            --badge-type-icon-size-xxs-gap,
-            var(--badge-size-xxs-gap)
-          );
-        }
-    }
-    &_type_fill {
-        &^&_size_xxl {
-          min-width: var(
-            --badge-type-fill-size-xxl-min-width,
-            var(--badge-size-xxl-min-width)
-          );
-          min-height: var(
-            --badge-type-fill-size-xxl-min-height,
-            var(--badge-size-xxl-min-height)
-          );
-          max-width: var(
-            --badge-type-fill-size-xxl-max-width,
-            var(--badge-size-xxl-max-width)
-          );
-          max-height: var(
-            --badge-type-fill-size-xxl-max-height,
-            var(--badge-size-xxl-max-height)
-          );
-          padding: var(
-            --badge-type-fill-size-xxl-padding,
-            var(--badge-size-xxl-padding)
-          );
-          gap: var(
-            --badge-type-fill-size-xxl-gap,
-            var(--badge-size-xxl-gap)
-          );
-        }
-        &^&_size_xl {
-          min-width: var(
-            --badge-type-fill-size-xl-min-width,
-            var(--badge-size-xl-min-width)
-          );
-          min-height: var(
-            --badge-type-fill-size-xl-min-height,
-            var(--badge-size-xl-min-height)
-          );
-          max-width: var(
-            --badge-type-fill-size-xl-max-width,
-            var(--badge-size-xl-max-width)
-          );
-          max-height: var(
-            --badge-type-fill-size-xl-max-height,
-            var(--badge-size-xl-max-height)
-          );
-          padding: var(
-            --badge-type-fill-size-xl-padding,
-            var(--badge-size-xl-padding)
-          );
-          gap: var(
-            --badge-type-fill-size-xl-gap,
-            var(--badge-size-xl-gap)
-          );
-        }
-        &^&_size_l {
-          min-width: var(
-            --badge-type-fill-size-l-min-width,
-            var(--badge-size-l-min-width)
-          );
-          min-height: var(
-            --badge-type-fill-size-l-min-height,
-            var(--badge-size-l-min-height)
-          );
-          max-width: var(
-            --badge-type-fill-size-l-max-width,
-            var(--badge-size-l-max-width)
-          );
-          max-height: var(
-            --badge-type-fill-size-l-max-height,
-            var(--badge-size-l-max-height)
-          );
-          padding: var(
-            --badge-type-fill-size-l-padding,
-            var(--badge-size-l-padding)
-          );
-          gap: var(
-            --badge-type-fill-size-l-gap,
-            var(--badge-size-l-gap)
-          );
-        }
-        &^&_size_m {
-          min-width: var(
-            --badge-type-fill-size-m-min-width,
-            var(--badge-size-m-min-width)
-          );
-          min-height: var(
-            --badge-type-fill-size-m-min-height,
-            var(--badge-size-m-min-height)
-          );
-          max-width: var(
-            --badge-type-fill-size-m-max-width,
-            var(--badge-size-m-max-width)
-          );
-          max-height: var(
-            --badge-type-fill-size-m-max-height,
-            var(--badge-size-m-max-height)
-          );
-          padding: var(
-            --badge-type-fill-size-m-padding,
-            var(--badge-size-m-padding)
-          );
-          gap: var(
-            --badge-type-fill-size-m-gap,
-            var(--badge-size-m-gap)
-          );
-        }
-        &^&_size_s {
-          min-width: var(
-            --badge-type-fill-size-s-min-width,
-            var(--badge-size-s-min-width)
-          );
-          min-height: var(
-            --badge-type-fill-size-s-min-height,
-            var(--badge-size-s-min-height)
-          );
-          max-width: var(
-            --badge-type-fill-size-s-max-width,
-            var(--badge-size-s-max-width)
-          );
-          max-height: var(
-            --badge-type-fill-size-s-max-height,
-            var(--badge-size-s-max-height)
-          );
-          padding: var(
-            --badge-type-fill-size-s-padding,
-            var(--badge-size-s-padding)
-          );
-          gap: var(
-            --badge-type-fill-size-s-gap,
-            var(--badge-size-s-gap)
-          );
-        }
-        &^&_size_xs {
-          min-width: var(
-            --badge-type-fill-size-xs-min-width,
-            var(--badge-size-xs-min-width)
-          );
-          min-height: var(
-            --badge-type-fill-size-xs-min-height,
-            var(--badge-size-xs-min-height)
-          );
-          max-width: var(
-            --badge-type-fill-size-xs-max-width,
-            var(--badge-size-xs-max-width)
-          );
-          max-height: var(
-            --badge-type-fill-size-xs-max-height,
-            var(--badge-size-xs-max-height)
-          );
-          padding: var(
-            --badge-type-fill-size-xs-padding,
-            var(--badge-size-xs-padding)
-          );
-          gap: var(
-            --badge-type-fill-size-xs-gap,
-            var(--badge-size-xs-gap)
-          );
-        }
-        &^&_size_xxs {
-          min-width: var(
-            --badge-type-fill-size-xxs-min-width,
-            var(--badge-size-xxs-min-width)
-          );
-          min-height: var(
-            --badge-type-fill-size-xxs-min-height,
-            var(--badge-size-xxs-min-height)
-          );
-          max-width: var(
-            --badge-type-fill-size-xxs-max-width,
-            var(--badge-size-xxs-max-width)
-          );
-          max-height: var(
-            --badge-type-fill-size-xxs-max-height,
-            var(--badge-size-xxs-max-height)
-          );
-          padding: var(
-            --badge-type-fill-size-xxs-padding,
-            var(--badge-size-xxs-padding)
-          );
-          gap: var(
-            --badge-type-fill-size-xxs-gap,
-            var(--badge-size-xxs-gap)
-          );
-        }
-    }
-}
-:root {
-  --badge-size-xxl-padding: 1m 1.5m;
-  --badge-size-xxl-min-width: 40px;
-  --badge-size-xxl-min-height: 40px;
-  --badge-size-xxl-gap: 5px;
-  --badge-type-icon-size-xxl-max-width: 40px;
-  --badge-type-icon-size-xxl-max-height: 40px;
-
-  --badge-size-xl-padding: 0.5m 1.25m;
-  --badge-size-xl-min-width: 32px;
-  --badge-size-xl-min-height: 32px;
-  --badge-size-xl-gap: 6px;
-  --badge-type-icon-size-xl-max-width: 32px;
-  --badge-type-icon-size-xl-max-height: 32px;
-
-  --badge-size-l-padding: 0.5m 1m;
-  --badge-size-l-min-width: 28px;
-  --badge-size-l-min-height: 28px;
-  --badge-size-l-gap: 4px;
-  --badge-type-icon-size-l-max-width: 28px;
-  --badge-type-icon-size-l-max-height: 28px;
-
-  --badge-size-m-padding: 0 0.75m;
-  --badge-size-m-min-width: 24px;
-  --badge-size-m-min-height: 24px;
-  --badge-size-m-gap: 2px;
-  --badge-type-icon-size-m-max-width: 24px;
-  --badge-type-icon-size-m-max-height: 24px;
-
-  --badge-size-s-padding: 0 0.5m;
-  --badge-size-s-min-width: 20px;
-  --badge-size-s-min-height: 20px;
-  --badge-size-s-gap: 0px;
-  --badge-type-icon-size-s-max-width: 20px;
-  --badge-type-icon-size-s-max-height: 20px;
-
-  --badge-size-xs-padding: 0;
-  --badge-size-xs-min-width: 16px;
-  --badge-size-xs-min-height: 16px;
-  --badge-size-xs-gap: 2px;
-  --badge-type-icon-size-xs-max-width: 16px;
-  --badge-type-icon-size-xs-max-height: 16px;
-
-  --badge-size-xxs-padding: 0 0.5m;
-  --badge-size-xxs-min-width: 16px;
-  --badge-size-xxs-min-height: 16px;
-  --badge-size-xxs-gap: 0px;
-  --badge-type-icon-size-xxs-max-width: 16px;
-  --badge-type-icon-size-xxs-max-height: 16px;
-  --badge-shape-rounded: 0;
-}