////
/// @group button
////

@import '@react-md/icon/dist/scss/functions';
@import '@react-md/theme/dist/scss/helpers';
@import '@react-md/theme/dist/scss/mixins';
@import '@react-md/theme/dist/scss/variables';
@import '@react-md/utils/dist/scss/variables';

/// Boolean if text buttons with icons should have the icons inherit the current
/// color. If this is disabled, only icon buttons will inherit the current text
/// color.
/// @type Boolean
$rmd-button-text-icon-inherit-color: true !default;

/// The border radius to apply to text buttons.
/// @type Number
$rmd-button-text-border-radius: 0.5rem !default;

/// The amount of left and right padding to apply to text buttons.
/// @type Number
$rmd-button-text-horizontal-padding: 1rem !default;

/// The amount of top and bottom padding to apply to text buttons. Since buttons
/// are now displayed as inline-flex, it is generally recommended to keep this
/// value at 0 and just increase the height of the button instead.
///
/// @type Number
$rmd-button-text-vertical-padding: 0 !default;

/// The height for text buttons.
/// @type Number
$rmd-button-text-height: 2.25rem !default;

/// The min width for text buttons.
/// @type Number
$rmd-button-text-min-width: 4rem !default;

/// The text button's icon size. This is smaller than the normal icon size by
/// default since buttons have additional padding. You can set this to `null` if
/// you want consistent icon sizes.
/// @type Number
$rmd-button-text-icon-size: 1.125rem !default;

/// The border radius to apply to all icon buttons.
/// @type Number
$rmd-button-icon-border-radius: 50% !default;

/// The height and width to apply to an icon button.
/// @type Number
$rmd-button-icon-size: 3rem !default;

/// The base box-shadow width to apply to buttons
/// @type Number
$rmd-button-outline-width: 1px !default;

/// The base box-shadow to apply to buttons when outlined. This will normally be
/// used along with a color variable to define a box shadow.
/// @type String
$rmd-button-box-shadow: inset 0 0 0 !default;

/// This is the color that will be applied to the box-shadow/border for the
/// button when the `outline` theme type is applied **unless** one of the theme
/// values are defined.
/// @type Color
$rmd-button-outline-color: #999 !default;

/// This is the background color that will be applied when the theme type prop
/// on buttons is set to "clear".
/// @type Color
$rmd-button-background-color: transparent !default;

/// This is the text color that will be applied when the theme type prop on
/// buttons is set to "clear".
///
/// @require rmd-theme-var
/// @type Color
$rmd-button-color: rmd-theme-var(text-primary-on-background) !default;

/// The transition time for a contained button to raise to the pressed
/// elevation.
/// @type Number
$rmd-button-contained-elevation-transition-time: 0.15s !default;

/// The elevation to use for a resting contained button. This should be a number
/// between 0 and 24.
/// @type Number
$rmd-button-contained-resting-elevation: 2 !default;

/// The elevation to use for a contained button that is being pressed. This
/// should be a number between 0 and 24.
/// @type Number
$rmd-button-contained-pressed-elevation: 4 !default;

/// The z-index to use for the floating action button.
///
/// @require $rmd-utils-temporary-element-z-index
/// @type Number
$rmd-button-floating-z-index: $rmd-utils-temporary-element-z-index !default;

/// The default page margin to use for the floating action button positions.
///
/// @type Number
$rmd-button-floating-margin: 1.5rem !default;

/// The size to use for a `CircularProgress` that exists as a child of the
/// `Button`. The styles will only be created if this value is not `null`, the
/// `@react-md/progress` package has been installed, and the
/// `@react-md/progress`'s `mixin`s have been imported in the same file as the
/// `@react-md/button`'s `mixin`s.
///
/// @example scss - Includes `CircularProgress` size<!-- no-compile -->
///   @import '@react-md/button/dist/scss/mixins';
///   @import '@react-md/progress/dist/scss/mixins';
///   @import '@react-md/utils/dist/scss/mixins';
///
///   // can also manually set it to a different value if desired:
///   // $rmd-button-circular-progress-size: 1.5rem;
///
///   // or @include react-md-button;
///   @include react-md-utils;
///
/// @example scss - Does not include `CircularProgress` size<!-- no-compile -->
///   // bad example since `@react-md/progress` was not imported
///   @import '@react-md/button/dist/scss/mixins';
///   @import '@react-md/utils/dist/scss/mixins';
///
///   // or @include react-md-button;
///   @include react-md-utils;
///
/// @example scss - Opt-out of `CircularProgress` size<!-- no-compile -->
///   @import '@react-md/button/dist/scss/mixins';
///   @import '@react-md/progress/dist/scss/mixins';
///   @import '@react-md/utils/dist/scss/mixins';
///
///   // manually set it to `null` to prevent it from being added
///   $rmd-button-circular-progress-size: null;
///
///   // or @include react-md-button;
///   @include react-md-utils;
///
/// @since 2.3.0
/// @type String|Number
$rmd-button-circular-progress-size: rmd-icon-theme-var(size) !default;

/// A Map of floating position styles to create. Each key will be made into a
/// className by `&--floating-#{$key}` and each value will parsed as a style
/// map. If you want to remove positions, override this variable with only the
/// required styles.
///
/// @type Map
$rmd-button-floating-positions: (
  tl: (
    left: $rmd-button-floating-margin,
    top: $rmd-button-floating-margin,
  ),
  tr: (
    right: $rmd-button-floating-margin,
    top: $rmd-button-floating-margin,
  ),
  bl: (
    bottom: $rmd-button-floating-margin,
    left: $rmd-button-floating-margin,
  ),
  br: (
    bottom: $rmd-button-floating-margin,
    right: $rmd-button-floating-margin,
  ),
) !default;

/// A Map of all the "themeable" parts of the button package. Every key in this
/// map will be used to create a css variable to dynamically update the values
/// of the icon as needed.
/// @type Map
$rmd-button-theme-values: (
  text-border-radius: $rmd-button-text-border-radius,
  text-horizontal-padding: $rmd-button-text-horizontal-padding,
  text-vertical-padding: $rmd-button-text-vertical-padding,
  text-height: $rmd-button-text-height,
  text-min-width: $rmd-button-text-min-width,
  icon-border-radius: $rmd-button-icon-border-radius,
  icon-size: $rmd-button-icon-size,
  background-color: $rmd-button-background-color,
  color: $rmd-button-color,
  outline: $rmd-button-outline-color,
  outline-width: $rmd-button-outline-width,
) !default;