$button__class: '#{$prefix}-button';

// Default font size
$button__font-size: rem-calc(16);
$button__line-height: rem-calc(24);

// Pill Font Sizes
$button__font-size--28: rem-calc(14);
$button__line-height--28: rem-calc(22);

// Circle Button Sizes
$button__size--20: rem-calc(20);
$button__font-size--20: rem-calc(8);
$button__size--28: rem-calc(28);
$button__font-size--28: rem-calc(12);
$button__size--32: rem-calc(32);
$button__font-size--32: rem-calc(14);
$button__size--36: rem-calc(36);
$button__font-size--36: rem-calc(14);
$button__size--40: rem-calc(40);
$button__font-size--40: rem-calc(14);
$button__size--44: rem-calc(44);
$button__font-size--44: rem-calc(14);
$button__size--56: rem-calc(56);
$button__font-size--56: rem-calc(24);
$button__size--68: rem-calc(68);
$button__font-size--68: rem-calc(28);
$button__size--72: rem-calc(72);
$button__font-size--72: rem-calc(32);
$button__size--84: rem-calc(84);
$button__font-size--84: rem-calc(36);

// Border Radius Sizes
$button__radius--28: rem-calc(16);
$button__radius--36: rem-calc(18);
$button__radius--40: rem-calc(20);
$button__radius--52: rem-calc(26);
$button__radius--round: $global-rounded !default;

// Set text alignment
$button__font-align: center !default;

// Set paddings
$button__padding--28: rem-calc(3) rem-calc(14);
$button__padding--36: rem-calc(6) rem-calc(18);
$button__padding--40: rem-calc(8) rem-calc(20);
$button__padding--52: rem-calc(14) rem-calc(26);

$button__transition-speed: 150ms;

// Set button font colors
$button__font-color: $md-black-100 !default;
$button__font-color--alt: $md-white-100 !default;

// Set color, background and cursor for disabled buttons.
$button__color--disabled: $black-04 !default;
$button__color--disabled--dark: $white-08 !default;
$button__font-color--disabled: $black-20 !default;
$button__font-color--disabled--dark: $white-20 !default;
$button__cursor--disabled: default !default;
$button__link-color--disabled: $button__font-color--disabled;

// Default button color settings.
$button__background-color: $md-gray-20 !default;
$button__background-color--dark: $white-24 !default;
$button__background-color--hover: $md-gray-30 !default;
$button__background-color--hover--dark: $white-32 !default;
$button__background-color--active: $md-gray-40 !default;
$button__background-color--active--dark: $white-40 !default;
$button__border-color--focus: $md-black-100 !default;

// Default button contrast colors
$button__background-color--contrast: $black-60 !default;
$button__background-color--hover--contrast: $black-68 !default;
$button__background-color--active--contrast: $black-76 !default;

// Default dark button contrast colors
$button__background-color--dark--contrast: $md-white-100 !default;
$button__background-color--hover--dark--contrast: $white-92 !default;
$button__background-color--active--dark--contrast: $white-84 !default;

// Blue button colors
$button--blue__background-color: $md-theme-50 !default;
$button--blue__background-color--hover: $md-theme-60 !default;
$button--blue__background-color--active: $md-theme-70 !default;

// Blue button contrast colors
$button--blue__background-color--contrast: $md-theme-60 !default;
$button--blue__background-color--hover--contrast: $md-theme-70 !default;
$button--blue__background-color--active--contrast: $md-theme-80 !default;

// Red button colors
$button--red__background-color: $md-red-50 !default;
$button--red__background-color--hover: $md-red-60 !default;
$button--red__background-color--active: $md-red-70 !default;

// Red button contrast colors
$button--red__background-color--contrast: $md-red-60 !default;
$button--red__background-color--hover--contrast: $md-red-70 !default;
$button--red__background-color--active--contrast: $md-red-80 !default;

// Green button colors
$button--green__background-color: $md-green-50 !default;
$button--green__background-color--hover: $md-green-60 !default;
$button--green__background-color--active: $md-green-70 !default;

// Green button contrast colors
$button--green__background-color--contrast: $md-green-60 !default;
$button--green__background-color--hover--contrast: $md-green-70 !default;
$button--green__background-color--active--contrast: $md-green-80 !default;

// Orange button colors
$button--orange__background-color: $md-orange-50 !default;
$button--orange__background-color--hover: $md-orange-60 !default;
$button--orange__background-color--active: $md-orange-70 !default;

// Orange button contrast colors
$button--orange__background-color--contrast: $md-orange-60 !default;
$button--orange__background-color--hover--contrast: $md-orange-70 !default;
$button--orange__background-color--active--contrast: $md-orange-80 !default;

// Yellow button colors
$button--yellow__background-color: $md-yellow-50 !default;
$button--yellow__background-color--hover: $md-yellow-60 !default;
$button--yellow__background-color--active: $md-yellow-70 !default;

// Yellow button contrast colors
$button--yellow__background-color--contrast: $md-yellow-60 !default;
$button--yellow__background-color--hover--contrast: $md-yellow-70 !default;
$button--yellow__background-color--active--contrast: $md-yellow-80 !default;

// Mint button colors
$button--mint__background-color: $md-mint-50 !default;
$button--mint__background-color--hover: $md-mint-60 !default;
$button--mint__background-color--active: $md-mint-70 !default;

// Mint button contrast colors
$button--mint__background-color--contrast: $md-mint-60 !default;
$button--mint__background-color--hover--contrast: $md-mint-70 !default;
$button--mint__background-color--active--contrast: $md-mint-80 !default;

// Purple button colors
$button--purple__background-color: $md-purple-50 !default;
$button--purple__background-color--hover: $md-purple-60 !default;
$button--purple__background-color--active: $md-purple-70 !default;

// Purple button contrast colors
$button--purple__background-color--contrast: $md-purple-60 !default;
$button--purple__background-color--hover--contrast: $md-purple-70 !default;
$button--purple__background-color--active--contrast: $md-purple-80 !default;

// Pink button colors
$button--pink__background-color: $md-pink-50 !default;
$button--pink__background-color--hover: $md-pink-60 !default;
$button--pink__background-color--active: $md-pink-70 !default;

// Pink button contrast colors
$button--pink__background-color--contrast: $md-pink-60 !default;
$button--pink__background-color--hover--contrast: $md-pink-70 !default;
$button--pink__background-color--active--contrast: $md-pink-80 !default;

// Cyan button colors
$button--cyan__background-color: $md-cyan-50 !default;
$button--cyan__background-color--hover: $md-cyan-60 !default;
$button--cyan__background-color--active: $md-cyan-70 !default;

// Cyan button contrast colors
$button--cyan__background-color--contrast: $md-cyan-60 !default;
$button--cyan__background-color--hover--contrast: $md-cyan-70 !default;
$button--cyan__background-color--active--contrast: $md-cyan-80 !default;

// White button colors
$button--white__background-color: $md-white-100 !default;
$button--white__background-color--hover: $md-gray-10 !default;
$button--white__background-color--active: $md-gray-30 !default;
$button--white__border: 0 0 0 rem-calc(1) $md-gray-20,
  0 rem-calc(1) rem-calc(2) 0 $md-gray-20;

// Dark Gray button colors
$button--dark-gray__background-color: $md-gray-90 !default;
$button--dark-gray__background-color--hover: $md-gray-80 !default;
$button--dark-gray__background-color--active: $md-gray-90 !default;

// Duck Egg button colors
$button--duck-egg__background-color: $md-gray-50 !default;
$button--duck-egg__background-color--hover: $md-gray-60 !default;
$button--duck-egg__background-color--active: $md-gray-70 !default;

// Violet button colors
$button--violet__background-color: $md-violet-50 !default;
$button--violet__background-color--hover: $md-violet-60 !default;
$button--violet__background-color--active: $md-violet-70 !default;

// Button Container Settings
$button-container__width: 116px;
$button-container--small__width: 104px;