$input__class: '#{$prefix}-input';
$input__class--filled: '#{$input__class}--filled';

$input__border-width: rem-calc(1) !default;
$input__font-family: $brand-font-regular !default;

$input__font-size: rem-calc(16) !default;
$input__height: rem-calc(36) !default;
$input__padding-side: rem-calc(16) !default;
$input__padding-side--icon: rem-calc(44) !default;
$input__padding: 0 $input__padding-side;
$input__border-radius: $global-radius;
$input--pill__border-radius: $global-rounded;
$input__line-height: $base-line-height-ratio !default;

$input__message__icon__font-size: rem-calc(16) !default;
$input__message__font-size: rem-calc(14) !default;
$input__message__line-height: rem-calc(22) !default;

//  Color
  // Outline
  $input__background: $md-white-100 !default;
  $input__background--disabled: $md-gray-10 !default;
  $input__background--hover: $md-gray-20 !default;
  $input__border-color: $md-gray-30 !default;
  $input__border-color--read-only: transparent !default;
  $input__clear-icon__color: $md-gray-60;
  $input__clear-icon__color--hover: $md-gray-70;
  $input__font-color: $md-gray-100 !default;
  $input__font-color--disabled: $md-gray-30 !default;
  $input__font-color--help: $md-gray-70 !default;
  $input__font-color--placeholder: $md-gray-70 !default;
  $input__font-color--read-only: $input__font-color !default;

  // Outline Contrast
  $input__background--disabled--contrast: $md-gray-10 !default;
  $input__background--hover--contrast: $md-gray-20 !default;
  $input__border-color--contrast: $input__font-color !default;
  $input__font-color--disabled--contrast: $md-gray-40 !default;
  $input__font-color--help--contrast: $md-gray-100 !default;

  // Outline Dark
  $input__background--dark: $md-gray-100 !default;
  $input__background--disabled--dark: $md-gray-90 !default;
  $input__background--hover--dark: $md-gray-90 !default;
  $input__border-color--dark: $md-gray-80;
  $input__clear-icon__color--dark: $md-gray-40;
  $input__clear-icon__color--hover--dark: $md-gray-50;
  $input__font-color--dark: $md-white-100 !default;
  $input__font-color--disabled--dark: $md-gray-70 !default;
  $input__font-color--help--dark: $md-gray-40 !default;
  $input__font-color--placeholder--dark: $md-gray-40 !default;
  $input__font-color--read-only--dark: $input__font-color--dark;

  // Outline Dark Contrast
  $input__background--hover--dark--contrast: $input__background--hover--dark !default;
  $input__border-color--dark--contrast: $input__font-color--dark !default;
  $input__font-color--help--dark--contrast: $md-white-100 !default;

  // Filled
  $input__background--filled: $md-gray-10 !default;
  $input__background--filled--hover: $md-gray-20 !default;
  $input__border-color--filled: transparent !default;

  // Filled Dark
  $input__background--filled--dark: $md-gray-90 !default;
  $input__background--filled--hover--dark: $md-gray-80 !default;
  $input__font-color--read-only--filled--dark: $md-white-100 !default;


//  Error Color
  // Default
  $input__background--error: $md-red-10 !default;
  $input__background--error--hover: $md-red-20 !default;
  $input__border-color--error: $md-red-50 !default;
  $input__message__font-color--error: $md-red-50 !default;

  // Dark
  $input__background--error--dark: $md-red-90 !default;
  $input__background--error--hover--dark: $md-red-80 !default;
  $input__border-color--error--dark: $md-red-50 !default;
  $input__message__font-color--error--dark: $md-red-50 !default;

  // Contrast
  $input__border-color--error--contrast: $md-red-60 !default;
  $input__message__font-color--error--contrast: $md-red-80 !default;

//  Success Color
  // Default
  $input__background--success: $md-green-10 !default;
  $input__background--success--hover: $md-green-20 !default;
  $input__border-color--success: $md-green-50 !default;
  $input__message__font-color--success: $md-green-50 !default;

  // Dark
  $input__background--success--dark: $md-green-90 !default;
  $input__background--success--hover--dark: $md-green-80 !default;
  $input__border-color--success--dark: $md-green-50 !default;
  $input__message__font-color--success--dark: $md-green-50 !default;

  // Contrast
  $input__border-color--success--contrast: $md-green-60 !default;
  $input__message__font-color--success--contrast: $md-green-80 !default;

//  Warning Color
  // Default
  $input__background--warning: $md-yellow-10 !default;
  $input__background--warning--hover: $md-yellow-20 !default;
  $input__border-color--warning: $md-yellow-40 !default;
  $input__message__font-color--warning: $md-yellow-50 !default;

  // Dark
  $input__background--warning--dark: $md-yellow-90 !default;
  $input__background--warning--hover--dark: $md-yellow-80 !default;
  $input__border-color--warning--dark: $md-yellow-40 !default;
  $input__message__font-color--warning--dark: $md-yellow-40 !default;

  // Contrast
  $input__border-color--warning--contrast: $md-yellow-60 !default;
  $input__message__font-color--warning--contrast: $md-yellow-80 !default;