:root {
  --dmd-button-border-radius: var(--dmd-radius);
  --dmd-button-text-shadow: none;
  --dmd-button-file-background: var(--dmd-color-grey-100);
  --dmd-button-padding-inline: var(--dmd-spacing);
  --dmd-button-padding-block: var(--dmd-spacing-sm);
  --dmd-button-gap: 0.75ch;
  --dmd-button-outline-offset: 4px;
  --dmd-button-font-weight: var(--dmd-font-weight-base);
  --dmd-button-line-height: var(--dmd-font-line-height);

  /* Default variant */
  --dmd-button-background: var(--dmd-theme-background);
  --dmd-button-background-hover: var(--dmd-theme-background);
  --dmd-button-background-disabled: var(--dmd-theme-background);
  --dmd-button-border-color: var(--dmd-theme-border-color);
  --dmd-button-border-color-hover: var(--dmd-theme-color);
  --dmd-button-border-color-disabled: var(--dmd-theme-border-color);
  --dmd-button-color: var(--dmd-theme-color);
  --dmd-button-color-hover: var(--dmd-theme-color);
  --dmd-button-color-disabled: var(--dmd-theme-color-muted);

  /* Primary variant */
  --dmd-button-primary-background: var(--dmd-color-grey-800);
  --dmd-button-primary-background-hover: var(--dmd-color-grey-900);
  --dmd-button-primary-background-disabled: var(--dmd-color-grey-600);
  --dmd-button-primary-border-color: var(--dmd-button-primary-background);
  --dmd-button-primary-border-color-hover: var(
    --dmd-button-primary-background-hover
  );
  --dmd-button-primary-border-color-disabled: var(
    --dmd-button-primary-background-disabled
  );
  --dmd-button-primary-color: var(--dmd-theme-background);
  --dmd-button-primary-color-hover: var(--dmd-theme-background);
  --dmd-button-primary-color-disabled: var(--dmd-theme-background);

  /* Secondary variant */
  --dmd-button-secondary-background: var(--dmd-theme-background-muted);
  --dmd-button-secondary-background-hover: var(--dmd-theme-background-muted);
  --dmd-button-secondary-background-disabled: var(--dmd-theme-background-muted);
  --dmd-button-secondary-border-color: var(--dmd-theme-background-muted);
  --dmd-button-secondary-border-color-hover: var(--dmd-theme-color);
  --dmd-button-secondary-border-color-disabled: var(
    --dmd-theme-background-muted
  );
  --dmd-button-secondary-color: var(--dmd-theme-color);
  --dmd-button-secondary-color-hover: var(--dmd-theme-color);
  --dmd-button-secondary-color-disabled: var(--dmd-theme-color-muted);

  /* Text variant */
  --dmd-button-text-background: none;
  --dmd-button-text-background-hover: var(--dmd-color-grey-100);
  --dmd-button-text-background-disabled: none;
  --dmd-button-text-border-color: transparent;
  --dmd-button-text-border-color-hover: transparent;
  --dmd-button-text-border-color-disabled: transparent;
  --dmd-button-text-color: var(--dmd-theme-color);
  --dmd-button-text-color-hover: var(--dmd-theme-color);
  --dmd-button-text-color-disabled: var(--dmd-theme-color-muted);
}
