////
/// @group avatar
////

@import '~@react-md/typography/dist/functions';
@import '~@react-md/theme/dist/variables';

/// The default text color for the avatar. This will be used until the `color`
/// prop is provided to the `Avatar` component.
///
/// @require $rmd-grey-100
/// @type Color
$rmd-avatar-color: $rmd-grey-100 !default;

/// The default background color for an avatar. This will be used until the
/// `color` prop is provided to the `Avatar` component.
///
/// @see rmd-avatar-colors
/// @require $rmd-grey-700
/// @type Color
$rmd-avatar-background-color: $rmd-grey-700 !default;

/// The border color to apply to the avatar.
///
/// @require rmd-theme-tone
/// @require $rmd-black-base
/// @require $rmd-white-base
/// @type Color
$rmd-avatar-border-color: rgba(
  if(
    rmd-theme-tone($rmd-theme-background) == light,
    $rmd-black-base,
    $rmd-white-base
  ),
  0.12
) !default;

/// The border-radius for the avatar.
/// @type Number
$rmd-avatar-border-radius: 50% !default;

/// The size for the avatar.
/// @type Number
$rmd-avatar-size: 2.5rem !default;

/// The font size to apply to avatars. This is used when the avatar is a letter.
/// @type Number
$rmd-avatar-font-size: 1.5rem !default;

/// The line height to use for avatars. This is really only useful when the
/// avatar is a letter.
///
/// @require rmd-typography-value
/// @type Number
$rmd-avatar-line-height: rmd-typography-value(subtitle-1, line-height) !default;

/// A Map of all the available colors for the avatar. This map can be updated
/// with new values if the defaults are not to your liking, but it is
/// recommended to create your own themes instead.
///
/// @require $rmd-amber-400
/// @require $rmd-blue-grey-50
/// @require $rmd-blue-grey-700
/// @require $rmd-brown-50
/// @require $rmd-brown-500
/// @require $rmd-brown-800
/// @require $rmd-cyan-400
/// @require $rmd-deep-orange-a-400
/// @require $rmd-deep-purple-100
/// @require $rmd-deep-purple-900
/// @require $rmd-green-50
/// @require $rmd-green-800
/// @require $rmd-green-900
/// @require $rmd-grey-100
/// @require $rmd-grey-700
/// @require $rmd-grey-900
/// @require $rmd-indigo-100
/// @require $rmd-indigo-600
/// @require $rmd-light-blue-300
/// @require $rmd-light-green-300
/// @require $rmd-lime-400
/// @require $rmd-orange-600
/// @require $rmd-pink-600
/// @require $rmd-purple-100
/// @require $rmd-purple-700
/// @require $rmd-red-50
/// @require $rmd-red-a-700
/// @require $rmd-teal-800
/// @require $rmd-teal-900
/// @require $rmd-teal-a-400
/// @require $rmd-white-base
/// @require $rmd-yellow-a-200
/// @type Map
$rmd-avatar-colors: (
  red: $rmd-red-a-700 $rmd-red-50,
  pink: $rmd-pink-600 $rmd-white-base,
  purple: $rmd-purple-700 $rmd-purple-100,
  deep-purple: $rmd-deep-purple-900 $rmd-deep-purple-100,
  indigo: $rmd-indigo-600 $rmd-indigo-100,
  blue: $rmd-blue-a-700 $rmd-white-base,
  light-blue: $rmd-light-blue-300 $rmd-deep-purple-900,
  cyan: $rmd-cyan-400 $rmd-teal-900,
  teal: $rmd-teal-a-400 $rmd-teal-900,
  green: $rmd-green-800 $rmd-green-50,
  light-green: $rmd-light-green-300 $rmd-green-900,
  lime: $rmd-lime-400 $rmd-teal-800,
  yellow: $rmd-yellow-a-200 $rmd-brown-500,
  amber: $rmd-amber-400 $rmd-brown-800,
  orange: $rmd-orange-600 $rmd-grey-900,
  deep-orange: $rmd-deep-orange-a-400 $rmd-grey-900,
  brown: $rmd-brown-500 $rmd-brown-50,
  grey: $rmd-grey-700 $rmd-grey-100,
  blue-grey: $rmd-blue-grey-700 $rmd-blue-grey-50,
) !default;

/// A Map of all the "themeable" parts of the avatar 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-avatar-theme-values: (
  background-color: $rmd-avatar-background-color,
  border-color: $rmd-avatar-border-color,
  border-radius: $rmd-avatar-border-radius,
  color: $rmd-avatar-color,
  font-size: $rmd-avatar-font-size,
  size: $rmd-avatar-size,
) !default;