@use "sass:map";
@import "../../themes/ionic.functions.color";

$primary:         #7cabff;
$secondary:       #62bdff;
$tertiary:        #b6b9f9;
$success:         #4ada71;
$warning:         #ffce31;
$danger:          #fc9aa2;
$light:           #222428;
$medium:          #a8aab3;
$dark:            #f4f5f8;

$colors:  (
  primary: (
    base:             $primary,
    contrast:         #000,
    shade:            get-color-shade($primary),
    tint:             get-color-tint($primary)
  ),
  secondary: (
    base:             $secondary,
    contrast:         #000,
    shade:            get-color-shade($secondary),
    tint:             get-color-tint($secondary)
  ),
  tertiary: (
    base:             $tertiary,
    contrast:         #000,
    shade:            get-color-shade($tertiary),
    tint:             get-color-tint($tertiary)
  ),
  success: (
    base:             $success,
    contrast:         #000,
    shade:            get-color-shade($success),
    tint:             get-color-tint($success)
  ),
  warning: (
    base:             $warning,
    contrast:         #000,
    shade:            get-color-shade($warning),
    tint:             get-color-tint($warning)
  ),
  danger: (
    base:             $danger,
    contrast:         #000,
    shade:            get-color-shade($danger),
    tint:             get-color-tint($danger)
  ),
  light: (
    base:             $light,
    contrast:         #fff,
    shade:            get-color-shade($light),
    tint:             get-color-tint($light)
  ),
  medium: (
    base:             $medium,
    contrast:         #000,
    shade:            get-color-shade($medium),
    tint:             get-color-tint($medium)
  ),
  dark: (
    base:             $dark,
    contrast:         #000,
    shade:            get-color-shade($dark),
    tint:             get-color-tint($dark)
  )
);

/// Text step colors are generated based on
/// how dark or light text can be. The darkest
/// text color is usually the default text color (white or black).
/// The darker the $lightest-text-color is, the darker each
/// stepped color is. If you want to increase text contrast,
/// make $lightest-text-color darker.
$text-color: #ffffff;

$darkest-text-color: #888888;
$lightest-text-color: $text-color;

/// Loop through each color object above
/// and generate CSS Variables for each
/// color. Do not use the ion-color function
/// here because that will set the variable
/// to evaluate to itself with a fallback.
/// For example:
/// --ion-color-primary: #{ion-color(primary, base)};
/// Maps to:
/// --ion-color-primary: var(--ion-color-primary, #...);

/// We apply certain styles to the per-mode classes (ios and md)
/// as opposed to setting everything in :root
// so any high contrast dark styles override the standard
/// contrast dark styles.
@mixin high-contrast-dark-base-palette() {
  & {
    --ion-placeholder-opacity: 0.8;

    @each $color-name, $value in $colors {
      --ion-color-#{$color-name}: #{map.get($value, base)};
      --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};
      --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};
      --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
      --ion-color-#{$color-name}-shade: #{map.get($value, shade)};
      --ion-color-#{$color-name}-tint: #{map.get($value, tint)};
    }

  }
}

@mixin high-contrast-dark-ios-palette() {
  $background-color: #000000;
  
  & {
    --ion-background-color: #{$background-color};
    --ion-background-color-rgb: #{color-to-rgb-list($background-color)};
    --ion-text-color: #{$text-color};
    --ion-text-color-rgb: #{color-to-rgb-list($text-color)};
    --ion-item-background: #000000;
    --ion-card-background: #1c1c1d;
    --ion-tab-bar-background-focused: #252525;

    /// Only the item borders should increase in contrast
    /// Borders for elements like toolbars should remain the same
    --ion-item-border-color: var(--ion-background-color-step-400);
    --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};
    --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};
    --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};
    --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};
    --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};
    --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};
    --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};
    --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};
    --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};
    --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};
    --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};
    --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};
    --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};
    --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};
    --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};
    --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};
    --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};
    --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};
    --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};
    --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};
    --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};
    --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};
    --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};
    --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};
    --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};
    --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};
    --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};
    --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};
    --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};
    --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};
    --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};
    --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};
    --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};
    --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};
    --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};
    --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};
    --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};
    --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};
  }

  // Modal
  // --------------------------------------------------

  & ion-modal {
    --ion-background-color: var(--ion-background-color-step-100);
    --ion-toolbar-background: var(--ion-background-color-step-150);
    --ion-toolbar-border-color: var(--ion-background-color-step-250);
  }
}

@mixin high-contrast-dark-md-palette() {
  $background-color: #121212;
  
  & {
    --ion-background-color: #{$background-color};
    --ion-background-color-rgb: #{color-to-rgb-list($background-color)};
    --ion-text-color: #{$text-color};
    --ion-text-color-rgb: #{color-to-rgb-list($text-color)};
    --ion-border-color: #222222;
    --ion-item-background: #1e1e1e;
    --ion-toolbar-background: #1f1f1f;
    --ion-tab-bar-background: #1f1f1f;
    --ion-tab-bar-background-focused: #353535;
    --ion-card-background: #1e1e1e;

    /// Only the item borders should increase in contrast
    /// Borders for elements like toolbars should remain the same
    --ion-item-border-color: var(--ion-background-color-step-400);
    --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};
    --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};
    --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};
    --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};
    --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};
    --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};
    --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};
    --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};
    --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};
    --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};
    --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};
    --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};
    --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};
    --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};
    --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};
    --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};
    --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};
    --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};
    --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};
    --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};
    --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};
    --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};
    --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};
    --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};
    --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};
    --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};
    --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};
    --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};
    --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};
    --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};
    --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};
    --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};
    --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};
    --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};
    --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};
    --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};
    --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};
    --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};
  }

  // Toast
  // --------------------------------------------------

  & ion-toast {
    --color: var(--ion-background-color);
  }

  & ion-toast::part(button) {
    // Fallback for browsers that don't support color-mix
    color: var(--color);
  }

  /* stylelint-disable-next-line order/order */
  @supports (color: color-mix(in lch, plum, pink)) {
    & ion-toast::part(button) {
      color: color-mix(in srgb, var(--color) 73%, var(--button-color));
    }
  }

  & ion-toast::part(button cancel) {
    color: var(--color);
  }
}