$themes: (
  original: (
    colorAccent: $color-blue,
    colorAccentHover: $color-blue-original-light,
    colorAccentReverse: $color-blue-original-light,
    backgroundColor: $color-background-off-white,
    backgroundColorOpaque: $color-background-off-white,
    moduleBackgroundColor: $color-white,
    moduleMediumBackgroundColor: $color-white,
    // moduleMediumBackgroundColor: $color-transparent,
    border: 1px solid $color-border-light,
    borderLight: 1px solid $color-border-light-lightest,
    borderDark: 1px solid $color-text-gray,
    borderAccent: 1px solid $color-blue,
    iconColorSecondary: #cacaca,
    textColorPrimary: $color-text-dark,
    textColorSecondary: $color-text-gray,
    textColorAccent: $color-text-blue,
    textColorAccentHover: $color-blue-original-dark,
    textColorError: $color-text-red,
    contentBorderAccent: $color-transparent,
    buttonBackground: $color-blue-original-dark,
    buttonBackgroundHover: $color-blue-original-light,
    buttonText: $color-text-white,
    buttonTextHover: $color-text-white,
    buttonBoxShadow: $color-transparent,        
  ),
  light: (
    colorAccent: $color-teal,
    colorAccentHover: $color-teal-dark,
    colorAccentReverse: $color-blue-black,
    backgroundColor: $color-background-off-white,
    backgroundColorOpaque: $color-background-off-white,    
    moduleBackgroundColor: $color-white,
    moduleMediumBackgroundColor: $color-transparent,
    border: 1px solid $color-border-light,
    borderLight: 1px solid $color-border-light-lightest,
    borderDark: 1px solid $color-text-gray,
    borderAccent: 1px solid $color-teal,
    iconColorSecondary: #cacaca,
    textColorPrimary: $color-text-dark,
    textColorSecondary: $color-text-gray,
    textColorAccent: $color-text-teal,   
    textColorAccentHover: $color-teal, 
    textColorError: $color-text-red,
    contentBorderAccent: $color-teal,
    buttonBackground: $color-blue-black,
    buttonBackgroundHover: $color-teal,
    buttonText: $color-text-white,
    buttonTextHover: $color-white,
    buttonBoxShadow: $color-teal,
    buttonBoxShadowHover: $color-blue-black,    
  ),
  dark: (
    colorAccent: $color-teal,
    colorAccentHover: $color-teal,
    colorAccentReverse: $color-white,
    backgroundColor: $color-background-dark,
    backgroundColorOpaque: $color-blue-dark,
    moduleBackgroundColor: $color-background-dark,
    moduleMediumBackgroundColor: $color-background-dark,
    border: 1px solid $color-border-dark,
    borderLight: 1px solid $color-border-dark-lightest,
    borderDark: 1px solid $color-text-gray-light,
    borderAccent: 1px solid $color-teal,
    iconColorSecondary: $color-text-gray-light,
    textColorPrimary: $color-text-white,
    textColorSecondary: $color-text-gray-light,
    textColorAccent: $color-teal-light,
    textColorAccentHover: $color-teal,
    textColorError: $color-text-red,
    contentBorderAccent: $color-teal,
    buttonBackground: $color-white,
    buttonBackgroundHover: $color-teal,
    buttonText: $color-blue-black,
    buttonTextHover: $color-white,
    buttonBoxShadow: $color-teal,
    buttonBoxShadowHover: $color-white,
  ),
);

/*
 * Implementation of themes
 */
@mixin themify($themes) {
  @each $theme, $map in $themes {
    .theme-#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}


  .theme-original {
    background-color: $white; 
    color: $color-text-dark;
    @include MQ(M) {
      background-color: $color-background-off-white; 
    }
  }
  .theme-light {
    background-color: $white; 
    color: $color-text-dark;
    @include MQ(M) {
      background-color: $color-background-off-white; 
    }    
  }
  .theme-dark {
    background-color: $color-background-dark; 
    color: $color-text-white;
  }


// Utility classes to be used with @extend 

.link {
  text-decoration: none;
  transition: 0.2s all ease-in-out;
  &--primary {
    @include themify($themes) {
        color: themed('textColorPrimary');  
    }
    &:hover, &:focus {
      @include themify($themes) {
          color: themed('textColorAccent');  
      } 
    }
  }

  &--secondary {
    @include themify($themes) {
        color: themed('textColorSecondary');  
    }
    &:hover, &:focus {
      @include themify($themes) {
          color: themed('textColorAccent');  
      } 
    }
  }
  &--accent {
    @include themify($themes) {
        color: themed('textColorAccent');  
    }
    &:hover, &:focus {
      @include themify($themes) {
          color: themed('textColorAccentHover');  
      } 
    }
  }
}