@import "../../themes/ionic.globals.ios";

// iOS Button
// --------------------------------------------------

/// @prop - Font family of the button
$button-ios-font-family:                              $font-family-base !default;

/// @prop - Margin top of the button
$button-ios-margin-top:                               4px !default;

/// @prop - Margin end of the button
$button-ios-margin-end:                               2px !default;

/// @prop - Margin bottom of the button
$button-ios-margin-bottom:                            4px !default;

/// @prop - Margin start of the button
$button-ios-margin-start:                             2px !default;

/// @prop - Padding top of the button
$button-ios-padding-top:                              0 !default;

/// @prop - Padding end of the button
$button-ios-padding-end:                              1em !default;

/// @prop - Padding bottom of the button
$button-ios-padding-bottom:                           $button-ios-padding-top !default;

/// @prop - Padding start of the button
$button-ios-padding-start:                            $button-ios-padding-end !default;

/// @prop - Height of the button
$button-ios-height:                                   2.8em !default;

/// @prop - Border radius of the button
$button-ios-border-radius:                            12px !default;

/// @prop - Font size of the button text
$button-ios-font-size:                                16px !default;

/// @prop - Font weight of the button text
$button-ios-font-weight:                              500 !default;

/// @prop - Letter spacing of the button text
$button-ios-letter-spacing:                           -.03em !default;

/// @prop - Background color of the button
$button-ios-background-color:                         ion-color(primary, base) !default;

/// @prop - Text color of the button
$button-ios-text-color:                               ion-color(primary, contrast) !default;

/// @prop - Background color of the activated button
$button-ios-background-color-activated:               ion-color(primary, shade) !default;

/// @prop - Opacity of the activated button
$button-ios-opacity-activated:                        1 !default;

/// @prop - Opacity of the button on hover
$button-ios-opacity-hover:                            .8 !default;

/// @prop - Background color of the focused button
$button-ios-background-color-focused:                 ion-color(primary, shade) !default;

/// @prop - Opacity of the button when disabled
$button-ios-opacity-disabled:                         .5 !default;


// iOS Large Button
// --------------------------------------------------

/// @prop - Padding top of the large button
$button-ios-large-padding-top:                        0 !default;

/// @prop - Padding end of the large button
$button-ios-large-padding-end:                        1em !default;

/// @prop - Padding bottom of the large button
$button-ios-large-padding-bottom:                     $button-ios-large-padding-top !default;

/// @prop - Padding start of the large button
$button-ios-large-padding-start:                      $button-ios-large-padding-end !default;

/// @prop - Height of the large button
$button-ios-large-height:                             2.8em !default;

/// @prop - Border radius of the large button
$button-ios-large-border-radius:                      14px !default;

/// @prop - Font size of the large button
$button-ios-large-font-size:                          20px !default;


// iOS Small Button
// --------------------------------------------------

/// @prop - Padding top of the small button
$button-ios-small-padding-top:                        0 !default;

/// @prop - Padding end of the small button
$button-ios-small-padding-end:                        .9em !default;

/// @prop - Padding bottom of the small button
$button-ios-small-padding-bottom:                     $button-ios-small-padding-top !default;

/// @prop - Padding start of the small button
$button-ios-small-padding-start:                      $button-ios-small-padding-end !default;

/// @prop - Height of the small button
$button-ios-small-height:                             2.1em !default;

/// @prop - Border radius of the small button
$button-ios-small-border-radius:                      8px !default;

/// @prop - Font size of the small button
$button-ios-small-font-size:                          13px !default;


// iOS Outline Button
// --------------------------------------------------

/// @prop - Border width of the outline button
$button-ios-outline-border-width:                     1px !default;

/// @prop - Border style of the outline button
$button-ios-outline-border-style:                     solid !default;

/// @prop - Border radius of the outline button
$button-ios-outline-border-radius:                    $button-ios-border-radius !default;

/// @prop - Border color of the outline button
$button-ios-outline-border-color:                     $button-ios-background-color !default;

/// @prop - Text color of the outline button
$button-ios-outline-text-color:                       $button-ios-background-color !default;

/// @prop - Background color of the outline button
$button-ios-outline-background-color:                 transparent !default;

/// @prop - Text color of the activated outline button
$button-ios-outline-text-color-activated:             ion-color(primary, contrast) !default;

/// @prop - Background color of the activated outline button
$button-ios-outline-background-color-activated:       $button-ios-background-color !default;

/// @prop - Opacity of the activated outline button
$button-ios-outline-opacity-activated:                1 !default;

/// @prop - Background color alpha of the focused outline button
$button-ios-outline-background-color-alpha-focused:   .25 !default;

/// @prop - Background color of the focused outline button
$button-ios-outline-background-color-focused:         ion-color(primary, base, $button-ios-outline-background-color-alpha-focused) !default;

// iOS Clear Button
// --------------------------------------------------

/// @prop - Border color of the clear button
$button-ios-clear-border-color:                       transparent !default;

/// @prop - Background color of the clear button
$button-ios-clear-background-color:                   transparent !default;

/// @prop - Background color of the activated clear button
$button-ios-clear-background-color-activated:         $button-ios-clear-background-color !default;

/// @prop - Opacity of the activated clear button
$button-ios-clear-opacity-activated:                  .4 !default;

/// @prop - Text color of the clear button on hover
$button-ios-clear-text-color-hover:                   $button-ios-background-color !default;

/// @prop - Opacity of the clear button on hover
$button-ios-clear-opacity-hover:                      .6 !default;

/// @prop - Background color alpha of the focused clear button
$button-ios-clear-background-color-alpha-focused:     .25 !default;

/// @prop - Background color of the focused clear button
$button-ios-clear-background-color-focused:           ion-color(primary, base, $button-ios-clear-background-color-alpha-focused) !default;

// iOS Round Button
// --------------------------------------------------

/// @prop - Padding top of the round button
$button-ios-round-padding-top:                        $button-round-padding-top !default;

/// @prop - Padding end of the round button
$button-ios-round-padding-end:                        $button-round-padding-end !default;

/// @prop - Padding bottom of the round button
$button-ios-round-padding-bottom:                     $button-round-padding-bottom !default;

/// @prop - Padding start of the round button
$button-ios-round-padding-start:                      $button-round-padding-start !default;

/// @prop - Border radius of the round button
$button-ios-round-border-radius:                      $button-round-border-radius !default;


// iOS Decorator Button
// --------------------------------------------------

/// @prop - Font weight of the strong button
$button-ios-strong-font-weight:                       600 !default;