@ardium-ui/ui 1.0.1 → 1.0.3

package/themes/default/_coloring.scss

@@ -1,137 +1,137 @@
-@import '../variables';
-
-@mixin typeColors($prefix: 'cmpcl') {
-  &.ard-color-none {
-    --ard-#{$prefix}--bg: #{$bg};
-    --ard-#{$prefix}--bg-colored: #{$bg-alt};
-    --ard-#{$prefix}--bg-colored-light: #{$detail-light};
-    --ard-#{$prefix}--bg-header: #{$bg-f};
-    --ard-#{$prefix}--bg-colored-verylight: #{$bg-d};
-    --ard-#{$prefix}--on-bg: #{$text};
-    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
-    --ard-#{$prefix}--border: #{$text};
-    --ard-#{$prefix}--border-light: #{$text2};
-    --ard-#{$prefix}--content: #{$text};
-    --ard-#{$prefix}--content-light: #{$text-alt};
-    --ard-#{$prefix}--overlay-rgb: #{$overlay-rgb};
-    --ard-#{$prefix}--overlay: #{$overlay};
-    --ard-#{$prefix}--overlay-colored: #{$overlay};
-    --ard-#{$prefix}--overlay-colored-light: #{$text-alt};
-  }
-  &.ard-color-primary {
-    --ard-#{$prefix}--bg: #{$main500};
-    --ard-#{$prefix}--bg-colored: #{$main500};
-    --ard-#{$prefix}--bg-colored-light: #{$main100};
-    --ard-#{$prefix}--bg-header: #{$main100};
-    --ard-#{$prefix}--bg-colored-verylight: #{$main50};
-    --ard-#{$prefix}--on-bg: #{$text-alt};
-    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
-    --ard-#{$prefix}--border: #{$main300};
-    --ard-#{$prefix}--border-light: #{$main100};
-    --ard-#{$prefix}--content: #{$main700};
-    --ard-#{$prefix}--content-light: #{$main300};
-    --ard-#{$prefix}--overlay-rgb: #{$main500-rgb};
-    --ard-#{$prefix}--overlay: #{$overlay};
-    --ard-#{$prefix}--overlay-colored: #{$main700};
-    --ard-#{$prefix}--overlay-colored-light: #{$main100};
-  }
-  &.ard-color-secondary {
-    --ard-#{$prefix}--bg: #{$scnd500};
-    --ard-#{$prefix}--bg-colored: #{$scnd500};
-    --ard-#{$prefix}--bg-colored-light: #{$scnd50};
-    --ard-#{$prefix}--bg-header: #{$scnd50};
-    --ard-#{$prefix}--bg-colored-verylight: #{$scnd50};
-    --ard-#{$prefix}--on-bg: #{$text-alt};
-    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
-    --ard-#{$prefix}--border: #{$scnd300};
-    --ard-#{$prefix}--border-light: #{$scnd100};
-    --ard-#{$prefix}--content: #{$scnd700};
-    --ard-#{$prefix}--content-light: #{$scnd300};
-    --ard-#{$prefix}--overlay-rgb: #{$scnd500-rgb};
-    --ard-#{$prefix}--overlay: #{$overlay};
-    --ard-#{$prefix}--overlay-colored: #{$scnd700};
-    --ard-#{$prefix}--overlay-colored-light: #{$scnd100};
-  }
-  &.ard-color-warn {
-    --ard-#{$prefix}--bg: #{$warn500};
-    --ard-#{$prefix}--bg-colored: #{$warn500};
-    --ard-#{$prefix}--bg-colored-light: #{$warn50};
-    --ard-#{$prefix}--bg-header: #{$warn50};
-    --ard-#{$prefix}--bg-colored-verylight: #{$warn50};
-    --ard-#{$prefix}--on-bg: #{$text-alt};
-    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
-    --ard-#{$prefix}--border: #{$warn300};
-    --ard-#{$prefix}--border-light: #{$warn100};
-    --ard-#{$prefix}--content: #{$warn700};
-    --ard-#{$prefix}--content-light: #{$warn100};
-    --ard-#{$prefix}--overlay-rgb: #{$warn500-rgb};
-    --ard-#{$prefix}--overlay: #{$overlay};
-    --ard-#{$prefix}--overlay-colored: #{$warn700};
-    --ard-#{$prefix}--overlay-colored-light: #{$warn100};
-  }
-  &.ard-color-danger {
-    --ard-#{$prefix}--bg: #{$danger700};
-    --ard-#{$prefix}--bg-colored: #{$danger700};
-    --ard-#{$prefix}--bg-colored-light: #{$danger100};
-    --ard-#{$prefix}--bg-header: #{$danger100};
-    --ard-#{$prefix}--bg-colored-verylight: #{$danger50};
-    --ard-#{$prefix}--on-bg: #{$text-alt};
-    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
-    --ard-#{$prefix}--border: #{$danger300};
-    --ard-#{$prefix}--border-light: #{$danger100};
-    --ard-#{$prefix}--content: #{$danger900};
-    --ard-#{$prefix}--content-light: #{$danger500};
-    --ard-#{$prefix}--overlay-rgb: #{$danger700-rgb};
-    --ard-#{$prefix}--overlay: #{$overlay};
-    --ard-#{$prefix}--overlay-colored: #{$danger700};
-    --ard-#{$prefix}--overlay-colored-light: #{$danger300};
-  }
-  &.ard-color-success {
-    --ard-#{$prefix}--bg: #{$success700};
-    --ard-#{$prefix}--bg-colored: #{$success700};
-    --ard-#{$prefix}--bg-colored-light: #{$success50};
-    --ard-#{$prefix}--bg-header: #{$success50};
-    --ard-#{$prefix}--bg-colored-verylight: #{$success50};
-    --ard-#{$prefix}--on-bg: #{$text-alt};
-    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
-    --ard-#{$prefix}--border: #{$success300};
-    --ard-#{$prefix}--border-light: #{$success100};
-    --ard-#{$prefix}--content: #{$success900};
-    --ard-#{$prefix}--content-light: #{$success300};
-    --ard-#{$prefix}--overlay-rgb: #{$success700-rgb};
-    --ard-#{$prefix}--overlay: #{$overlay};
-    --ard-#{$prefix}--overlay-colored: #{$success700};
-    --ard-#{$prefix}--overlay-colored-light: #{$success300};
-  }
-  &.ard-color-info {
-    --ard-#{$prefix}--bg: #{$info500};
-    --ard-#{$prefix}--bg-colored: #{$info500};
-    --ard-#{$prefix}--bg-colored-light: #{$info50};
-    --ard-#{$prefix}--bg-header: #{$info50};
-    --ard-#{$prefix}--bg-colored-verylight: #{$info50};
-    --ard-#{$prefix}--on-bg: #{$text-alt};
-    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
-    --ard-#{$prefix}--border: #{$info300};
-    --ard-#{$prefix}--border-light: #{$info100};
-    --ard-#{$prefix}--content: #{$info700};
-    --ard-#{$prefix}--content-light: #{$info300};
-    --ard-#{$prefix}--overlay-rgb: #{$info500-rgb};
-    --ard-#{$prefix}--overlay: #{$overlay};
-    --ard-#{$prefix}--overlay-colored: #{$info700};
-    --ard-#{$prefix}--overlay-colored-light: #{$info100};
-  }
-  &.ard-color-currentColor {
-    --ard-#{$prefix}--bg: #{$bg};
-    --ard-#{$prefix}--bg-colored: currentColor;
-    --ard-#{$prefix}--on-bg: currentColor;
-    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
-    --ard-#{$prefix}--border: currentColor;
-    --ard-#{$prefix}--border-light: currentColor;
-    --ard-#{$prefix}--content: currentColor;
-    --ard-#{$prefix}--content-light: currentColor;
-    --ard-#{$prefix}--overlay-rgb: #{$overlay-rgb};
-    --ard-#{$prefix}--overlay: #{$overlay};
-    --ard-#{$prefix}--overlay-colored: currentColor;
-    --ard-#{$prefix}--overlay-colored-light: currentColor;
-  }
-}
+@import '../variables';
+
+@mixin typeColors($prefix: 'cmpcl') {
+  &.ard-color-none {
+    --ard-#{$prefix}--bg: #{$bg};
+    --ard-#{$prefix}--bg-colored: #{$bg-alt};
+    --ard-#{$prefix}--bg-colored-light: #{$detail-light};
+    --ard-#{$prefix}--bg-header: #{$bg-f};
+    --ard-#{$prefix}--bg-colored-verylight: #{$bg-d};
+    --ard-#{$prefix}--on-bg: #{$text};
+    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+    --ard-#{$prefix}--border: #{$text};
+    --ard-#{$prefix}--border-light: #{$text2};
+    --ard-#{$prefix}--content: #{$text};
+    --ard-#{$prefix}--content-light: #{$text-alt};
+    --ard-#{$prefix}--overlay-rgb: #{$overlay-rgb};
+    --ard-#{$prefix}--overlay: #{$overlay};
+    --ard-#{$prefix}--overlay-colored: #{$overlay};
+    --ard-#{$prefix}--overlay-colored-light: #{$text-alt};
+  }
+  &.ard-color-primary {
+    --ard-#{$prefix}--bg: #{$main500};
+    --ard-#{$prefix}--bg-colored: #{$main500};
+    --ard-#{$prefix}--bg-colored-light: #{$main100};
+    --ard-#{$prefix}--bg-header: #{$main100};
+    --ard-#{$prefix}--bg-colored-verylight: #{$main50};
+    --ard-#{$prefix}--on-bg: #{$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+    --ard-#{$prefix}--border: #{$main300};
+    --ard-#{$prefix}--border-light: #{$main100};
+    --ard-#{$prefix}--content: #{$main700};
+    --ard-#{$prefix}--content-light: #{$main300};
+    --ard-#{$prefix}--overlay-rgb: #{$main500-rgb};
+    --ard-#{$prefix}--overlay: #{$overlay};
+    --ard-#{$prefix}--overlay-colored: #{$main700};
+    --ard-#{$prefix}--overlay-colored-light: #{$main100};
+  }
+  &.ard-color-secondary {
+    --ard-#{$prefix}--bg: #{$scnd500};
+    --ard-#{$prefix}--bg-colored: #{$scnd500};
+    --ard-#{$prefix}--bg-colored-light: #{$scnd50};
+    --ard-#{$prefix}--bg-header: #{$scnd50};
+    --ard-#{$prefix}--bg-colored-verylight: #{$scnd50};
+    --ard-#{$prefix}--on-bg: #{$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+    --ard-#{$prefix}--border: #{$scnd300};
+    --ard-#{$prefix}--border-light: #{$scnd100};
+    --ard-#{$prefix}--content: #{$scnd700};
+    --ard-#{$prefix}--content-light: #{$scnd300};
+    --ard-#{$prefix}--overlay-rgb: #{$scnd500-rgb};
+    --ard-#{$prefix}--overlay: #{$overlay};
+    --ard-#{$prefix}--overlay-colored: #{$scnd700};
+    --ard-#{$prefix}--overlay-colored-light: #{$scnd100};
+  }
+  &.ard-color-warn {
+    --ard-#{$prefix}--bg: #{$warn500};
+    --ard-#{$prefix}--bg-colored: #{$warn500};
+    --ard-#{$prefix}--bg-colored-light: #{$warn50};
+    --ard-#{$prefix}--bg-header: #{$warn50};
+    --ard-#{$prefix}--bg-colored-verylight: #{$warn50};
+    --ard-#{$prefix}--on-bg: #{$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+    --ard-#{$prefix}--border: #{$warn300};
+    --ard-#{$prefix}--border-light: #{$warn100};
+    --ard-#{$prefix}--content: #{$warn700};
+    --ard-#{$prefix}--content-light: #{$warn100};
+    --ard-#{$prefix}--overlay-rgb: #{$warn500-rgb};
+    --ard-#{$prefix}--overlay: #{$overlay};
+    --ard-#{$prefix}--overlay-colored: #{$warn700};
+    --ard-#{$prefix}--overlay-colored-light: #{$warn100};
+  }
+  &.ard-color-danger {
+    --ard-#{$prefix}--bg: #{$danger700};
+    --ard-#{$prefix}--bg-colored: #{$danger700};
+    --ard-#{$prefix}--bg-colored-light: #{$danger100};
+    --ard-#{$prefix}--bg-header: #{$danger100};
+    --ard-#{$prefix}--bg-colored-verylight: #{$danger50};
+    --ard-#{$prefix}--on-bg: #{$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+    --ard-#{$prefix}--border: #{$danger300};
+    --ard-#{$prefix}--border-light: #{$danger100};
+    --ard-#{$prefix}--content: #{$danger900};
+    --ard-#{$prefix}--content-light: #{$danger500};
+    --ard-#{$prefix}--overlay-rgb: #{$danger700-rgb};
+    --ard-#{$prefix}--overlay: #{$overlay};
+    --ard-#{$prefix}--overlay-colored: #{$danger700};
+    --ard-#{$prefix}--overlay-colored-light: #{$danger300};
+  }
+  &.ard-color-success {
+    --ard-#{$prefix}--bg: #{$success700};
+    --ard-#{$prefix}--bg-colored: #{$success700};
+    --ard-#{$prefix}--bg-colored-light: #{$success50};
+    --ard-#{$prefix}--bg-header: #{$success50};
+    --ard-#{$prefix}--bg-colored-verylight: #{$success50};
+    --ard-#{$prefix}--on-bg: #{$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+    --ard-#{$prefix}--border: #{$success300};
+    --ard-#{$prefix}--border-light: #{$success100};
+    --ard-#{$prefix}--content: #{$success900};
+    --ard-#{$prefix}--content-light: #{$success300};
+    --ard-#{$prefix}--overlay-rgb: #{$success700-rgb};
+    --ard-#{$prefix}--overlay: #{$overlay};
+    --ard-#{$prefix}--overlay-colored: #{$success700};
+    --ard-#{$prefix}--overlay-colored-light: #{$success300};
+  }
+  &.ard-color-info {
+    --ard-#{$prefix}--bg: #{$info500};
+    --ard-#{$prefix}--bg-colored: #{$info500};
+    --ard-#{$prefix}--bg-colored-light: #{$info50};
+    --ard-#{$prefix}--bg-header: #{$info50};
+    --ard-#{$prefix}--bg-colored-verylight: #{$info50};
+    --ard-#{$prefix}--on-bg: #{$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+    --ard-#{$prefix}--border: #{$info300};
+    --ard-#{$prefix}--border-light: #{$info100};
+    --ard-#{$prefix}--content: #{$info700};
+    --ard-#{$prefix}--content-light: #{$info300};
+    --ard-#{$prefix}--overlay-rgb: #{$info500-rgb};
+    --ard-#{$prefix}--overlay: #{$overlay};
+    --ard-#{$prefix}--overlay-colored: #{$info700};
+    --ard-#{$prefix}--overlay-colored-light: #{$info100};
+  }
+  &.ard-color-currentColor {
+    --ard-#{$prefix}--bg: #{$bg};
+    --ard-#{$prefix}--bg-colored: currentColor;
+    --ard-#{$prefix}--on-bg: currentColor;
+    --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+    --ard-#{$prefix}--border: currentColor;
+    --ard-#{$prefix}--border-light: currentColor;
+    --ard-#{$prefix}--content: currentColor;
+    --ard-#{$prefix}--content-light: currentColor;
+    --ard-#{$prefix}--overlay-rgb: #{$overlay-rgb};
+    --ard-#{$prefix}--overlay: #{$overlay};
+    --ard-#{$prefix}--overlay-colored: currentColor;
+    --ard-#{$prefix}--overlay-colored-light: currentColor;
+  }
+}

package/themes/default/_dropdown-arrow.scss

@@ -1,12 +1,12 @@
-@import '../variables';
-
-@mixin dropdown-arrow($size: $dropdown-button-size) {
-  width: $size;
-  height: $size;
-  border: calc($size / 2) solid transparent;
-  position: relative;
-  border-bottom-color: $detail;
-  border-right-color: $detail;
-  transform: rotate(45deg) translate(-17.67771%, -17.67771%);
-  box-sizing: border-box;
-}
+@import '../variables';
+
+@mixin dropdown-arrow($size: $dropdown-button-size) {
+  width: $size;
+  height: $size;
+  border: calc($size / 2) solid transparent;
+  position: relative;
+  border-bottom-color: $detail;
+  border-right-color: $detail;
+  transform: rotate(45deg) translate(-17.67771%, -17.67771%);
+  box-sizing: border-box;
+}

package/themes/default/_mixins.scss

@@ -1,70 +1,70 @@
-@import '../variables';
-
-@mixin icon($fill: 0, $wght: 500, $grad: 0, $opsz: 48) {
-  font-family: 'Material Symbols Outlined';
-  font-size: 1.5em;
-  font-variation-settings:
-    'FILL' #{$fill},
-    'wght' #{$wght},
-    'GRAD' #{$grad},
-    'opsz' #{$opsz};
-}
-
-@mixin focus-overlay($size: 0) {
-  position: absolute;
-  top: -#{$size};
-  bottom: -#{$size};
-  left: -#{$size};
-  right: -#{$size};
-  opacity: 0;
-  border-radius: inherit;
-  pointer-events: none;
-
-  transition: opacity 0.2s ease;
-}
-@mixin focus-overlay-scale-addon() {
-  > .ard-focus-overlay {
-    transform: scale(0.2);
-
-    transition:
-      opacity 0.2s ease,
-      transform 0.1s ease;
-  }
-
-  &:hover,
-  &:focus {
-    > .ard-focus-overlay {
-      transform: scale(1);
-    }
-  }
-}
-
-@mixin formAppearances() {
-  &.ard-appearance-outlined {
-    --ard-appearance-background: #{$bg};
-    --ard-appearance-border: 1px solid #{$border};
-  }
-  &.ard-appearance-filled {
-    --ard-appearance-background: #{$bg-f};
-    --ard-appearance-border: none;
-  }
-  &.ard-appearance-transparent {
-    --ard-appearance-background: transparent;
-    --ard-appearance-border: none;
-  }
-}
-
-@mixin formVariants() {
-  border-radius: var(--ard-variant-border-radius);
-
-  &.ard-variant-rounded,
-  &.ard-variant-semirounded {
-    --ard-variant-border-radius: 8px;
-  }
-  &.ard-variant-pill {
-    --ard-variant-border-radius: 9999px;
-  }
-  &.ard-variant-sharp {
-    --ard-variant-border-radius: 0;
-  }
-}
+@import '../variables';
+
+@mixin icon($fill: 0, $wght: 500, $grad: 0, $opsz: 48) {
+  font-family: 'Material Symbols Outlined';
+  font-size: 1.5em;
+  font-variation-settings:
+    'FILL' #{$fill},
+    'wght' #{$wght},
+    'GRAD' #{$grad},
+    'opsz' #{$opsz};
+}
+
+@mixin focus-overlay($size: 0) {
+  position: absolute;
+  top: -#{$size};
+  bottom: -#{$size};
+  left: -#{$size};
+  right: -#{$size};
+  opacity: 0;
+  border-radius: inherit;
+  pointer-events: none;
+
+  transition: opacity 0.2s ease;
+}
+@mixin focus-overlay-scale-addon() {
+  > .ard-focus-overlay {
+    transform: scale(0.2);
+
+    transition:
+      opacity 0.2s ease,
+      transform 0.1s ease;
+  }
+
+  &:hover,
+  &:focus {
+    > .ard-focus-overlay {
+      transform: scale(1);
+    }
+  }
+}
+
+@mixin formAppearances() {
+  &.ard-appearance-outlined {
+    --ard-appearance-background: #{$bg};
+    --ard-appearance-border: 1px solid #{$border};
+  }
+  &.ard-appearance-filled {
+    --ard-appearance-background: #{$bg-f};
+    --ard-appearance-border: none;
+  }
+  &.ard-appearance-transparent {
+    --ard-appearance-background: transparent;
+    --ard-appearance-border: none;
+  }
+}
+
+@mixin formVariants() {
+  border-radius: var(--ard-variant-border-radius);
+
+  &.ard-variant-rounded,
+  &.ard-variant-semirounded {
+    --ard-variant-border-radius: 8px;
+  }
+  &.ard-variant-pill {
+    --ard-variant-border-radius: 9999px;
+  }
+  &.ard-variant-sharp {
+    --ard-variant-border-radius: 0;
+  }
+}

package/themes/default/badge.scss

@@ -1,94 +1,94 @@
-@use './coloring' as CM;
-
-.ard-badge-host {
-  position: relative;
-}
-.ard-badge {
-  @include CM.typeColors();
-  position: absolute;
-  display: flex;
-  align-items: center;
-  pointer-events: none;
-
-  //! colors
-  background: var(--ard-cmpcl--bgcolored);
-  color: var(--ard-cmpcl--on-bg-colored);
-
-  //! variants
-  &.ard-variant-pill {
-    border-radius: 9999px;
-  }
-  &.ard-variant-rounded {
-    border-radius: calc(var(--ard-_badge-size) * 0.25);
-  }
-  &.ard-variant-sharp {
-    border-radius: 0;
-  }
-
-  //! hidden
-  &.ard-badge-hidden {
-    display: none;
-  }
-
-  //! sizes
-  font-size: var(--ard-_badge-size);
-  min-width: calc(var(--ard-_badge-size) * 1.375);
-  height: calc(var(--ard-_badge-size) * 1.375);
-
-  .ard-badge-content {
-    padding: 0 calc(var(--ard-_badge-size) * 0.5);
-  }
-
-  &.ard-badge-size-small {
-    --ard-_badge-size: 0.55rem;
-    font-weight: 300;
-    letter-spacing: 0.2px;
-  }
-  &.ard-badge-size-medium {
-    --ard-_badge-size: 0.667rem;
-    font-weight: 400;
-    letter-spacing: 0.2px;
-  }
-  &.ard-badge-size-large {
-    --ard-_badge-size: 0.8125rem;
-    font-weight: 500;
-    letter-spacing: 0.2px;
-  }
-
-  //! overlap
-  --ard-_badge-overlap-offset-x: 0%;
-
-  &.ard-badge-overlap {
-    --ard-_badge-overlap-offset-x: 50%;
-  }
-  &.ard-badge-position-above-before {
-    transform: translate(var(--ard-_badge-overlap-offset-x), 50%);
-  }
-  &.ard-badge-position-above-after {
-    transform: translate(calc(-1 * var(--ard-_badge-overlap-offset-x)), 50%);
-  }
-  &.ard-badge-position-below-after {
-    transform: translate(calc(-1 * var(--ard-_badge-overlap-offset-x)), -50%);
-  }
-  &.ard-badge-position-below-before {
-    transform: translate(var(--ard-_badge-overlap-offset-x), -50%);
-  }
-
-  //! positions
-  &.ard-badge-position-above-before,
-  &.ard-badge-position-below-before {
-    right: 100%;
-  }
-  &.ard-badge-position-above-after,
-  &.ard-badge-position-below-after {
-    left: 100%;
-  }
-  &.ard-badge-position-below-before,
-  &.ard-badge-position-below-after {
-    top: 100%;
-  }
-  &.ard-badge-position-above-before,
-  &.ard-badge-position-above-after {
-    bottom: 100%;
-  }
-}
+@use './coloring' as CM;
+
+.ard-badge-host {
+  position: relative;
+}
+.ard-badge {
+  @include CM.typeColors();
+  position: absolute;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+
+  //! colors
+  background: var(--ard-cmpcl--bgcolored);
+  color: var(--ard-cmpcl--on-bg-colored);
+
+  //! variants
+  &.ard-variant-pill {
+    border-radius: 9999px;
+  }
+  &.ard-variant-rounded {
+    border-radius: calc(var(--ard-_badge-size) * 0.25);
+  }
+  &.ard-variant-sharp {
+    border-radius: 0;
+  }
+
+  //! hidden
+  &.ard-badge-hidden {
+    display: none;
+  }
+
+  //! sizes
+  font-size: var(--ard-_badge-size);
+  min-width: calc(var(--ard-_badge-size) * 1.375);
+  height: calc(var(--ard-_badge-size) * 1.375);
+
+  .ard-badge-content {
+    padding: 0 calc(var(--ard-_badge-size) * 0.5);
+  }
+
+  &.ard-badge-size-small {
+    --ard-_badge-size: 0.55rem;
+    font-weight: 300;
+    letter-spacing: 0.2px;
+  }
+  &.ard-badge-size-medium {
+    --ard-_badge-size: 0.667rem;
+    font-weight: 400;
+    letter-spacing: 0.2px;
+  }
+  &.ard-badge-size-large {
+    --ard-_badge-size: 0.8125rem;
+    font-weight: 500;
+    letter-spacing: 0.2px;
+  }
+
+  //! overlap
+  --ard-_badge-overlap-offset-x: 0%;
+
+  &.ard-badge-overlap {
+    --ard-_badge-overlap-offset-x: 50%;
+  }
+  &.ard-badge-position-above-before {
+    transform: translate(var(--ard-_badge-overlap-offset-x), 50%);
+  }
+  &.ard-badge-position-above-after {
+    transform: translate(calc(-1 * var(--ard-_badge-overlap-offset-x)), 50%);
+  }
+  &.ard-badge-position-below-after {
+    transform: translate(calc(-1 * var(--ard-_badge-overlap-offset-x)), -50%);
+  }
+  &.ard-badge-position-below-before {
+    transform: translate(var(--ard-_badge-overlap-offset-x), -50%);
+  }
+
+  //! positions
+  &.ard-badge-position-above-before,
+  &.ard-badge-position-below-before {
+    right: 100%;
+  }
+  &.ard-badge-position-above-after,
+  &.ard-badge-position-below-after {
+    left: 100%;
+  }
+  &.ard-badge-position-below-before,
+  &.ard-badge-position-below-after {
+    top: 100%;
+  }
+  &.ard-badge-position-above-before,
+  &.ard-badge-position-above-after {
+    bottom: 100%;
+  }
+}