/**
* fathym_themes are Fathym's branded theme styles (fathym-ivy-theme, fathym-sea-green-theme, ...)
*/
@import "../theming/fathym_themes";

/**
* Variable to hold the current theme
*
* Default to fathym-ivy-theme
*/
$global-theme: fathym-ivy-theme(false) !default;

/**
* Variable to hold current primary color
*/
$global-primary: mat-color(map-get($global-theme, primary), 500) !default;

/**
* Variable to hold current primary contrast (font) color
*/
$global-primary-contrast: mat-color(map-get($global-theme, primary), default-contrast) !default;

/**
* Variable to hold current accent color
*/
$global-accent: mat-color(map-get($global-theme, accent), 500) !default;

/**
* Variable to hold current primary accent (font) color
*/
$global-accent-contrast: mat-color(map-get($global-theme, accent), default-contrast) !default;

/**
* Variable to hold current warn color
*/
$global-warn: mat-color(map-get($global-theme, warn), 500) !default;

/**
* Variable to hold current primary warn (font) color
*/
$global-warn-contrast: mat-color(map-get($global-theme, warn), default-contrast) !default;

/**
* Get things setup and ready to go
*
* @param $theme current theme
* @param $use-fathym-branding use Fathym specific branding
*        for specific elements
*/
@mixin theme-setup($theme, $use-fathym-branding: false) {
  @include angular-material-theme($theme);
  @include variants($theme);
  @include theme-extras($theme);
}

/**
* Current theme color palattes
*/
@function get-color-palettes($theme) {
  $color-palettes: (
    primary: map-get($theme, primary),
    accent: map-get($theme, accent),
    warn: map-get($theme, warn)
  );

  @return $color-palettes;
}

@function get-font-color($color-map, $name) {
  @return map-get(map-get($color-map, contrast), $name);
}

/**
* Dynamically create classes for default colors (primary, accent, warn)
*
* @param $palette-name (primary, accent, warn)
* @param $color color value
*/
@mixin default-color($palette-name, $color, $name, $map) {
  // creates a class (.primary {}, ...)
  .#{$palette-name} {
      background-color: $color !important;
      color: get-font-color($map, $name);

      // create a sass variable
      // #{str-remove-whitespace(#{'$'$palette-name'-'$name})}: $color;
    }
}

/**
* Dynamically create classes for theme variant colors
* (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700)
*
* @param $palette-name (primary, accent, warn)
* @param $color color value (#f4f7f6)
* @param $name color variant value (50, 100, 200, ...)
*/
@mixin variant-color($palette-name, $color, $name, $map) {
  // creates a class (.primary-50 {}, ...)
  .#{$palette-name}-#{$name} {
      background-color: $color !important;
      color: get-font-color($map, $name);
    }
}

/**
* Dynamically create classes for contrast colors (font colors)
*
* @param $palette-name (primary, accent, warn)
* @param $color color value (#f4f7f6)
* @param $name color variant value (50, 100, 200, ...)
*/
@mixin contrast-color($palette-name, $color, $name) {
  // creates a class (.primary-contrast-50 {}, ...)
  .#{$palette-name}-contrast-#{$name} {
      color: $color !important;
    }
}

/**
* Create dynamic style classes
*
* @param $palette-name - palette name from $color-palettes (primary, accent, warn)
* @param $color-map - list of colors within the palette - Key/Value (50: #f4f7f6)
* @param $nested-map - Used when the Key of $color-map is a map (list) itself
*/
@mixin create-color-classes($palette-name, $color-map, $theme, $nested-map: null) {

  $theme-variables: theme-variables($theme);
  $merged: map-merge($theme-variables, $color-map);

  @each $name, $color in $color-map {
  // @each $name, $color in $merged {

    // If $color is a map (list), make a recursive call back to create-color-classes()
    @if type-of($color) == map {
      @include create-color-classes($palette-name, $color, $theme, $name);

      // If $nested-map is empty, assume top level properties
    } @else if $nested-map == null {
        @include variant-color($palette-name, $color, $name, $color-map);

      // Set default colors
      @if $name == 500 {
        @include default-color($palette-name, $color, $name, $color-map);
      }

      // If not $nested-map, then set contrast color
    } @else if $nested-map != null {
      @include contrast-color($palette-name, $color, $name);
    }
  }
}

/**
* Loop over each color palette
*/
@mixin variants($theme) {
  // Key/Value of $color-palettes: (primary: map-get($global-theme, primary))
  @each $palette-name, $color-map in get-color-palettes($theme) {
   @include create-color-classes($palette-name, $color-map, $theme);
  }
}

/**
* Set the default theme
*/
// @include theme-setup($global-theme);

.flex-column {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.flex-row {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
}

.flex-row-center {
  align-items: center;
  justify-content: center;
}

.mat-button-large {
  line-height: 48px;
  font-size: 18px;
  font-weight: 700;
  padding: 0 24px !important;
}

.mat-round {
  border-radius: 0.5em;
}