/// Padding of a button, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
/// @group button
$buttonPadding: 0.344rem 0.75rem;

/// Width of a button having an icon with no label
/// @group button
$buttonIconOnlyWidth: 2.313rem;

/// Padding of a button having an icon with no label
/// @group button
$buttonIconOnlyPadding: 0.1875rem 0;

/// Background of a button
/// @group button
$buttonBg: #f3652b;

/// Text color of a button
/// @group button
$buttonTextColor: var(--primary-text-color);

/// Border of a button
/// @group button
$buttonBorder: 1px solid #f3652b;

/// Background of a button in hover state
/// @group button
$buttonHoverBg: #f5793f;

/// Text color of a button in hover state
/// @group button
$buttonTextHoverColor: var(--primary-text-color);

/// Border color of a button in hover state
/// @group button
$buttonHoverBorderColor: #f5793f;

/// Background of a button in pressed state
/// @group button
$buttonActiveBg: #eb6f3f;

/// Color of a button in pressed state
/// @group button
$buttonTextActiveColor: var(--primary-text-color);

/// Border color of a button in pressed state
/// @group button
$buttonActiveBorderColor: #eb6f3f;

/// Shadow of a raised button
/// @group button
$raisedButtonShadow:
  0px 3px 1px -2px rgba(0, 0, 0, 0.2),
  0px 2px 2px 0px rgba(0, 0, 0, 0.14),
  0px 1px 5px 0px rgba(0, 0, 0, 0.12);

/// Border radius of a rounded button
/// @group button
$roundedButtonBorderRadius: 2rem;

/// Alpha level of a text button background in hover state
/// @group button
$textButtonHoverBgOpacity: 0.04;

/// Alpha level of a text button background in active state
/// @group button
$textButtonActiveBgOpacity: 0.16;

/// Border style of a outlined button
/// @group button
$outlinedButtonBorder: 1px solid var(--surface-border);

/// Text color of a plain text button
/// @group button
$plainButtonTextColor: $textColor;

/// Background color of a plain text button in hover state
/// @group button
$plainButtonHoverBgColor: #1e1e1e;

/// Background color of a plain text button in active state
/// @group button
$plainButtonActiveBgColor: var(--plain-button-active-bg-color);

/// Background of a secondary button
/// @group button
$secondaryButtonBg: var(--secondary-button-bg);

/// Text color of a secondary button
/// @group button
$secondaryButtonTextColor: var(--secondary-button-text-color) !important;

/// Border of a secondary button
/// @group button
$secondaryButtonBorder: 1px solid var(--secondary-button-bg);

/// Background of a secondary button in hover state
/// @group button
$secondaryButtonHoverBg: var(--secondary-button-hover-bg);

/// Text color of a secondary button in hover state
/// @group button
$secondaryButtonTextHoverColor: var(--secondary-button-text-hover-color);

/// Border color of a secondary button in hover state
/// @group button
$secondaryButtonHoverBorderColor: var(--secondary-button-hover-border-color);

/// Background of a secondary button in pressed state
/// @group button
$secondaryButtonActiveBg: var(--secondary-button-active-bg);

/// Text color of a secondary button in pressed state
/// @group button
$secondaryButtonTextActiveColor: var(--secondary-button-text-active-color);

/// Border color of a secondary button in pressed state
/// @group button
$secondaryButtonActiveBorderColor: var(--secondary-button-active-border-color);

/// Box shadow of a secondary button in focused state
/// @group button
$secondaryButtonFocusShadow: 0 0 0 0.2rem $focusOutline;

/// Background of an info button
/// @group button
$infoButtonBg: #0b61c4;

/// Text color of an info button
/// @group button
$infoButtonTextColor: #ffffff;

/// Border of an info button
/// @group button
$infoButtonBorder: 1px solid #0b61c4;

/// Background of an info button in hover state
/// @group button
$infoButtonHoverBg: #0953a6;

/// Text color of an info button in hover state
/// @group button
$infoButtonTextHoverColor: #ffffff;

/// Border color of an info button in hover state
/// @group button
$infoButtonHoverBorderColor: #0953a6;

/// Background of an info button in pressed state
/// @group button
$infoButtonActiveBg: #0953a6;

/// Text color of an info button in pressed state
/// @group button
$infoButtonTextActiveColor: #ffffff;

/// Border color of an info button in pressed state
/// @group button
$infoButtonActiveBorderColor: #0953a6;

/// Box shadow of an info button in focused state
/// @group button
$infoButtonFocusShadow: 0 0 0 0.2rem lighten($infoButtonBg, 35%);

/// Background of a success button
/// @group button
$successButtonBg: #198236;

/// Text color of a success button
/// @group button
$successButtonTextColor: #ffffff;

/// Border of a success button
/// @group button
$successButtonBorder: 1px solid #198236;

/// Background of a success button in hover state
/// @group button
$successButtonHoverBg: #156f2e;

/// Text color of a success button in hover state
/// @group button
$successButtonTextHoverColor: #ffffff;

/// Border color of a success button in hover state
/// @group button
$successButtonHoverBorderColor: #156f2e;

/// Background of a success button in pressed state
/// @group button
$successButtonActiveBg: #156f2e;

/// Text Color of a success button in pressed state
/// @group button
$successButtonTextActiveColor: #ffffff;

/// Border color of a success button in pressed state
/// @group button
$successButtonActiveBorderColor: #156f2e;

/// Box shadow of a success button in focused state
/// @group button
$successButtonFocusShadow: 0 0 0 0.2rem lighten($successButtonBg, 35%);

/// Background of a warning button
/// @group button
$warningButtonBg: #e9ae18;

/// Text color of a warning button
/// @group button
$warningButtonTextColor: var(--warning-button-text-color);

/// Border of a warning button
/// @group button
$warningButtonBorder: 1px solid #e9ae18;

/// Background of a warning button in hover state
/// @group button
$warningButtonHoverBg: #c79413;

/// Text color of a warning button in hover state
/// @group button
$warningButtonTextHoverColor: var(--warning-button-text-color);

/// Border color of a warning button in hover state
/// @group button
$warningButtonHoverBorderColor: #c79413;

/// Background of a warning button in pressed state
/// @group button
$warningButtonActiveBg: #c79413;

/// Text color of a warning button in pressed state
/// @group button
$warningButtonTextActiveColor: var(--warning-button-text-color);

/// Border color of a warning button in pressed state
/// @group button
$warningButtonActiveBorderColor: #c79413;

/// Box shadow of a warning button in focused state
/// @group button
$warningButtonFocusShadow: 0 0 0 0.2rem lighten($warningButtonBg, 35%);

/// Background of a help button
/// @group button
$helpButtonBg: #9c27b0;

/// Text color of a help button
/// @group button
$helpButtonTextColor: #ffffff;

/// Border of a help button
/// @group button
$helpButtonBorder: 1px solid #9c27b0;

/// Background of a help help in hover state
/// @group button
$helpButtonHoverBg: #8e24aa;

/// Text color of a help button in hover state
/// @group button
$helpButtonTextHoverColor: #ffffff;

/// Border color of a help button in hover state
/// @group button
$helpButtonHoverBorderColor: var(--help-button-hover-border-color);

/// Background of a help button in pressed state
/// @group button
$helpButtonActiveBg: var(--help-button-active);

/// Text color of a help button in pressed state
/// @group button
$helpButtonTextActiveColor: #ffffff;

/// Border color of a help button in pressed state
/// @group button
$helpButtonActiveBorderColor: var(--help-button-active);

/// Box shadow of a help button in focused state
/// @group button
$helpButtonFocusShadow: 0 0 0 0.2rem #ce93d8;

/// Background of a danger button
/// @group button
$dangerButtonBg: #c4170b;

/// Text color of a danger button
/// @group button
$dangerButtonTextColor: #ffffff;

/// Border of a danger button
/// @group button
$dangerButtonBorder: 1px solid #c4170b;

/// Background of a danger button in hover state
/// @group button
$dangerButtonHoverBg: #a61409;

/// Text color of a danger button in hover state
/// @group button
$dangerButtonTextHoverColor: #ffffff;

/// Border color of a danger button in hover state
/// @group button
$dangerButtonHoverBorderColor: #a61409;

/// Background of a danger button in pressed state
/// @group button
$dangerButtonActiveBg: #a61409;

/// Text color of a danger button in pressed state
/// @group button
$dangerButtonTextActiveColor: #ffffff;

/// Border color of a danger button in pressed state
/// @group button
$dangerButtonActiveBorderColor: #a61409;

/// Box shadow of a danger button in focused state
/// @group button
$dangerButtonFocusShadow: 0 0 0 0.2rem lighten($dangerButtonBg, 35%);

/// Text color of a link button
/// @group button
$linkButtonColor: var(--text-color-link);

/// Text color of a link button in hover state
/// @group button
$linkButtonHoverColor: var(--text-color-link-hover);

/// Text decoration of a link button in hover state
/// @group button
$linkButtonTextHoverDecoration: underline;

/// Box shadow of a link button in focused state
/// @group button
$linkButtonFocusShadow: 0 0 0 0.2rem $focusOutlineColor;

/// Background of a toggle button
/// @group button
$toggleButtonBg: var(--toggle-button-bg);

/// Border of a toggle button
/// @group button
$toggleButtonBorder: 1px solid var(--toggle-button-border);

/// Text color of a toggle button
/// @group button
$toggleButtonTextColor: $textColor;

/// Icon color of a toggle button
/// @group button
$toggleButtonIconColor: $textSecondaryColor;

/// Background of a toggle button in hover state
/// @group button
$toggleButtonHoverBg: var(--toggle-button-hover-bg);

/// Border color of a toggle button in hover state
/// @group button
$toggleButtonHoverBorderColor: var(--toggle-button-border);

/// Text color of a toggle button in hover state
/// @group button
$toggleButtonTextHoverColor: $textColor;

/// Icon color of a toggle button in hover state
/// @group button
$toggleButtonIconHoverColor: $textSecondaryColor;

/// Background of a toggle button in selected state
/// @group button
$toggleButtonActiveBg: var(--primary-color);

/// Border color of a toggle button in selected state
/// @group button
$toggleButtonActiveBorderColor: var(--primary-color);

/// Text color of a toggle button in selected state
/// @group button
$toggleButtonTextActiveColor: var(--primary-text-color);

/// Icon color of a toggle button in selected state
/// @group button
$toggleButtonIconActiveColor: var(--primary-text-color);

/// Hover background of a toggle button in selected state
/// @group button
$toggleButtonActiveHoverBg: var(--primary-dark-color);

/// Hover border color of a toggle button in selected state
/// @group button
$toggleButtonActiveHoverBorderColor: var(--primary-dark-color);

/// Hover text color of a toggle button in selected state
/// @group button
$toggleButtonTextActiveHoverColor: var(--primary-text-color);

/// Hover icon of a toggle button in selected state
/// @group button
$toggleButtonIconActiveHoverColor: var(--primary-text-color);

/// Width of the speed dial button
/// @group button
$speedDialButtonWidth: 4rem;

/// Height of the speed dial button
/// @group button
$speedDialButtonHeight: 4rem;

/// Icon size of the speed dial button
/// @group button
$speedDialButtonIconFontSize: 1.3rem;

/// Width of a speed dial item
/// @group button
$speedDialActionWidth: 3rem;

/// Height of a speed dial item
/// @group button
$speedDialActionHeight: 3rem;

/// Background color of a speed dial item
/// @group button
$speedDialActionBg: #ffffff;

/// Background color of a speed dial item in hover state
/// @group button
$speedDialActionHoverBg: #f5f5f5;

/// Text color of a speed dial item
/// @group button
$speedDialActionTextColor: #212121;

/// Text color of a speed dial item in hover state
/// @group button
$speedDialActionTextHoverColor: #212121;