////
/// @group form-toggle
////

@use 'sass:map';
@use 'sass:color';

@import '~@react-md/theme/dist/color-palette';
@import '~@react-md/theme/dist/functions';

/// The border radius for the checkbox and radio components.
/// @type Number
$rmd-toggle-border-radius: 50% !default;

/// This is how much the background layer should be inset relative to the checkbox/radio's
/// icon element. This is used to animate changes in the checked state by covering part of
/// the icon.
/// @type Number
$rmd-toggle-inset: 0.3125rem !default;

/// The amount of offset to apply when using the dense theme.
/// @type Number
/// @see rmd-toggle-inset
$rmd-toggle-dense-inset: 0.25rem !default;

/// The color to use for the checkbox and radio components while unchecked. If
/// you want to be able to dynamically configure the active color, you can set
/// this to a custom css variable string.
///
/// @example scss - As a Custom CSS Variable
///   $rmd-toggle-inactive-color: --toggle-inactive;
///   $rmd-toggle-active-color: --toggle-active;
///
///   :root {
///     --toggle-active: #{rmd-theme-var(secondary)};
///     --toggle-inactive: #{rmd-theme-var(text-secondary-on-background)};
///   }
///
///   .overriding {
///     --toggle-active: #{$rmd-orange-700};
///     --toggle-inactive: #{$rmd-orange-a-100};
///   }
///
/// @type Color|String
/// @require rmd-theme-var
/// @since 2.2.0
$rmd-toggle-inactive-color: rmd-theme-var(
  text-secondary-on-background
) !default;

/// The color to use for the checkbox and radio components while checked. If you
/// want to be able to dynamically configure the active color, you can set this
/// to a custom css variable string.
///
/// @example scss - As a Custom CSS Variable
///   $rmd-toggle-inactive-color: --toggle-inactive;
///   $rmd-toggle-active-color: --toggle-active;
///
///   :root {
///     --toggle-active: #{rmd-theme-var(secondary)};
///     --toggle-inactive: #{rmd-theme-var(text-secondary-on-background)};
///   }
///
///   .overriding {
///     --toggle-active: #{$rmd-orange-700};
///     --toggle-inactive: #{$rmd-orange-a-100};
///   }
///
/// @type Color|String
/// @require rmd-theme-var
/// @since 2.2.0
$rmd-toggle-active-color: rmd-theme-var(secondary) !default;

/// The height for the indeterminate checkbox's state line that covers
/// the icon.
/// @type Number
$rmd-checkbox-indeterminate-height: 0.15rem !default;

/// The height for the indeterminate checkbox's state line that covers
/// the icon when the dense spec is enabled.
/// @type Number
$rmd-checkbox-indeterminate-dense-height: 0.125rem !default;

/// The height for a switch's track. The track is the background that the ball animates
/// left and right on.
/// @type Number
$rmd-switch-track-height: 1rem !default;

/// The width for a switch's track. The track is the background that the ball animates
/// left and right on.
/// @type Number
$rmd-switch-track-width: 2.25rem !default;

/// The background color for a switch's track. This is the element that the ball animates
/// left and right on.
///
/// @require $rmd-black-base
/// @require $rmd-theme-dark-elevation
/// @require $rmd-theme-dark-elevation-colors
/// @type Color
$rmd-switch-track-background-color: if(
  $rmd-theme-dark-elevation,
  map.get($rmd-theme-dark-elevation-colors, 24),
  rgba($rmd-black-base, 0.38)
) !default;

/// The border radius to apply to the switch's track. This is the element that the ball
/// animates left and right on.
/// @type Number
$rmd-switch-track-border-radius: 0.5rem !default;

/// The size of the switch's ball.
/// @type Number
$rmd-switch-ball-size: 1.25rem !default;

/// The border radius for the switch's ball.
/// @type Number
$rmd-switch-ball-border-radius: 50% !default;

/// The amount of offset that should be applied to the ball relative to its track. This
/// is really used so the ball can overlap the track a bit to look a bit nicer.
/// @type Number
$rmd-switch-ball-offset: 0.25rem !default;

/// The vertical padding for the switch container. This should generally be large enough
/// so that the ball does not overlap any other elements.
/// @type Number
$rmd-switch-container-vertical-padding: 0.5rem !default;

/// The horizontal padding for the switch container. This should generally be large
/// enough so that the ball does not overlap the label or other elements.
///
/// @type Number
$rmd-switch-container-horizontal-padding: $rmd-switch-ball-size * 0.5 !default;

/// The color to use for the switch's ball when it is toggled on and disabled.
///
/// @require rmd-theme-get-swatch
/// @require $rmd-theme-secondary
/// @type Color
$rmd-switch-ball-disabled-color: rmd-theme-get-swatch(
  $rmd-theme-secondary,
  200,
  false,
  color.adjust($rmd-theme-secondary, $lightness: -5%),
  rmd-switch-ball-disabled-color
) !default;

/// The width of the circular progress bar. This will make the progress bar more
/// prominent than the normal circular progress.
/// @type Number
$rmd-switch-progress-width: 12 !default;

/// The background color to use for the switch's ball while the the switch is loading.
///
/// @require $rmd-white-base
/// @type Color
$rmd-switch-progress-background-color: $rmd-white-base !default;

/// The amount of padding to apply to the async switch's progress bar. This will make
/// it so there is some space between the switch's ball and the progress bar.
/// @type Number
$rmd-switch-progress-padding: 0.125rem !default;