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

// Material Design Checkbox
// --------------------------------------------------

/// @prop - Opacity of the disabled checkbox label
$checkbox-md-disabled-opacity:           $form-control-md-disabled-opacity;

/// @prop - Background color of the checkbox icon when off
$checkbox-md-icon-background-color-off:  $item-md-background;

/// @prop - Size of the checkbox icon
/// The icon size does not use dynamic font
/// because it does not scale in native.
$checkbox-md-icon-size:                  18px;

/// @prop - Border width of the checkbox icon
$checkbox-md-icon-border-width:          2px;

/// @prop - Border style of the checkbox icon
$checkbox-md-icon-border-style:          solid;

/// @prop - Border color of the checkbox icon when off
$checkbox-md-icon-border-color-off:      rgb($text-color-rgb, 0.60);

/// @prop - Transition duration of the checkbox
$checkbox-md-transition-duration:        180ms;

/// @prop - Transition easing of the checkbox
$checkbox-md-transition-easing:          cubic-bezier(.4, 0, .2, 1);

/// @prop - Opacity of the disabled checkbox
/// This value is used because the checkbox color is set to
/// `rgb(0, 0, 0, 0.60)` when enabled and we need it to be
/// `rgb(0, 0, 0, 0.38)` when disabled but the disabled
/// opacity is applied on top of the transparent color so
/// this opacity gets us the equivalent of applying `0.38`
/// on top of an opaque checkbox `rgb(0, 0, 0, 1.0)`
$checkbox-md-icon-disabled-opacity:      0.63;