// Ionic Theme
// -------------------------------------------------------------------------------------------
// This file contains the theme variables shared
// between modes. This should only include variables
// used to theme the application colors.

// Default Foreground and Background Colors
// -------------------------------------------------------------------------------------------
// Used internally to calculate the default steps

$background-color-value: #fff;
$background-color-rgb-value: 255, 255, 255;

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

$background-color: var(--ion-background-color, $background-color-value);
$background-color-rgb: var(--ion-background-color-rgb, $background-color-rgb-value);
$text-color: var(--ion-text-color, $text-color-value);
$text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value);

// Default Foreground and Background Step Colors
// -------------------------------------------------------------------------------------------
// Color Steps are used to provide variations in text and background colors of elements.
// Steps move towards their contrasting 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-color-step-50,
  var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%))
);
$background-color-step-100: var(
  --ion-color-step-100,
  var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%))
);
$background-color-step-150: var(
  --ion-color-step-150,
  var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%))
);
$background-color-step-200: var(
  --ion-color-step-200,
  var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%))
);
$background-color-step-250: var(
  --ion-color-step-250,
  var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%))
);
$background-color-step-300: var(
  --ion-color-step-300,
  var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%))
);
$background-color-step-350: var(
  --ion-color-step-350,
  var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%))
);
$background-color-step-400: var(
  --ion-color-step-400,
  var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%))
);
$background-color-step-450: var(
  --ion-color-step-450,
  var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%))
);
$background-color-step-500: var(
  --ion-color-step-500,
  var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%))
);
$background-color-step-550: var(
  --ion-color-step-550,
  var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%))
);
$background-color-step-600: var(
  --ion-color-step-600,
  var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%))
);
$background-color-step-650: var(
  --ion-color-step-650,
  var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%))
);
$background-color-step-700: var(
  --ion-color-step-700,
  var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%))
);
$background-color-step-750: var(
  --ion-color-step-750,
  var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%))
);
$background-color-step-800: var(
  --ion-color-step-800,
  var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%))
);
$background-color-step-850: var(
  --ion-color-step-850,
  var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%))
);
$background-color-step-900: var(
  --ion-color-step-900,
  var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%))
);
$background-color-step-950: var(
  --ion-color-step-950,
  var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%))
);
$text-color-step-50: var(
  --ion-color-step-950,
  var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%))
);
$text-color-step-100: var(
  --ion-color-step-900,
  var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%))
);
$text-color-step-150: var(
  --ion-color-step-850,
  var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%))
);
$text-color-step-200: var(
  --ion-color-step-800,
  var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%))
);
$text-color-step-250: var(
  --ion-color-step-750,
  var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%))
);
$text-color-step-300: var(
  --ion-color-step-700,
  var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%))
);
$text-color-step-350: var(
  --ion-color-step-650,
  var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%))
);
$text-color-step-400: var(
  --ion-color-step-600,
  var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%))
);
$text-color-step-450: var(
  --ion-color-step-550,
  var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%))
);
$text-color-step-500: var(
  --ion-color-step-500,
  var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%))
);
$text-color-step-550: var(
  --ion-color-step-450,
  var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%))
);
$text-color-step-600: var(
  --ion-color-step-400,
  var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%))
);
$text-color-step-650: var(
  --ion-color-step-350,
  var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%))
);
$text-color-step-700: var(
  --ion-color-step-300,
  var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%))
);
$text-color-step-750: var(
  --ion-color-step-250,
  var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%))
);
$text-color-step-800: var(
  --ion-color-step-200,
  var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%))
);
$text-color-step-850: var(
  --ion-color-step-150,
  var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%))
);
$text-color-step-900: var(
  --ion-color-step-100,
  var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%))
);
$text-color-step-950: var(
  --ion-color-step-50,
  var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%))
);

// Default General Colors
// --------------------------------------------------
$placeholder-text-color: var(--ion-placeholder-color, $text-color-step-600);