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

// Material Design Default Theme
// ----------------------------------
$colors-md:      () !default;
$ion-colors-md:  ();
$colors-md:                                  ion-extend-colors($colors, $ion-colors-md, $colors-md);

// Material Design General
// --------------------------------------------------
$content-md-margin:                     $content-margin !default;
$content-md-padding:                    $content-padding !default;
$font-family-md-base:                   "Roboto", "Helvetica Neue", sans-serif !default;
$font-size-md-base:                     $font-size-base !default;

// Default Material Design Alpha levels
// --------------------------------------------------
$alpha-md-activated:                    css-var($alpha-activated, alpha-md-activated) !default;
$alpha-md-border-low:                   css-var(.07, alpha-md-border-low) !default;
$alpha-md-border-medium:                css-var($alpha-border-medium, alpha-md-border-medium) !default;
$alpha-md-border-high:                  css-var($alpha-border-high, alpha-md-border-high) !default;
$alpha-md-disabled:                     css-var($alpha-disabled, alpha-md-disabled) !default;
$alpha-md-focused:                      css-var(.1, alpha-md-focused) !default;
$alpha-md-hover:                        css-var($alpha-hover, alpha-md-hover) !default;
$alpha-md-lowest:                       css-var($alpha-lowest, alpha-md-lowest) !default
$alpha-md-low:                          css-var($alpha-low, alpha-md-low) !default;
$alpha-md-medium:                       css-var($alpha-medium, alpha-md-medium) !default;
$alpha-md-high:                         css-var($alpha-high, alpha-md-high) !default;
$alpha-md-highest:                      css-var($alpha-highest, alpha-md-highest) !default;

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

// Default Material Design Foreground and Background Colors
// --------------------------------------------------
$background-md-color:                   css-var($background-md-color-value, background-md-color) !default;
$text-md-color:                         css-var($text-md-color-value, text-md-color) !default;
$placeholder-text-md-color:             css-var($placeholder-text-color, placeholder-text-md-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-md-color-value), background-md-color-rgb) !default;
$text-color-rgb:                        css-var(color-to-rgb-list($text-md-color-value), text-md-color-rgb) !default;

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

// Material Design General Colors
// --------------------------------------------------
$backdrop-md-color:                     css-var($backdrop-color, backdrop-md-color) !default;
$border-md-color:                       css-var(#c1c4cd, border-md-color) !default;
$box-shadow-md-color:                   css-var($box-shadow-color, box-shadow-md-color) !default;
$overlay-md-background-color:           css-var(#fafafa, overlay-md-background-color) !default;

// Material Design Tabs & Tab bar
// --------------------------------------------------
$tabbar-md-background-color:            css-var($tabbar-background-color, tabbar-md-background-color) !default;
$tabbar-md-background-color-focused:    css-var($tabbar-background-color-focused, tabbar-md-background-color-focused) !default;
$tabbar-md-border-color:                css-var(unquote("rgba(0, 0, 0, #{$alpha-md-border-low})"), tabbar-md-border-color) !default; // TODO: @color-mod($border-md-color, a($alpha-lowest))
$tabbar-md-text-color:                  css-var($text-md-color-step-400, tabbar-md-text-color) !default;
$tabbar-md-text-color-active:           css-var($tabbar-text-color-active, tabbar-md-text-color-active) !default;

// Material Design Toolbar
// --------------------------------------------------
$toolbar-md-height:                     56px !default;
$toolbar-md-padding:                    4px !default;
$toolbar-md-background-color:           css-var($toolbar-background-color, toolbar-md-background-color) !default;
$toolbar-md-border-color:               css-var($border-md-color, toolbar-md-border-color) !default;
$toolbar-md-color-active:               css-var(#4a4a4a, toolbar-md-color-active) !default;
$toolbar-md-color-inactive:             css-var($toolbar-color-inactive, toolbar-md-color-inactive) !default;
$toolbar-md-text-color:                 css-var(#424242, toolbar-md-text-color) !default;

// Material Design List & List Items
// --------------------------------------------------
$item-md-background-color:              css-var($item-background-color, item-md-background-color) !default;
$item-md-background-color-active:       css-var(#f1f1f1, item-md-background-color-active) !default;
$item-md-border-color:                  css-var(#dedede, item-md-border-color) !default;
$item-md-text-color:                    css-var($item-text-color, item-md-text-color) !default;

@include css-variables-to-root($ion-colors-md);
