:host {
  /* general */
  --button-general-border-radius: var(--us-button-general-border-radius, var(--border-radius-m));
  --button-general-text-transform: var(--us-button-general-text-transform, none);
  /* primary */
  /* bg */
  --button-primary-background: var(--us-button-primary-background, var(--color-primary-600));
  --button-primary-background-hover: var(--us-button-primary-background-hover, var(--color-primary-800));
  --button-primary-background-focused: var(--us-button-primary-background-focused, var(--color-primary-800));
  --button-primary-background-pressed: var(--us-button-primary-background-pressed, var(--color-primary-1000));
  --button-primary-background-disabled: var(--us-button-primary-background-disabled, var(--color-neutral-200));
  /* box shadow */
  --button-primary-boxshadow: var(--us-button-primary-boxshadow, none);
  --button-primary-boxshadow-hover: var(--us-button-primary-boxshadow-hover, none);
  --button-primary-boxshadow-pressed: var(--us-button-primary-boxshadow-pressed, none);
  /* font */
  --button-primary-font: var(--us-button-primary-font, var(--text-button-m));
  /* color */
  --button-primary-text-color: var(--us-button-primary-text-color, var(--color-text-0));
  --button-primary-icon-color: var(--us-button-primary-icon-color, var(--color-text-0));
  --button-primary-text-hover-color: var(--us-button-primary-text-hover-color, var(--color-text-0));
  --button-primary-icon-hover-color: var(--us-button-primary-icon-hover-color, var(--color-text-0));
  --button-primary-text-focused-color: var(--us-button-primary-text-focused-color, var(--color-text-0));
  --button-primary-icon-focused-color: var(--us-button-primary-icon-focused-color, var(--color-text-0));
  --button-primary-text-pressed-color: var(--us-button-primary-text-pressed-color, var(--color-text-0));
  --button-primary-icon-pressed-color: var(--us-button-primary-icon-pressed-color, var(--color-text-0));
  --button-primary-text-disabled-color: var(--us-button-primary-text-disabled-color, var(--color-text-700));
  --button-primary-icon-disabled-color: var(--us-button-primary-text-disabled-color, var(--color-text-700));
  /* border / outline */
  --button-primary-border-width: var(--us-button-primary-border-width, 1px);
  --button-primary-border-color: var(--us-button-primary-border-color, transparent);
  --button-primary-border-hover-width: var(--us-button-primary-border-hover-width, 1px);
  --button-primary-border-hover-color: var(--us-button-primary-border-hover-color, transparent);
  --button-primary-border-focused-width: var(--us-button-primary-border-focused-width, 3px);
  --button-primary-border-focused-color: var(--us-button-primary-border-focused-color, var(--color-primary-200));
  --button-primary-border-pressed-width: var(--us-button-primary-border-pressed-width, 1px);
  --button-primary-border-pressed-color: var(--us-button-primary-border-pressed-color, transparent);
  --button-primary-border-disabled-width: var(--us-button-primary-border-disabled-width, 1px);
  --button-primary-border-disabled-color: var(--us-button-primary-border-disabled-color, transparent);
  --button-primary-border-radius: var(--us-button-primary-border-radius, var(--button-general-border-radius));
  /* padding */
  --button-primary-v-padding: var(--us-button-primary-v-padding, var(--space-inner-m));
  --button-primary-h-padding: var(--us-button-primary-h-padding, var(--space-inner-l));
 
  /* secondary */
  /* bg */
  --button-secondary-background: var(--us-button-secondary-background, var(--color-neutral-0));
  --button-secondary-background-hover: var(--us-button-secondary-background-hover, var(--color-primary-100));
  --button-secondary-background-focused: var(--us-button-secondary-background-focused, var(--color-primary-100));
  --button-secondary-background-pressed: var(--us-button-secondary-background-pressed, var(--color-primary-200));
  --button-secondary-background-disabled: var(--us-button-secondary-background-disabled, var(--color-neutral-200));
  /* box shadow */
  --button-secondary-boxshadow: var(--us-button-secondary-boxshadow, none);
  --button-secondary-boxshadow-hover: var(--us-button-secondary-boxshadow-hover, none);
  --button-secondary-boxshadow-pressed: var(--us-button-secondary-boxshadow-pressed, none);
  /* font */
  --button-secondary-font: var(--us-button-secondary-font, var(--text-button-m));
  /* color */
  --button-secondary-text-color: var(--us-button-secondary-text-color, var(--color-primary-800));
  --button-secondary-icon-color: var(--us-button-secondary-icon-color, var(--color-primary-800));
  --button-secondary-text-hover-color: var(--us-button-secondary-text-hover-color, var(--color-primary-1000));
  --button-secondary-icon-hover-color: var(--us-button-secondary-icon-hover-color, var(--color-primary-1000));
  --button-secondary-text-focused-color: var(--us-button-secondary-text-focused-color, var(--color-primary-1000));
  --button-secondary-icon-focused-color: var(--us-button-secondary-icon-focused-color, var(--color-primary-1000));
  --button-secondary-text-pressed-color: var(--us-button-secondary-text-pressed-color, var(--color-primary-1000));
  --button-secondary-icon-pressed-color: var(--us-button-secondary-icon-pressed-color, var(--color-primary-1000));
  --button-secondary-text-disabled-color: var(--us-button-secondary-text-disabled-color, var(--color-text-700));
  --button-secondary-icon-disabled-color: var(--us-button-secondary-text-disabled-color, var(--color-text-700));
  /* border / outline */
  --button-secondary-border-width: var(--us-button-secondary-border-width, 1px);
  --button-secondary-border-color: var(--us-button-secondary-border-color, var(--color-primary-600));
  --button-secondary-border-hover-width: var(--us-button-secondary-border-hover-width, 1px);
  --button-secondary-border-hover-color: var(--us-button-secondary-border-hover-color, var(--color-primary-600));
  --button-secondary-border-focused-width: var(--us-button-secondary-border-focused-width, 3px);
  --button-secondary-border-focused-color: var(--us-button-secondary-border-focused-color, var(--color-primary-600));
  --button-secondary-border-pressed-width: var(--us-button-secondary-border-pressed-width, 1px);
  --button-secondary-border-pressed-color: var(--us-button-secondary-border-pressed-color, var(--color-primary-600));
  --button-secondary-border-disabled-width: var(--us-button-secondary-border-disabled-width, 1px);
  --button-secondary-border-disabled-color: var(--us-button-secondary-border-disabled-color, transparent);
  --button-secondary-border-radius: var(--us-button-secondary-border-radius, var(--button-general-border-radius));
  /* padding */
  --button-secondary-v-padding: var(--us-button-secondary-v-padding, var(--space-inner-m));
  --button-secondary-h-padding: var(--us-button-secondary-h-padding, var(--space-inner-l));
  
  /* tertiary-action */
  /* bg */
  --button-tertiary-action-background: var(--us-button-tertiary-action-background, var(--color-primary-100));
  --button-tertiary-action-background-hover: var(--us-button-tertiary-action-background-hover, var(--color-primary-100));
  --button-tertiary-action-background-focused: var(--us-button-tertiary-action-background-focused, var(--color-primary-100));
  --button-tertiary-action-background-pressed: var(--us-button-tertiary-action-background-pressed, var(--color-primary-200));
  --button-tertiary-action-background-disabled: var(--us-button-tertiary-action-background-disabled, var(--color-neutral-200));
  /* box shadow */
  --button-tertiary-action-boxshadow: var(--us-button-tertiary-action-boxshadow, none);
  --button-tertiary-action-boxshadow-hover: var(--us-button-tertiary-action-boxshadow-hover, none);
  --button-tertiary-action-boxshadow-pressed: var(--us-button-tertiary-action-boxshadow-pressed, none);
  /* font */
  --button-tertiary-action-font: var(--us-button-tertiary-action-font, var(--text-button-m));
  /* color */
  --button-tertiary-action-text-color: var(--us-button-tertiary-action-text-color, var(--color-primary-1000));
  --button-tertiary-action-icon-color: var(--us-button-tertiary-action-icon-color, var(--color-primary-1000));
  --button-tertiary-action-text-hover-color: var(--us-button-tertiary-action-text-hover-color, var(--color-primary-1000));
  --button-tertiary-action-icon-hover-color: var(--us-button-tertiary-action-icon-hover-color, var(--color-primary-1000));
  --button-tertiary-action-text-focused-color: var(--us-button-tertiary-action-text-focused-color, var(--color-primary-1000));
  --button-tertiary-action-icon-focused-color: var(--us-button-tertiary-action-icon-focused-color, var(--color-primary-1000));
  --button-tertiary-action-text-pressed-color: var(--us-button-tertiary-action-text-pressed-color, var(--color-primary-1000));
  --button-tertiary-action-icon-pressed-color: var(--us-button-tertiary-action-icon-pressed-color, var(--color-primary-1000));
  --button-tertiary-action-text-disabled-color: var(--us-button-tertiary-action-text-disabled-color, var(--color-text-700));
  --button-tertiary-action-icon-disabled-color: var(--us-button-tertiary-action-text-disabled-color, var(--color-text-700));
  /* border / outline */
  --button-tertiary-action-border-width: var(--us-button-tertiary-action-border-width, 1px);
  --button-tertiary-action-border-color: var(--us-button-tertiary-action-border-color, transparent);
  --button-tertiary-action-border-hover-width: var(--us-button-tertiary-action-border-hover-width, 1px);
  --button-tertiary-action-border-hover-color: var(--us-button-tertiary-action-border-hover-color, var(--color-primary-600));
  --button-tertiary-action-border-focused-width: var(--us-button-tertiary-action-border-focused-width, 3px);
  --button-tertiary-action-border-focused-color: var(--us-button-tertiary-action-border-focused-color, var(--color-primary-600));
  --button-tertiary-action-border-pressed-width: var(--us-button-tertiary-action-border-pressed-width, 1px);
  --button-tertiary-action-border-pressed-color: var(--us-button-tertiary-action-border-pressed-color, transparent);
  --button-tertiary-action-border-disabled-width: var(--us-button-tertiary-action-border-disabled-width, 1px);
  --button-tertiary-action-border-disabled-color: var(--us-button-tertiary-action-border-disabled-color, transparent);
  --button-tertiary-action-border-radius: var(--us-button-tertiary-action-border-radius, var(--button-general-border-radius));
  /* padding */
  --button-tertiary-action-v-padding: var(--us-button-tertiary-action-v-padding, var(--space-inner-m));
  --button-tertiary-action-h-padding: var(--us-button-tertiary-action-h-padding, var(--space-inner-l));

  /* tertiary-neutral */
  /* bg */
  --button-tertiary-neutral-background: var(--us-button-tertiary-neutral-background, var(--color-neutral-200));
  --button-tertiary-neutral-background-hover: var(--us-button-tertiary-neutral-background-hover, var(--color-neutral-200));
  --button-tertiary-neutral-background-focused: var(--us-button-tertiary-neutral-background-focused, var(--color-neutral-200));
  --button-tertiary-neutral-background-pressed: var(--us-button-tertiary-neutral-background-pressed, var(--color-neutral-300));
  --button-tertiary-neutral-background-disabled: var(--us-button-tertiary-neutral-background-disabled, var(--color-neutral-200));
  /* box shadow */
  --button-tertiary-neutral-boxshadow: var(--us-button-tertiary-neutral-boxshadow, none);
  --button-tertiary-neutral-boxshadow-hover: var(--us-button-tertiary-neutral-boxshadow-hover, none);
  --button-tertiary-neutral-boxshadow-pressed: var(--us-button-tertiary-neutral-boxshadow-pressed, none);
  /* font */
  --button-tertiary-neutral-font: var(--us-button-tertiary-neutral-font, var(--text-button-m));
  /* color */
  --button-tertiary-neutral-text-color: var(--us-button-tertiary-neutral-text-color, var(--color-text-1000));
  --button-tertiary-neutral-icon-color: var(--us-button-tertiary-neutral-icon-color, var(--color-text-900));
  --button-tertiary-neutral-text-hover-color: var(--us-button-tertiary-neutral-text-hover-color, var(--color-text-1000));
  --button-tertiary-neutral-icon-hover-color: var(--us-button-tertiary-neutral-icon-hover-color, var(--color-text-900));
  --button-tertiary-neutral-text-focused-color: var(--us-button-tertiary-neutral-text-focused-color, var(--color-text-1000));
  --button-tertiary-neutral-icon-focused-color: var(--us-button-tertiary-neutral-icon-focused-color, var(--color-text-900));
  --button-tertiary-neutral-text-pressed-color: var(--us-button-tertiary-neutral-text-pressed-color, var(--color-text-1000));
  --button-tertiary-neutral-icon-pressed-color: var(--us-button-tertiary-neutral-icon-pressed-color, var(--color-text-1000));
  --button-tertiary-neutral-text-disabled-color: var(--us-button-tertiary-neutral-text-disabled-color, var(--color-text-700));
  --button-tertiary-neutral-icon-disabled-color: var(--us-button-tertiary-neutral-icon-disabled-color, var(--color-text-600));
  /* border / outline */
  --button-tertiary-neutral-border-width: var(--us-button-tertiary-neutral-border-width, 1px);
  --button-tertiary-neutral-border-color: var(--us-button-tertiary-neutral-border-color, var(--color-neutral-300));
  --button-tertiary-neutral-border-hover-width: var(--us-button-tertiary-neutral-border-hover-width, 1px);
  --button-tertiary-neutral-border-hover-color: var(--us-button-tertiary-neutral-border-hover-color, var(--color-neutral-600));
  --button-tertiary-neutral-border-focused-width: var(--us-button-tertiary-neutral-border-focused-width, 3px);
  --button-tertiary-neutral-border-focused-color: var(--us-button-tertiary-neutral-border-focused-color, var(--color-neutral-600));
  --button-tertiary-neutral-border-pressed-width: var(--us-button-tertiary-neutral-border-pressed-width, 1px);
  --button-tertiary-neutral-border-pressed-color: var(--us-button-tertiary-neutral-border-pressed-color, transparent);
  --button-tertiary-neutral-border-disabled-width: var(--us-button-tertiary-neutral-border-disabled-width, 1px);
  --button-tertiary-neutral-border-disabled-color: var(--us-button-tertiary-neutral-border-disabled-color, transparent);
  --button-tertiary-neutral-border-radius: var(--us-button-tertiary-neutral-border-radius, var(--button-general-border-radius));
  /* padding */
  --button-tertiary-neutral-v-padding: var(--us-button-tertiary-neutral-v-padding, var(--space-inner-m));
  --button-tertiary-neutral-h-padding: var(--us-button-tertiary-neutral-h-padding, var(--space-inner-l));

  /* icon-primary */
  /* padding */
  --button-icon-primary-v-padding: var(--us-button-icon-primary-v-padding, var(--space-inner-xs));
  --button-icon-primary-h-padding: var(--us-button-icon-primary-h-padding, var(--space-inner-xs));
  /* border */
  --button-icon-primary-border-width: var(--us-button-icon-primary-border-width, var(--button-tertiary-neutral-border-width));
  --button-icon-primary-border-color: var(--us-button-icon-primary-border-color, var(--button-tertiary-neutral-border-color));
  --button-icon-primary-border-hover-width: var(--us-button-icon-primary-border-hover-width, var(--button-tertiary-neutral-border-hover-width));
  --button-icon-primary-border-hover-color: var(--us-button-icon-primary-border-hover-color, var(--button-tertiary-neutral-border-hover-color));
  --button-icon-primary-border-focused-width: var(--us-button-icon-primary-border-focused-width, var(--button-tertiary-neutral-border-focused-width));
  --button-icon-primary-border-focused-color: var(--us-button-icon-primary-border-focused-color, var(--button-tertiary-neutral-border-focused-color));
  --button-icon-primary-border-pressed-width: var(--us-button-icon-primary-border-pressed-width, var(--button-tertiary-neutral-border-pressed-width));
  --button-icon-primary-border-pressed-color: var(--us-button-icon-primary-border-pressed-color, var(--button-tertiary-neutral-border-pressed-color));
  --button-icon-primary-border-disabled-width: var(--us-button-icon-primary-border-disabled-width, var(--button-tertiary-neutral-border-disabled-width));
  --button-icon-primary-border-disabled-color: var(--us-button-icon-primary-border-disabled-color, var(--button-tertiary-neutral-border-disabled-color));
  --button-icon-primary-border-radius: var(--us-button-icon-primary-border-radius, var(--button-tertiary-neutral-border-radius));
  /* bg */
  --button-icon-primary-background: var(--us-button-icon-primary-background, var(--button-tertiary-neutral-background));
  --button-icon-primary-background-hover: var(--us-button-icon-primary-background-hover, var(--button-tertiary-neutral-background-hover));
  --button-icon-primary-background-focused: var(--us-button-icon-primary-background-focused, var(--button-tertiary-neutral-background-focused));
  --button-icon-primary-background-pressed: var(--us-button-icon-primary-background-pressed, var(--button-tertiary-neutral-background-pressed));
  --button-icon-primary-background-disabled: var(--us-button-icon-primary-background-disabled, var(--button-tertiary-neutral-background-disabled));
  /* color */
  --button-icon-primary-icon-color: var(--us-button-icon-primary-icon-color, var(--button-tertiary-neutral-icon-color));
  --button-icon-primary-icon-hover-color: var(--us-button-icon-primary-icon-hover-color, var(--button-tertiary-neutral-icon-hover-color));
  --button-icon-primary-icon-focused-color: var(--us-button-icon-primary-icon-focused-color, var(--button-tertiary-neutral-icon-focused-color));
  --button-icon-primary-icon-pressed-color: var(--us-button-icon-primary-icon-pressed-color, var(--button-tertiary-neutral-icon-pressed-color));
  --button-icon-primary-icon-disabled-color: var(--us-button-icon-primary-icon-disabled-color, var(--button-tertiary-neutral-icon-disabled-color));
  /* box shadow */
  --button-icon-primary-icon-boxshadow: var(--us-button-icon-primary-icon-boxshadow, var(--button-tertiary-neutral-boxshadow));
  --button-icon-primary-icon-boxshadow-hover: var(--us-button-icon-primary-icon-boxshadow-hover, var(--button-tertiary-neutral-boxshadow-hover));
  --button-icon-primary-icon-boxshadow-pressed: var(--us-button-icon-primary-icon-boxshadow-pressed, var(--button-tertiary-neutral-boxshadow-pressed));

  /* like */
  --button-like-border-pressed: var(--us-button-like-border-pressed, var(--button-tertiary-neutral-border-pressed-color));
  --button-like-background-pressed: var(--us-button-like-background-pressed, var(--color-success-100));
  --button-like-text-pressed-color: var(--us-button-like-text-pressed-color, var(--button-tertiary-neutral-text-pressed-color));
  --button-like-icon-pressed-color: var(--us-button-like-icon-pressed-color, var(--color-success-800));

  /* dislike */
  --button-dislike-border-pressed: var(--us-button-dislike-border-pressed, var(--button-tertiary-neutral-border-pressed-color));
  --button-dislike-background-pressed: var(--us-button-dislike-background-pressed, var(--color-danger-100));
  --button-dislike-text-pressed-color: var(--us-button-dislike-text-pressed-color, var(--button-tertiary-neutral-text-pressed-color));
  --button-dislike-icon-pressed-color: var(--us-button-dislike-icon-pressed-color, var(--color-danger-800));

  /* icon-secondary */
  /* m */
  --button-icon-secondary-m-padding: var(--us-button-icon-secondary-m-padding, 0);
  --button-icon-secondary-m-border-radius: var(--us-button-icon-secondary-m-border-radius, 100%);
  /* s */
  --button-icon-secondary-s-padding: var(--us-button-icon-secondary-s-padding, var(--space-inner-xs));
  --button-icon-secondary-s-border-radius: var(--us-button-icon-secondary-s-border-radius, 100%);
  /* dark */
  --button-icon-secondary-dark-background: var(--us-button-icon-secondary-dark-background, transparent);
  --button-icon-secondary-dark-color: var(--us-button-icon-secondary-dark-color, var(--color-neutral-900));
  --button-icon-secondary-dark-hover-background: var(--us-button-icon-secondary-dark-hover-background, transparent);
  --button-icon-secondary-dark-hover-color: var(--us-button-icon-secondary-dark-hover-color, var(--color-text-1000));
  --button-icon-secondary-dark-focused-background: var(--us-button-icon-secondary-dark-focused-background, var(--color-neutral-0));
  --button-icon-secondary-dark-focused-color: var(--us-button-icon-secondary-dark-focused-color, var(--color-text-900));
  --button-icon-secondary-dark-pressed-background: var(--us-button-icon-secondary-dark-pressed-background, var(--color-neutral-300));
  --button-icon-secondary-dark-pressed-color: var(--us-button-icon-secondary-dark-pressed-color, var(--color-text-900));
  --button-icon-secondary-dark-disabled-background: var(--us-button-icon-secondary-dark-disabled-background, transparent);
  --button-icon-secondary-dark-disabled-color: var(--us-button-icon-secondary-dark-disabled-color, var(--color-text-600));
  /* box shadow */
  --button-icon-secondary-dark-boxshadow: var(--us-button-icon-secondary-dark-boxshadow, none);
  --button-icon-secondary-dark-boxshadow-hover: var(--us-button-icon-secondary-dark-boxshadow-hover, none);
  --button-icon-secondary-dark-boxshadow-pressed: var(--us-button-icon-secondary-dark-boxshadow-pressed, none);
  /* light */
  --button-icon-secondary-light-background: var(--us-button-icon-secondary-light-background, transparent);
  --button-icon-secondary-light-color: var(--us-button-icon-secondary-light-color, var(--color-text-700));
  --button-icon-secondary-light-hover-background: var(--us-button-icon-secondary-light-hover-background, transparent);
  --button-icon-secondary-light-hover-color: var(--us-button-icon-secondary-light-hover-color, var(--color-primary-600));
  --button-icon-secondary-light-focused-background: var(--us-button-icon-secondary-light-focused-background, var(--color-primary-100));
  --button-icon-secondary-light-focused-color: var(--us-button-icon-secondary-light-focused-color, var(--color-primary-800));
  --button-icon-secondary-light-pressed-background: var(--us-button-icon-secondary-light-pressed-background, var(--color-primary-200));
  --button-icon-secondary-light-pressed-color: var(--us-button-icon-secondary-light-pressed-color, var(--color-primary-800));
  --button-icon-secondary-light-disabled-background: var(--us-button-icon-secondary-light-disabled-background, transparent);
  --button-icon-secondary-light-disabled-color: var(--us-button-icon-secondary-light-disabled-color, var(--color-text-600));
  /* box shadow */
  --button-icon-secondary-light-boxshadow: var(--us-button-icon-secondary-light-boxshadow, none);
  --button-icon-secondary-light-boxshadow-hover: var(--us-button-icon-secondary-light-boxshadow-hover, none);
  --button-icon-secondary-light-boxshadow-pressed: var(--us-button-icon-secondary-light-boxshadow-pressed, none);
}