/*
* @category controls
* @component button
* @design collaboration-design
*/

@import 'core';
@import 'colors';
@import '../tools/functions/core';

$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: $black !default;
$button__font-color--alt: $white !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: $black-12 !default;
$button__background-color--dark: $white-24 !default;
$button__background-color--hover: $black-16 !default;
$button__background-color--hover--dark: $white-32 !default;
$button__background-color--active: $black-20 !default;
$button__background-color--active--dark: $white-40 !default;
$button__border-color--focus: $black !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: $white !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: $blue-base !default;
$button--blue__background-color--hover: $blue-hover !default;
$button--blue__background-color--active: $blue-press !default;

// Blue button contrast colors
$button--blue__background-color--contrast: $blue-base--contrast !default;
$button--blue__background-color--hover--contrast: $blue-hover--contrast !default;
$button--blue__background-color--active--contrast: $blue-press--contrast !default;

// Red button colors
$button--red__background-color: $red-base !default;
$button--red__background-color--hover: $red-hover !default;
$button--red__background-color--active: $red-press !default;

// Red button contrast colors
$button--red__background-color--contrast: $red-base--contrast !default;
$button--red__background-color--hover--contrast: $red-hover--contrast !default;
$button--red__background-color--active--contrast: $red-press--contrast !default;

// Green button colors
$button--green__background-color: $green-base !default;
$button--green__background-color--hover: $green-hover !default;
$button--green__background-color--active: $green-press !default;

// Green button contrast colors
$button--green__background-color--contrast: $green-base--contrast !default;
$button--green__background-color--hover--contrast: $green-hover--contrast !default;
$button--green__background-color--active--contrast: $green-press--contrast !default;

// Orange button colors
$button--orange__background-color: $orange-base !default;
$button--orange__background-color--hover: $orange-hover !default;
$button--orange__background-color--active: $orange-press !default;

// Orange button contrast colors
$button--orange__background-color--contrast: $orange-base--contrast !default;
$button--orange__background-color--hover--contrast: $orange-hover--contrast !default;
$button--orange__background-color--active--contrast: $orange-press--contrast !default;

// Yellow button colors
$button--yellow__background-color: $yellow-base !default;
$button--yellow__background-color--hover: $yellow-hover !default;
$button--yellow__background-color--active: $yellow-press !default;

// Yellow button contrast colors
$button--yellow__background-color--contrast: $yellow-base--contrast !default;
$button--yellow__background-color--hover--contrast: $yellow-hover--contrast !default;
$button--yellow__background-color--active--contrast: $yellow-press--contrast !default;

// Mint button colors
$button--mint__background-color: $mint-base !default;
$button--mint__background-color--hover: $mint-hover !default;
$button--mint__background-color--active: $mint-press !default;

// Mint button contrast colors
$button--mint__background-color--contrast: $mint-base--contrast !default;
$button--mint__background-color--hover--contrast: $mint-hover--contrast !default;
$button--mint__background-color--active--contrast: $mint-press--contrast !default;

// Purple button colors
$button--purple__background-color: $purple-base !default;
$button--purple__background-color--hover: $purple-hover !default;
$button--purple__background-color--active: $purple-press !default;

// Purple button contrast colors
$button--purple__background-color--contrast: $purple-base--contrast !default;
$button--purple__background-color--hover--contrast: $purple-hover--contrast !default;
$button--purple__background-color--active--contrast: $purple-press--contrast !default;

// Pink button colors
$button--pink__background-color: $pink-base !default;
$button--pink__background-color--hover: $pink-hover !default;
$button--pink__background-color--active: $pink-press !default;

// Pink button contrast colors
$button--pink__background-color--contrast: $pink-base--contrast !default;
$button--pink__background-color--hover--contrast: $pink-hover--contrast !default;
$button--pink__background-color--active--contrast: $pink-press--contrast !default;

// Cyan button colors
$button--cyan__background-color: $cyan-base !default;
$button--cyan__background-color--hover: $cyan-hover !default;
$button--cyan__background-color--active: $cyan-press !default;

// Cyan button contrast colors
$button--cyan__background-color--contrast: $cyan-base--contrast !default;
$button--cyan__background-color--hover--contrast: $cyan-hover--contrast !default;
$button--cyan__background-color--active--contrast: $cyan-press--contrast !default;

// White button colors
$button--white__background-color: $white !default;
$button--white__background-color--hover: $gray-7 !default;
$button--white__background-color--active: $gray-5 !default;
$button--white__border: 0 0 0 rem-calc(1) $gray-6, 0 rem-calc(1) rem-calc(2) 0 $gray-6;

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