@import "./ionic.theme.default";

// iOS Default Theme
// ----------------------------------
$colors-ios:      () !default;
$ion-colors-ios:  ();
$colors-ios:                                  ion-extend-colors($colors, $ion-colors-ios, $colors-ios);

// iOS General
// --------------------------------------------------
$content-ios-margin:                          $content-margin !default;
$content-ios-padding:                         $content-padding !default;
$font-family-ios-base:                        $font-family-base !default;
$font-size-ios-base:                          $font-size-base !default;

// Default iOS Alpha levels
// --------------------------------------------------
$alpha-ios-activated:                         css-var($alpha-activated, alpha-ios-activated) !default;
$alpha-ios-border-low:                        css-var($alpha-border-low, alpha-ios-border-low) !default;
$alpha-ios-border-medium:                     css-var($alpha-border-medium, alpha-ios-border-medium) !default;
$alpha-ios-border-high:                       css-var($alpha-border-high, alpha-ios-border-high) !default;
$alpha-ios-disabled:                          css-var($alpha-disabled, alpha-ios-disabled) !default;
$alpha-ios-focused:                           css-var($alpha-focused, alpha-ios-focused) !default;
$alpha-ios-hover:                             css-var($alpha-hover, alpha-ios-hover) !default;
$alpha-ios-lowest:                            css-var($alpha-lowest, alpha-ios-lowest) !default
$alpha-ios-low:                               css-var($alpha-low, alpha-ios-low) !default;
$alpha-ios-medium:                            css-var($alpha-medium, alpha-ios-medium) !default;
$alpha-ios-high:                              css-var($alpha-high, alpha-ios-high) !default;
$alpha-ios-highest:                           css-var($alpha-highest, alpha-ios-highest) !default;

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

// Default iOS Foreground and Background Colors
// --------------------------------------------------
$background-ios-color:                        css-var($background-ios-color-value, background-ios-color) !default;
$text-ios-color:                              css-var($text-ios-color-value, text-ios-color) !default;
$placeholder-text-ios-color:                  css-var($placeholder-text-color, placeholder-text-ios-color) !default;

// Generated Foreground and Background Colors for alpha
// These variables are not used, but we call this here in order to add these colors
// to the global list of css variables for a theme. This is only used to get a dump of all
// css variables that the theme uses.
// TODO: @color-mod: remove all of this
// --------------------------------------------------
$background-color-rgb:                        css-var(color-to-rgb-list($background-ios-color-value), background-ios-color-rgb) !default; //TODO: @color-mod: remove
$text-color-rgb:                              css-var(color-to-rgb-list($text-ios-color-value), text-ios-color-rgb) !default; //TODO: @color-mod: remove

// Default iOS Background & Text Color Steps
// --------------------------------------------------
$background-ios-color-step-50:                css-var(mix($text-ios-color-value, $background-ios-color-value, 5%), background-ios-color-step-50) !default;
$background-ios-color-step-100:               css-var(mix($text-ios-color-value, $background-ios-color-value, 10%), background-ios-color-step-100) !default;
$background-ios-color-step-150:               css-var(mix($text-ios-color-value, $background-ios-color-value, 15%), background-ios-color-step-150) !default;
$background-ios-color-step-200:               css-var(mix($text-ios-color-value, $background-ios-color-value, 20%), background-ios-color-step-200) !default;
$background-ios-color-step-250:               css-var(mix($text-ios-color-value, $background-ios-color-value, 25%), background-ios-color-step-250) !default;
$background-ios-color-step-300:               css-var(mix($text-ios-color-value, $background-ios-color-value, 30%), background-ios-color-step-300) !default;
$background-ios-color-step-350:               css-var(mix($text-ios-color-value, $background-ios-color-value, 35%), background-ios-color-step-350) !default;
$background-ios-color-step-400:               css-var(mix($text-ios-color-value, $background-ios-color-value, 40%), background-ios-color-step-400) !default;
$background-ios-color-step-450:               css-var(mix($text-ios-color-value, $background-ios-color-value, 45%), background-ios-color-step-450) !default;
$background-ios-color-step-500:               css-var(mix($text-ios-color-value, $background-ios-color-value, 50%), background-ios-color-step-500) !default;
$background-ios-color-step-550:               css-var(mix($text-ios-color-value, $background-ios-color-value, 55%), background-ios-color-step-550) !default;
$background-ios-color-step-600:               css-var(mix($text-ios-color-value, $background-ios-color-value, 60%), background-ios-color-step-600) !default;
$background-ios-color-step-650:               css-var(mix($text-ios-color-value, $background-ios-color-value, 65%), background-ios-color-step-650) !default;
$background-ios-color-step-700:               css-var(mix($text-ios-color-value, $background-ios-color-value, 70%), background-ios-color-step-700) !default;
$background-ios-color-step-750:               css-var(mix($text-ios-color-value, $background-ios-color-value, 75%), background-ios-color-step-750) !default;
$background-ios-color-step-800:               css-var(mix($text-ios-color-value, $background-ios-color-value, 80%), background-ios-color-step-800) !default;
$background-ios-color-step-850:               css-var(mix($text-ios-color-value, $background-ios-color-value, 85%), background-ios-color-step-850) !default;
$background-ios-color-step-900:               css-var(mix($text-ios-color-value, $background-ios-color-value, 90%), background-ios-color-step-900) !default;
$background-ios-color-step-950:               css-var(mix($text-ios-color-value, $background-ios-color-value, 95%), background-ios-color-step-950) !default;
$background-ios-color-step-1000:              css-var(mix($text-ios-color-value, $background-ios-color-value, 100%), background-ios-color-step-1000) !default;
$text-ios-color-step-50:                      css-var(mix($background-ios-color-value, $text-ios-color-value, 5%), text-ios-color-step-50) !default;
$text-ios-color-step-100:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 10%), text-ios-color-step-100) !default;
$text-ios-color-step-150:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 15%), text-ios-color-step-150) !default;
$text-ios-color-step-200:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 20%), text-ios-color-step-200) !default;
$text-ios-color-step-250:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 25%), text-ios-color-step-250) !default;
$text-ios-color-step-300:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 30%), text-ios-color-step-300) !default;
$text-ios-color-step-350:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 35%), text-ios-color-step-350) !default;
$text-ios-color-step-400:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 40%), text-ios-color-step-400) !default;
$text-ios-color-step-450:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 45%), text-ios-color-step-450) !default;
$text-ios-color-step-500:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 50%), text-ios-color-step-500) !default;
$text-ios-color-step-550:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 55%), text-ios-color-step-550) !default;
$text-ios-color-step-600:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 60%), text-ios-color-step-600) !default;
$text-ios-color-step-650:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 65%), text-ios-color-step-650) !default;
$text-ios-color-step-700:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 70%), text-ios-color-step-700) !default;
$text-ios-color-step-750:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 75%), text-ios-color-step-750) !default;
$text-ios-color-step-800:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 80%), text-ios-color-step-800) !default;
$text-ios-color-step-850:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 85%), text-ios-color-step-850) !default;
$text-ios-color-step-900:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 90%), text-ios-color-step-900) !default;
$text-ios-color-step-950:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 95%), text-ios-color-step-950) !default;
$text-ios-color-step-1000:                    css-var(mix($background-ios-color-value, $text-ios-color-value, 100%), text-ios-color-step-1000) !default;

// iOS General Colors
// --------------------------------------------------
$backdrop-ios-color:                          css-var($backdrop-color, backdrop-ios-color) !default;
$border-ios-color:                            css-var(#dedede, border-ios-color) !default;
$box-shadow-ios-color:                        css-var($box-shadow-color, box-shadow-ios-color) !default;
$overlay-ios-background-color:                css-var(#f9f9f9, overlay-ios-background-color) !default;

// iOS Tabs & Tab bar
// --------------------------------------------------
$tabbar-ios-background-color:                 css-var($tabbar-background-color, tabbar-ios-background-color) !default;
$tabbar-ios-background-color-focused:         css-var($tabbar-background-color-focused, tabbar-ios-background-color-focused) !default;
$tabbar-ios-translucent-background-color:     css-var(unquote("rgba(248,248,248, #{$alpha-ios-high})"), tabbar-ios-translucent-background-color) !default; // TODO: @color-mod: remove
$tabbar-ios-border-color:                     css-var(unquote("rgba(0, 0, 0, #{$alpha-ios-border-medium})"), tabbar-ios-border-color) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low))
$tabbar-ios-text-color:                       css-var($tabbar-text-color, tabbar-ios-text-color) !default;
$tabbar-ios-text-color-active:                css-var(ion-color($colors-ios, primary, base, ios), tabbar-ios-text-color-active) !default;

// iOS Toolbar
// --------------------------------------------------
$toolbar-ios-height:                          44px !default;
$toolbar-ios-padding:                         4px !default;
$toolbar-ios-background-color:                css-var($toolbar-background-color, toolbar-ios-background-color) !default;
$toolbar-ios-translucent-background-color:    css-var(unquote("rgba(248, 248, 248, #{$alpha-ios-high})"), toolbar-ios-translucent-background-color) !default; // TODO: @color-mod: remove
$toolbar-ios-border-color:                    css-var(unquote("rgba(0, 0, 0, #{$alpha-ios-border-medium})"), toolbar-ios-border-color) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low))
$toolbar-ios-color-active:                    css-var(ion-color($colors-ios, primary, base, ios), toolbar-ios-color-active) !default;
$toolbar-ios-color-inactive:                  css-var($toolbar-color-inactive, toolbar-ios-color-inactive) !default;
$toolbar-ios-text-color:                      css-var($toolbar-text-color, toolbar-ios-text-color) !default;

// iOS List & List Items
// --------------------------------------------------
$item-ios-background-color:                   css-var($background-ios-color, item-ios-background-color) !default;
$item-ios-background-color-active:            css-var(#d9d9d9, item-ios-background-color-active) !default;
$item-ios-border-color:                       css-var($item-border-color, item-ios-border-color) !default;
$item-ios-text-color:                         css-var($item-text-color, item-ios-text-color) !default;
