.rs-badge {
  // Size variables (base md = 0.75rem)
  --rs-badge-font-size-xs: 0.625rem; // 10px
  --rs-badge-font-size-sm: 0.6875rem; // 11px
  --rs-badge-font-size-md: 0.75rem; // 12px
  --rs-badge-font-size-lg: 0.875rem; // 14px
  --rs-badge-font-size-xl: 1rem; // 16px

  --rs-badge-line-height-xs: 0.875rem; // 14px
  --rs-badge-line-height-sm: 0.9375rem; // 15px
  --rs-badge-line-height-md: 1rem; // 16px
  --rs-badge-line-height-lg: 1.125rem; // 18px
  --rs-badge-line-height-xl: 1.25rem; // 20px

  // One char size variables (for single character badges)
  --rs-badge-one-char-size-xs: 1rem; // 16px
  --rs-badge-one-char-size-sm: 1.125rem; // 18px
  --rs-badge-one-char-size-md: 1.25rem; // 20px
  --rs-badge-one-char-size-lg: 1.5rem; // 24px
  --rs-badge-one-char-size-xl: 1.75rem; // 28px

  // Dot size variables (for empty badges)
  --rs-badge-dot-size-xs: 0.375rem; // 6px
  --rs-badge-dot-size-sm: 0.5rem; // 8px
  --rs-badge-dot-size-md: 0.625rem; // 10px
  --rs-badge-dot-size-lg: 0.75rem; // 12px
  --rs-badge-dot-size-xl: 0.875rem; // 14px

  --rs-badge-offset-x: 5%;
  --rs-badge-offset-y: 5%;
  --rs-badge-move: var(--rs-badge-offset, 40%);
  --rs-badge-one-char-size: var(--rs-badge-one-char-size-md);
  --rs-badge-dot-size: var(--rs-badge-dot-size-md);
  --rs-badge-font-size: var(--rs-badge-font-size-md);
  --rs-badge-line-height: var(--rs-badge-line-height-md);

  --rs-badge-transform-top-start: translate(calc(-1 * var(--rs-badge-move)), calc(-1 * var(--rs-badge-move)));
  --rs-badge-transform-top-end: translate(var(--rs-badge-move), calc(-1 * var(--rs-badge-move)));
  --rs-badge-transform-bottom-start: translate(calc(-1 * var(--rs-badge-move)), var(--rs-badge-move));
  --rs-badge-transform-bottom-end: translate(var(--rs-badge-move), var(--rs-badge-move));
}

[dir='rtl'] .rs-badge {
  --rs-badge-transform-top-start: translate(calc(18px - var(--rs-badge-move)), calc(-1 * var(--rs-badge-move)));
  --rs-badge-transform-top-end: translate(calc(-1 * var(--rs-badge-move)), calc(-1 * var(--rs-badge-move)));
  --rs-badge-transform-bottom-start: translate(calc(18px - var(--rs-badge-move)), var(--rs-badge-move));
  --rs-badge-transform-bottom-end: translate(calc(-1 * var(--rs-badge-move)), var(--rs-badge-move));
}