// Default Foreground and Background Colors values
// Allows users to override an foreground / background colors
// TODO: @color-mod: remove all this
$background-color-value:            #fff !default;
$background-color-rgb:              255, 255, 255 !default;

$text-color-value:                  #000 !default;
$text-color-rgb:                    0, 0, 0 !default;

// Default Foreground and Background Colors
// --------------------------------------------------
$background-color:                  var(--ion-background-color, $background-color-value) !default;
$text-color:                        var(--ion-text-color, $text-color-value) !default;
$placeholder-text-color:            var(--ion-placeholder-text-color, #999) !default;

// Default Background & Text Color Steps
// Color Steps are used to provide variations in text and background colors of elements.
// Steps move towards there "opposite" color.
// For example $text-color-step-XXX will be $text-color stepping towards $background-color,
// but a $background-color-step-XXX will be $background-color stepping towards $text-color.
// --------------------------------------------------
$background-color-step-50:          var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%)) !default;
$background-color-step-100:         var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%)) !default;
$background-color-step-150:         var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%)) !default;
$background-color-step-200:         var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%)) !default;
$background-color-step-250:         var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%)) !default;
$background-color-step-300:         var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%)) !default;
$background-color-step-350:         var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%)) !default;
$background-color-step-400:         var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%)) !default;
$background-color-step-450:         var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%)) !default;
$background-color-step-500:         var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%)) !default;
$background-color-step-550:         var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%)) !default;
$background-color-step-600:         var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%)) !default;
$background-color-step-650:         var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%)) !default;
$background-color-step-700:         var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%)) !default;
$background-color-step-750:         var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%)) !default;
$background-color-step-800:         var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%)) !default;
$background-color-step-850:         var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%)) !default;
$background-color-step-900:         var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%)) !default;
$background-color-step-950:         var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%)) !default;
$background-color-step-1000:        var(--ion-background-color-step-1000, mix($text-color-value, $background-color-value, 100%)) !default;
$text-color-step-50:                var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%)) !default;
$text-color-step-100:               var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%)) !default;
$text-color-step-150:               var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%)) !default;
$text-color-step-200:               var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%)) !default;
$text-color-step-250:               var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%)) !default;
$text-color-step-300:               var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%)) !default;
$text-color-step-350:               var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%)) !default;
$text-color-step-400:               var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%)) !default;
$text-color-step-450:               var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%)) !default;
$text-color-step-500:               var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%)) !default;
$text-color-step-550:               var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%)) !default;
$text-color-step-600:               var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%)) !default;
$text-color-step-650:               var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%)) !default;
$text-color-step-700:               var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%)) !default;
$text-color-step-750:               var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%)) !default;
$text-color-step-800:               var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%)) !default;
$text-color-step-850:               var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%)) !default;
$text-color-step-900:               var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%)) !default;
$text-color-step-950:               var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%)) !default;
$text-color-step-1000:              var(--ion-text-color-step-1000, mix($background-color-value, $text-color-value, 100%)) !default;

// Default General Colors
// --------------------------------------------------
$backdrop-color:                    var(--ion-backdrop-color, #000) !default;
$border-color:                      var(--ion-border-color, #b2b2b2) !default;
$box-shadow-color:                  var(--ion-box-shadow-color, #000) !default;

// Default Tabs & Tab bar
// --------------------------------------------------
$tabbar-background-color:           var(--ion-tabbar-background-color, #f8f8f8) !default;
$tabbar-background-color-focused:   var(--ion-tabbar-background-color-focused, get-color-shade(#f8f8f8)) !default;
$tabbar-border-color:               var(--ion-tabbar-border-color, $border-color) !default;
$tabbar-text-color-active:          var(--ion-tabbar-text-color-active, #488aff) !default;
$tabbar-text-color:                 var(--ion-tabbar-text-color, #8c8c8c) !default;

// Default Toolbar
// --------------------------------------------------
$toolbar-background-color:          var(--ion-toolbar-background-color, #f8f8f8) !default;
$toolbar-border-color:              var(--ion-toolbar-border-color, $border-color) !default;
$toolbar-color-active:              var(--ion-toolbar-color-active, #4a4a4a) !default;
$toolbar-color-inactive:            var(--ion-toolbar-color-inactive, #8c8c8c) !default;
$toolbar-text-color:                var(--ion-toolbar-text-color, $text-color) !default;

// Default List & List Items
// --------------------------------------------------
$item-background-color:             var(--ion-item-background-color, $background-color) !default;
$item-background-color-active:      var(--ion-item-background-color-active, $background-color) !default;
$item-border-color:                 var(--ion-item-border-color, #c8c7cc) !default;
$item-text-color:                   var(--ion-item-text-color, $text-color) !default;