@mixin setup-light-button {
  $button-font-family: $default-font-family !global;
  $button-border-radius: 6px !global;
  $button-font-size: (
    "tiny": 12px,
    "small": 14px,
    "medium": 14px,
    "large": 16px
  ) !global;
  $button-height: (
    "tiny": 22px,
    "small": 28px,
    "medium": 34px,
    "large": 40px
  ) !global;
  $button-padding: (
    "tiny": 0 6px,
    "small": 0 10px,
    "medium": 0 14px,
    "large": 0 18px
  ) !global;
  $round-button-padding: (
    "tiny": 0 10px,
    "small": 0 14px,
    "medium": 0 18px,
    "large": 0 22px
  ) !global;
  $button-icon-size: (
    "tiny": 14px,
    "small": 16px,
    "medium": 18px,
    "large": 20px
  ) !global;
  $button-border-color: (
    "default":  $--n-border-color,
    "primary": $--primary-6,
    "info": $--info-6,
    "success": $--success-6,
    "warning": $--warning-6,
    "error": $--error-6
  ) !global;
  $button-box-shadow-spread: 0px !global;
  $button-box-shadow-ripple-spread: 4px !global;
  $button-box-shadow-spread-alpha: .3 !global;
  $button-box-shadow: (
    'default': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'default'),
    'default-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'default'),
    'default-focus': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'default'),
    'default-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'default')),  
    'default-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'default')),
    'primary': none,
    'primary-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'primary'),
    'primary-focus': none,
    'primary-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'primary')),  
    'primary-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'primary')),
    'success': none,
    'success-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'success'),
    'success-focus': none,
    'success-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'success')),  
    'success-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'success')),
    'info': none,
    'info-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'info'),
    'info-focus': none,
    'info-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'info')),  
    'info-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'info')),
    'warning': none,
    'warning-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'warning'),
    'warning-focus': none,
    'warning-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'warning')),  
    'warning-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'warning')),
    'error': none,
    'error-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'error'),
    'error-focus': none,
    'error-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'error')),  
    'error-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'error'))
  ) !global;
  $button-ghost-alpha: 0;
  $button-ghost-hover-alpha: .1;
  $button-ghost-active-alpha: .15;
  $button-ghost-focus-alpha: .1;
  $button-ghost-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-alpha);
  $button-ghost-hover-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-hover-alpha);
  $button-ghost-active-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-active-alpha);
  $button-ghost-focus-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-focus-alpha);
  $button-background-color: (
    "default": mix($--n-border-color, white, $button-ghost-weight),
    "default-focus": mix($--n-border-color, white, $button-ghost-focus-weight),
    "default-hover": mix($--n-border-color, white, $button-ghost-hover-weight),
    "default-active": mix($--n-border-color, white, $button-ghost-active-weight),
    "primary": $--primary-6,
    "primary-focus": $--primary-5,
    "primary-hover": $--primary-5,
    "primary-active": $--primary-7,
    "info": $--info-6,
    "info-focus": $--info-5,
    "info-hover": $--info-5,
    "info-active": $--info-7,
    "success": $--success-6,
    "success-focus": $--success-5,
    "success-hover": $--success-5,
    "success-active": $--success-7,
    "warning": $--warning-6,
    "warning-focus": $--warning-5,
    "warning-hover": $--warning-5,
    "warning-active": $--warning-7,
    "error": $--error-6,
    "error-focus": $--error-5,
    "error-hover": $--error-5,
    "error-active": $--error-7,
  ) !global;
  $ghost-button-background-color: (
    "default": change-color($--n-secondary-text-color, $alpha: $button-ghost-alpha),
    "default-focus": change-color($--n-secondary-text-color, $alpha: $button-ghost-focus-alpha),
    "default-hover": change-color($--n-secondary-text-color, $alpha: $button-ghost-hover-alpha),
    "default-active": change-color($--n-secondary-text-color, $alpha: $button-ghost-active-alpha),
    "primary": change-color($--primary-6, $alpha: $button-ghost-alpha),
    "primary-focus": change-color($--primary-6, $alpha: $button-ghost-focus-alpha),
    "primary-hover": change-color($--primary-6, $alpha: $button-ghost-hover-alpha),
    "primary-active": change-color($--primary-6, $alpha: $button-ghost-active-alpha),
    "info": change-color($--info-6, $alpha: $button-ghost-alpha),
    "info-focus": change-color($--info-6, $alpha: $button-ghost-focus-alpha),
    "info-hover": change-color($--info-6, $alpha: $button-ghost-hover-alpha),
    "info-active": change-color($--info-6, $alpha: $button-ghost-active-alpha),
    "success": change-color($--success-6, $alpha: $button-ghost-alpha),
    "success-focus": change-color($--success-6, $alpha: $button-ghost-focus-alpha),
    "success-hover": change-color($--success-6, $alpha: $button-ghost-hover-alpha),
    "success-active": change-color($--success-6, $alpha: $button-ghost-active-alpha),
    "error": change-color($--error-6, $alpha: $button-ghost-alpha),
    "error-focus": change-color($--error-6, $alpha: $button-ghost-focus-alpha),
    "error-hover": change-color($--error-6, $alpha: $button-ghost-hover-alpha),
    "error-active": change-color($--error-6, $alpha: $button-ghost-active-alpha),
    "warning": change-color($--warning-6, $alpha: $button-ghost-alpha),
    "warning-focus": change-color($--warning-6, $alpha: $button-ghost-focus-alpha),
    "warning-hover": change-color($--warning-6, $alpha: $button-ghost-hover-alpha),
    "warning-active": change-color($--warning-6, $alpha: $button-ghost-active-alpha),
  ) !global;
  $ghost-button-color: (
    "default": $--n-secondary-text-color,
    "primary": $--primary-6,
    "info": $--info-6,
    "success": $--success-6,
    "warning": $--warning-6,
    "error": $--error-6
  )!global;
  $button-color: (
    "default": $--n-secondary-text-color,
    "primary": white,
    "info": white,
    "success": white,
    "warning": white,
    "error": white
  ) !global;
}