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

// Material Design Toggle
// --------------------------------------------------

/// @prop - Width of the toggle track
$toggle-md-track-width: 36px;

/// @prop - Height of the toggle track
$toggle-md-track-height: 14px;

/// @prop - Background color of the toggle track
$toggle-md-track-background-color-off: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);

/// @prop - Background color alpha of the checked toggle track
$toggle-md-track-background-color-alpha-on: 0.5;

/// @prop - Width of the toggle handle
$toggle-md-handle-width: 20px;

/// @prop - Height of the toggle handle
$toggle-md-handle-height: 20px;

/// @prop - Max height of the toggle handle
$toggle-md-handle-max-height: calc(100% + 6px);

/// @prop - Border radius of the toggle handle
$toggle-md-handle-border-radius: 50%;

/// @prop - Box shadow of the toggle handle
$toggle-md-handle-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
  0 1px 5px 0 rgba(0, 0, 0, 0.12);

/// @prop - Background color of the toggle handle
$toggle-md-handle-background-color-off: #ffffff;

/// @prop - Transition duration of the toggle icon
$toggle-md-transition-duration: 160ms;

/// @prop - Transition of the toggle icon
$toggle-md-transition: transform $toggle-md-transition-duration cubic-bezier(0.4, 0, 0.2, 1),
  background-color $toggle-md-transition-duration cubic-bezier(0.4, 0, 0.2, 1);

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

/// @prop - The text color of the on/off labels
$toggle-md-on-off-label-color: #000;

/// @prop - The text color of the on/off labels when the toggle is checked
$toggle-md-on-off-label-checked-color: #fff;