////
/// @group divider
////

@import '@react-md/theme/dist/scss/color-a11y';
@import '@react-md/theme/dist/scss/variables';

/// The size for the divider. This really just modifies the border-width.
/// @type Number
$rmd-divider-size: 1px !default;

/// The max size for the divider. This can be used to center a horizontal
/// divider within the page since the divider applies `margin-left: auto` and
/// `margin-right: auto`.
///
/// This also applies to vertical dividers... sort of? If the divider's
/// containing element has a static defined height, the vertical dividers will
/// be sized correctly. Otherwise the vertical divider will set the height to
/// `auto` which almost always resolves to `0` which will make your divider not
/// appear.
/// @type Number
$rmd-divider-max-size: 100% !default;

/// The amount of inset to apply to the divider. This should not be changed to
/// create centered dividers. Its only purpose is to had spacing to the left (or
/// right in rtl languages) of the divider. See the `$rmd-divider-max-size`
/// variable for more information about centering.
///
/// @see rmd-divider-max-size
/// @type Number
$rmd-divider-inset: 4rem !default;

/// The amount of margin to apply to horizontal dividers.
/// @type Number
$rmd-divider-spacing: 0.25rem auto !default;

/// The amount of margin to apply to vertical dividers.
/// @type Number
$rmd-divider-vertical-spacing: auto 0.25rem !default;

/// The divider color to use on light backgrounds.
///
/// @require $rmd-black-base
/// @type Color
$rmd-divider-background-color-on-light: rgba($rmd-black-base, 0.12) !default;

/// The divider color to use on dark backgrounds.
///
/// @require $rmd-white-base
/// @type Color
$rmd-divider-background-color-on-dark: rgba($rmd-white-base, 0.12) !default;

/// The default divider background color to use.
///
/// @require rmd-theme-tone
/// @require $rmd-theme-background
/// @type Color
$rmd-divider-background-color: if(
  rmd-theme-tone($rmd-theme-background) == light,
  $rmd-divider-background-color-on-light,
  $rmd-divider-background-color-on-dark
) !default;

/// A Map of all the "themeable" parts of the divider package. Every key in this
/// map will be used to create a css variable to dynamically update the values
/// of the icon as needed.
/// @type Map
$rmd-divider-theme-values: (
  background-color: $rmd-divider-background-color,
  background-color-on-light: $rmd-divider-background-color-on-light,
  background-color-on-dark: $rmd-divider-background-color-on-dark,
  size: $rmd-divider-size,
  inset: $rmd-divider-inset,
  spacing: $rmd-divider-spacing,
  vertical-spacing: $rmd-divider-vertical-spacing,
  max-size: $rmd-divider-max-size,
) !default;