

:root {

  --float-button-offset-block-end: var(--space-stack-xl);
  --float-button-offset-inline-end: var(--space-6);

  --float-button-size: var(--control-height-lg);

  --float-button-min-block-size: var(--control-height-lg);
  --float-button-padding-block: var(--space-2);
  --float-button-padding-inline: var(--space-1);

  --float-button-icon-size: var(--icon-size-md);

  --float-button-content-font-size: var(
    --font-size-2xs,
    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
  );
  --float-button-content-line-height: var(--line-height-tight);

  --float-button-shadow: var(--shadow-lg);

  --float-button-group-gap: var(--space-stack-md);
  --float-button-group-radius: var(--radius-lg);

  --float-button-badge-background: initial;
  --float-button-badge-foreground: hsl(var(--destructive-foreground));
  --float-button-badge-size: var(--space-4);
  --float-button-badge-padding-inline: var(--space-1);
  --float-button-badge-font-size: var(
    --font-size-2xs,
    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
  );
  --float-button-badge-inset-block-start: calc(var(--space-1) * -1);
  --float-button-badge-inset-inline-end: calc(var(--space-1) * -1);
  --float-button-badge-dot-size: var(--space-2);

  --float-button-progress-offset: 0turn;
  --float-button-progress-width: var(--space-1);
  --float-button-progress-color: initial;
  --float-button-progress-track-color: hsl(var(--border));

  --float-button-motion-translate: var(--float-button-size);
}
