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

// Material Design Radio
// --------------------------------------------------

/// @prop - Color of the checked radio
$radio-md-color-on: current-color(base);

/// @prop - Background color of focus indicator for radio when focused
$radio-md-background-color-focused: ion-color(primary, tint);

/// @prop - Color of the unchecked radio
$radio-md-color-off: rgb($text-color-rgb, 0.6);

/// @prop - Width of the radio icon
$radio-md-icon-width: dynamic-font(20px);

/// @prop - Height of the radio icon
$radio-md-icon-height: dynamic-font(20px);

/// @prop - Border width of the radio icon
$radio-md-icon-border-width: dynamic-font(2px);

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

/// @prop - Border radius of the radio icon
$radio-md-icon-border-radius: 50%;

/// @prop - Transition duration of the radio
$radio-md-transition-duration: 280ms;

/// @prop - Transition easing of the radio
$radio-md-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

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

/// @prop - Opacity of the disabled radio
/// This value is used because the radio 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 radio `rgb(0, 0, 0, 1.0)`
$radio-md-icon-disabled-opacity: 0.63;