/* STACKICONS-SOCIAL "MULTI-COLOR" CLASSES

Using absolute positioning, we stack multiple 
font characters to create "multi-color" icons, 
e.g., the blue & pink dots in the Flickr logo. 

Often, the .st-multi-color version is simply 
a solid button b.g. shape with a white icon.
This allows us to use text-shadow effects on 
the button and logo separately (in the single 
color version the logo is "cut out" of b.g.).

There is a default button shape for multi-color 
icons, $btn-shape-c0-default, that is set in 
_unicodes-stackicons-social.scss. It mirrors 
the $btn-shape-default set for single color icons 
in _construction-kit-stackicons-social.scss */


// **** VARIABLES **** /

// **** CHOOSE "MULTI-COLOR" COLOR-STYLE... **** /

// For .st-multi-color icons there are two "color-style" choices:

// brand-color:         brand color (_colors-social-2014.scss)
// brand-color-variant: brand-color is adjusted by mixin
//                      (no rgba, use opacity on parent instead)

// For .st-multi-color icons, there are 2 "hover style" choices:

// brand-color:         brand color on hover
// brand-color-hover:   brand-color is adjusted by mixin


$multi-color-default: brand-color !default;

$multi-color-hover-default: brand-color-hover !default;


// **** CHOOSE DEFAULT COLORS **** /

// default color for "generic" multi-color icon -- 
// usually white, e.g., white "f" on facebook blue bg. 

$color-multi-color-icon-default: $white !default;

$color-multi-color-bg-default: $grey-lightest-alt2 !default; // veerrry light grey #f1f1f1


// **** CHOOSE DEFAULT EFFECTS **** /

// button and icon effects - glow, dropshadow, etc. (@mixins in _construction-kit)

// choices: dropshadow, glow, glowshadow, false

$multi-color-bg-effect: false; 

$multi-color-bg-effect-hover: false;

$multi-color-icon-effect: false;

$multi-color-icon-effect-hover: dropshadow;

// when there's no button background, just the icon...

$multi-color-icon-only-effect: false;

$multi-color-icon-only-effect-hover: dropshadow;


@mixin shadow-effect($target:bg) {
  @if $target == bg {
    @if $multi-color-bg-effect == dropshadow {
      @include dropshadow;
    }
    @else if $multi-color-bg-effect == glow {
      @include glow;
    }
    @else if $multi-color-bg-effect == glowshadow {
      @include glowshadow;
    }
    @else if $multi-color-bg-effect == embossed {
      @include embossed;
    }
    @else if $multi-color-bg-effect == raised {
      @include raised;
    }
    @else {
      text-shadow: none;
    }
  }
  @else if $target == bg-hover {
    @if $multi-color-bg-effect-hover == dropshadow {
      @include dropshadow;
    }
    @else if $multi-color-bg-effect-hover == glow {
      @include glow;
    }
    @else if $multi-color-bg-effect-hover == glowshadow {
      @include glowshadow;
    }
    @else if $multi-color-bg-effect-hover == embossed {
      @include embossed;
    }
    @else if $multi-color-bg-effect-hover == raised {
      @include raised;
    }
    @else {
      text-shadow: none;
    }
  }
  @else if $target == icon {
    @if $multi-color-icon-effect == dropshadow {
      @include dropshadow;
    }
    @else if $multi-color-icon-effect == glow {
      @include glow;
    }
    @else if $multi-color-icon-effect == glowshadow {
      @include glowshadow;
    }
    @else if $multi-color-icon-effect == embossed {
      @include embossed;
    }
    @else if $multi-color-icon-effect == raised {
      @include raised;
    }
    @else {
      text-shadow: none;
    }
  }
  @else if $target == icon-hover {
      @if $multi-color-icon-effect-hover == dropshadow {
      @include dropshadow;
    }
    @else if $multi-color-icon-effect-hover == glow {
      @include glow;
    }
    @else if $multi-color-icon-effect-hover == glowshadow {
      @include glowshadow;
    }
    @else if $multi-color-icon-effect-hover == embossed {
      @include embossed;
    }
    @else if $multi-color-icon-effect-hover == raised {
      @include raised;
    }
    @else {
      text-shadow: none;
    }
  }
  @else if $target == icon-only {
    @if $multi-color-icon-only-effect == dropshadow {
      @include dropshadow;
    }
    @else if $multi-color-icon-only-effect == glow {
      @include glow;
    }
    @else if $multi-color-icon-only-effect == glowshadow {
      @include glowshadow;
    }
    @else if $multi-color-icon-only-effect == embossed {
      @include embossed;
    }
    @else if $multi-color-icon-only-effect == raised {
      @include raised;
    }
    @else {
      text-shadow: none;
    }
  }
  @else if $target == icon-only-hover {
    @if $multi-color-icon-only-effect-hover == dropshadow {
      @include dropshadow;
    }
    @else if $multi-color-icon-only-effect-hover == glow {
      @include glow;
    }
    @else if $multi-color-icon-only-effect-hover == glowshadow {
      @include glowshadow;
    }
    @else if $multi-color-icon-only-effect-hover == embossed {
      @include embossed;
    }
    @else if $multi-color-icon-only-effect-hover == raised {
      @include raised;
    }
    @else {
      text-shadow: none;
    }
  }
} // end @shadow-effect


// **** DEFINE "BRAND-COLOR-VARIANT"... **** /

//   lighten or darken, saturate or desaturate, change alpha
//   percentage variables required for "scale-color" function:

$multi-color-lighten-by: 40%;  // (-100 to 0 to 100%) negative darkens

$multi-color-saturate-by: -25%;  // (-100 to 0 to 100%) negative desaturates

$multi-color-alpha: 50%;  // (0 to 100%) 0 is completely transparent


// **** DEFINE "BRAND-COLOR-HOVER"... **** /

//   lighten or darken, saturate or desaturate, change alpha
//   percentage variables required for "scale-color" function:

$multi-color-hover-lighten-by: 35%;  // (-100 to 0 to 100%) negative darkens

$multi-color-hover-saturate-by: 4%;  // (-100 to 0 to 100%) negative desaturates

$multi-color-hover-alpha: 100%;  // (0 to 100%) 0 is completely transparent


// ---- MIXINS ---- /

// brand-color-variant - btn or icon, @include for each

// If the $brand-color lightness is low (<25) and saturation 
// isn't super-high (<90) we lighten more and don't change the 
// saturation. If saturation is very low (<5) we don't change it.
// We don't change alpha here, as stacked rgba colors will mix.
// Instead, we change opacity on the parent element down below...

@mixin adjust-multi-color ($brand-color:$grey-lighter-alt, $saturation:$multi-color-saturate-by, $lightness:$multi-color-lighten-by, $alpha:$multi-color-alpha) {
  @if lightness($brand-color) < 25 and saturation($brand-color) < 95 and $lightness > 0 {
    color: scale-color($brand-color, $saturation:0%, $lightness:$multi-color-lighten-by*1.1);
  }
  @else if saturation($brand-color) < 5 or saturation($brand-color) > 95 {
    color: scale-color($brand-color, $saturation:0%, $lightness:$multi-color-lighten-by);
  }
  @else {
    color: scale-color($brand-color, $saturation:$multi-color-saturate-by, $lightness:$multi-color-lighten-by);
  }
}

// brand-color-hover - btn or icon, @include for each

@mixin adjust-multi-color-hover ($brand-color:$grey-lighter-alt, $saturation:$multi-color-hover-saturate-by, $lightness:$multi-color-hover-lighten-by, $alpha:$multi-color-hover-alpha) {
  @if lightness($brand-color) < 25 and saturation($brand-color) < 95 and $lightness > 0 {
    // non-rgba fallback
    color: scale-color($brand-color, $saturation:0%, $lightness:$multi-color-hover-lighten-by*1.1);
  }
  @else if saturation($brand-color) < 5 or saturation($brand-color) > 95 {
    color: scale-color($brand-color, $saturation:0%, $lightness:$multi-color-hover-lighten-by);
  }
  @else {
    // non-rgba fallback
    color: scale-color($brand-color, $saturation:$multi-color-hover-saturate-by, $lightness:$multi-color-hover-lighten-by);
  }
}

// **** MULTI-COLOR CUSTOMIZING - UNIVERSAL FOR ALL BRANDS **** /

// For all brands... to give the brand-variant color-style 
// transparency, specify opacity here instead of using rgba.

.st-multi-color .st-icon,
.st-multi-color.st-icon,
.st-multi-color [class^="st-icon-"],
[class^="st-icon-"].st-multi-color { 
  @if $multi-color-default == brand-color-variant {
    opacity: $multi-color-opacity;
  }
  // plus anything else you want to add...
}

.st-multi-color .st-icon:hover,
.st-multi-color.st-icon:hover,
.st-multi-color [class^="st-icon-"]:hover,
[class^="st-icon-"].st-multi-color:hover,
.st-multi-color .st-icon:active,
.st-multi-color.st-icon:active,
.st-multi-color [class^="st-icon-"]:active,
[class^="st-icon-"].st-multi-color:active,
.st-multi-color .st-icon:focus,
.st-multi-color.st-icon:focus,
.st-multi-color [class^="st-icon-"]:focus,
[class^="st-icon-"].st-multi-color:focus {
  @if $multi-color-hover-default == brand-color-hover {
    opacity: 1*$multi-color-hover-alpha;
  }
  // plus anything else you want to add...
}