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

// Material Design Chip
// --------------------------------------------------

/// @prop - Margin top of the chip
$chip-md-margin-top:                       2px !default;

/// @prop - Margin end of the chip
$chip-md-margin-end:                       0 !default;

/// @prop - Margin bottom of the chip
$chip-md-margin-bottom:                    $chip-md-margin-top !default;

/// @prop - Margin start of the chip
$chip-md-margin-start:                     $chip-md-margin-end !default;

/// @prop - Height of the chip
$chip-md-height:                           32px !default;

/// @prop - Border radius of the chip
$chip-md-border-radius:                    16px !default;

/// @prop - Font family of the chip
$chip-md-font-family:                      $font-family-base !default;

/// @prop - Font size of the chip
$chip-md-font-size:                        13px !default;

/// @prop - Text color of the chip
$chip-md-text-color:                       $text-color-step-150 !default;

/// @prop - Background color alpha of the chip
$chip-md-background-color-alpha:           .1 !default;

/// @prop - Background color of the chip
$chip-md-background-color:                 rgba(var(--ion-text-color-rgb, $text-color-rgb), $chip-md-background-color-alpha) !default;

/// @prop - Margin top of the label in the chip
$chip-md-label-margin-top:                 0 !default;

/// @prop - Margin end of the label in the chip
$chip-md-label-margin-end:                 10px !default;

/// @prop - Margin bottom of the label in the chip
$chip-md-label-margin-bottom:              $chip-md-label-margin-top !default;

/// @prop - Margin start of the label in the chip
$chip-md-label-margin-start:               $chip-md-label-margin-end !default;

/// @prop - Width of the avatar in the chip
$chip-md-avatar-width:                     24px !default;

/// @prop - Height of the avatar in the chip
$chip-md-avatar-height:                    $chip-md-avatar-width !default;

/// @prop - Margin top of the avatar in the chip
$chip-md-avatar-margin-top:                0 !default;

/// @prop - Margin end of the avatar in the chip
$chip-md-avatar-margin-end:                4px !default;

/// @prop - Margin bottom of the avatar in the chip
$chip-md-avatar-margin-bottom:             $chip-md-avatar-margin-top !default;

/// @prop - Margin start of the avatar in the chip
$chip-md-avatar-margin-start:              $chip-md-avatar-margin-end !default;