//  ****************************************
// |                                        |
// |  STACKICONS-SOCIAL "CONSTRUCTION KIT"  |
// |  VARIABLES & MIXINS                    |
// |                                        |
//  ****************************************

// This is the SCSS "Construction Kit" that will 
// generate default CSS for Stackicons-Social,
// an icon font designed for added flexibility.

// Modify the $variables and @mixins below to
// change default colors and shapes for icons, 
// formulate variants for brand-colors, etc.

// This file is @imported into 
// _css-defaults-stackicons-social (as well as
// stackicons.scss).


// **** CONSTRUCTION KIT VARIABLES ****

// ---- BUTTON SIZE & SHAPE DEFAULTS ---- /

// The values set below determine the default 
// button shape (or icon-only) of the individual 
// .st-icon-(brand) classes generated below.


// **** CHOOSE DEFAULT BUTTON SHAPE & SIZE ****

// sq = square, r1 = slightly rounded (Android), 
// r2 = rounded, r3 = more rounded (iOS 7), 
// cir = circle, icon = icon only 

$btn-shape-default: r1 !default;  // Choices: sq, r1, r2, r3, cir, icon

// referenced in _multi-color-stackicons-social,
// but may be overridden in that file

$btn-size-default: 1.815em; // (1.7em = 32px, 1.815em = 34px, 1.92em = 36px, 2.135em = 40px)

// Padding gives users a bigger touch-target.  
// (We actually create "fake" padding with this value 
// since "stacked" elements use position: absolute.)

$btn-padding: .143em; // 4px (.214 = 6px)


// ---- COLORS & SHADOWS ---- /

// DROPSHADOW DEFAULT COLORS:

// non-rgba fallback
$color-shadow: $grey-light !default; // #999

$color-shadow-rgba: $grey-light-rgba !default; // rgba(0,0,0, 0.395)

$color-glowshadow: $grey-alt2 !default; // #777

$color-glowshadow-rgba: $grey-alt2-rgba !default; // rgba(0,0,0, 0.528)


// **** CHOOSE DEFAULT COLOR & COLOR-HOVER STYLES **** /

// (Brand colors are @imported from _colors-social-2014.
// Button and icon colors can be different, e.g., in 
// evernote the button is green, elephant icon is grey.)

// There are 4 "color style" choices for buttons:

// 1) single-color:         all buttons & icons the same color
// 2) brand-color:          buttons & icons are the brand color
// 3) brand-color-variant:  brand-color is adjusted by @mixin (below)
// 4) embossed-only:        darkened background-color, embossed

$btn-color-style-default: brand-color !default; 


// There are 3 "hover style" choices:

// single-color-hover:  all buttons & icons same hover color
// brand-color:         brand color on hover
// brand-color-hover:   brand-color is adjusted by @mixin (below)

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



// DEFINE "SINGLE-COLOR" (icons same color):

$btn-single-color-default: $grey-lighter !default;

// if no rgba, set to false or null
$btn-single-color-default-rgba: $grey-lighter-rgba !default;



// DEFINE "SINGLE-COLOR-HOVER" (hover color all the same):

$btn-single-color-default-hover: $grey !default;

// if no rgba, set to false or null
$btn-single-color-default-rgba-hover: $grey-rgba !default;



// DEFINE "EMBOSSED-ONLY" (darkened bg color):

// background behind icons

$color-background: $white !default;

$emboss-darken-background-by: 7.5;

$color-background-embossed: darken($color-background, $emboss-darken-background-by);

// shadows & highlights

// non-rgba fallback
$emboss-shadow: $grey-light-alt2 !default; // #bbb

$emboss-shadow-rgba: $grey-light-alt2-rgba !default; // rgba(0, 0, 0, 0.263);

// non-rgba fallback
$emboss-highlight: white !default;

$emboss-highlight-rgba: rgba($emboss-highlight, 0.5) !default;


.st-embossed {
  // non-rgba fallback
  text-shadow: 0 -1px 0 $emboss-shadow, 
    0 1px 0 $emboss-highlight;
  text-shadow: 0 -1px $emboss-shadow-rgba,
    // softens slightly
    0 -1px 1px rgba(0, 0, 0, 0.05),
    0 1px 0 $emboss-highlight-rgba;
}

.st-raised {
  // non-rgba fallback
  text-shadow: 0 1px 0 $emboss-shadow, 
    0 -1px 0 $emboss-highlight;
  text-shadow: 0 1px $emboss-shadow-rgba,
    // softens slightly
    0 1px 1px rgba(0, 0, 0, 0.05),
    0 -1px 0 $emboss-highlight-rgba;
}


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

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

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

$brand-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:

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

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

$brand-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)
// we don't pump up the saturation...

@mixin adjust-brand-color ($brand-color:$grey-lighter-alt, $saturation:$brand-color-saturate-by, $lightness:$brand-color-lighten-by, $alpha:$brand-color-alpha) {
  // dark color, and we're lightening and saturating
  @if lightness($brand-color) < 25 and $lightness > 0 and $saturation > 0 {
    // non-rgba fallback
    color: scale-color($brand-color, $saturation:0%, $lightness:$brand-color-lighten-by*1.1);
    @if $brand-color-alpha < 100 {
      color: scale-color($brand-color, $saturation:0%, $lightness:$brand-color-lighten-by*1.1, $alpha:$brand-color-alpha);
    }
  }
  // dark color, and we're lightening but either not saturating or desaturating
  @else if lightness($brand-color) < 25 and $lightness > 0 {
    // non-rgba fallback
    color: scale-color($brand-color, $saturation:$brand-color-saturate-by, $lightness:$brand-color-lighten-by*1.1);
    @if $brand-color-alpha < 100 {
      color: scale-color($brand-color, $saturation:$brand-color-saturate-by, $lightness:$brand-color-lighten-by*1.1, $alpha:$brand-color-alpha);
    }
  }
  // very desaturated color and we're saturating
  @else if saturation($brand-color) < 5 and $saturation > 0 {
    // non-rgba fallback
    color: scale-color($brand-color, $saturation:0%, $lightness:$brand-color-lighten-by);
    @if $brand-color-alpha < 100 {
      color: scale-color($brand-color, $saturation:0%, $lightness:$brand-color-lighten-by, $alpha:$brand-color-alpha);
    }
  }
  @else if saturation($brand-color) < 5 {
    // non-rgba fallback
    color: scale-color($brand-color, $saturation:$brand-color-saturate-by, $lightness:$brand-color-lighten-by);
    @if $brand-color-alpha < 100 {
      color: scale-color($brand-color, $saturation:$brand-color-saturate-by, $lightness:$brand-color-lighten-by, $alpha:$brand-color-alpha);
    }
  }
  @else {
    // non-rgba fallback
    color: scale-color($brand-color, $saturation:$brand-color-saturate-by, $lightness:$brand-color-lighten-by);
    @if $brand-color-alpha < 100 {
      color: scale-color($brand-color, $saturation:$brand-color-saturate-by, $lightness:$brand-color-lighten-by, $alpha:$brand-color-alpha);
    }
  }
}

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

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


// (mixin for "multi-color" is in separate _partial file)


// MIXINS FOR TEXT-SHADOWS

// Stackicons create shapes using font characters not CSS, 
// so we use text-shadows not box-shadows. IMPORTANT NOTE:
// There's no text-shadow support in IE 8 or 9, and some 
// other issues: http://caniuse.com/#search=text-shadow.

// Workaround if you want shadows on buttons in IE8 or 9: 
// use the icon-only version of the icons and margins  
// instead of padding, then style the containing element.

$shadow-size: 1px;
$shadow-blur: 1px;
$color-glow: white;
$color-glow-rgba: rgba($white, 0.67);

@mixin dropshadow ($shadow-size: 1px, $shadow-blur: 1px, $color-shadow: $color-shadow, $color-shadow-rgba:$color-shadow-rgba) {
  // non-rgba fallback
  text-shadow:      0 $shadow-size $shadow-blur $color-shadow;
  text-shadow:      0 $shadow-size $shadow-blur $color-shadow-rgba; }

// and in class form:
.st-dropshadow {
  // non-rgba fallback
  text-shadow:      0 $shadow-size $shadow-blur $color-shadow;
  text-shadow:      0 $shadow-size $shadow-blur $color-shadow-rgba;   
}

@mixin glow ($shadow-blur: 6px, $color-glow: white, $color-glow-rgba:rgba(white, 0.67)) {
  // non-rgba fallback
  text-shadow:      0 0 $shadow-blur $color-glow;
  text-shadow:      0 0 $shadow-blur $color-glow-rgba; }

// and in class form:
.st-glow {
  // non-rgba fallback
  text-shadow:      0 0 $shadow-blur $color-glow;
  text-shadow:      0 0 $shadow-blur $color-glow-rgba; 
}

@mixin glowshadow ($shadow-blur: 6px, $color-glow:$color-glowshadow, $color-glow-rgba:$color-glowshadow-rgba) {
  // non-rgba fallback
  text-shadow:      0 0 $shadow-blur $color-glow;
  text-shadow:      0 0 $shadow-blur $color-glow-rgba; }

// and in class form:
.st-glowshadow {
  // non-rgba fallback
  text-shadow:      0 0 $shadow-blur $color-glowshadow;
  text-shadow:      0 0 $shadow-blur $color-glowshadow-rgba; 
}

// .st-embossed and .st-raised are classes we can extend, here in @mixin form...

@mixin embossed ($emboss-shadow, $emboss-shadow-rgba, $emboss-highlight-rgba) {
  // non-rgba fallback
  text-shadow:      0 -1px 0 $emboss-shadow, 
                    0 1px 0 $emboss-highlight;
  text-shadow:      0 -1px $emboss-shadow-rgba,
                    // softens slightly
                    0 -1px 1px rgba(0, 0, 0, 0.05),
                    0 1px 0 emboss-highlight-rgba;
}

// .st-embossed and .st-raised are classes we can extend, here in @mixin form...

@mixin embossed ($emboss-shadow:$grey-light-alt2, $emboss-shadow-rgba:$grey-light-alt2-rgba, $emboss-highlight-rgba:rgba(white,0.5)) {
  // non-rgba fallback
  text-shadow:      0 -1px 0 $emboss-shadow, 
                    0 1px 0 $emboss-highlight;
  text-shadow:      0 -1px $emboss-shadow-rgba,
                    // softens slightly
                    0 -1px 1px rgba(0, 0, 0, 0.05),
                    0 1px 0 emboss-highlight-rgba;
}

@mixin raised ($emboss-shadow:$grey-light-alt2, $emboss-shadow-rgba:$grey-light-alt2-rgba, $emboss-highlight-rgba:rgba(white,0.5)) {
  // non-rgba fallback
  text-shadow:      0 1px 0 $emboss-shadow, 
                    0 -1px 0 $emboss-highlight;
  text-shadow:      0 1px $emboss-shadow-rgba,
                    // softens slightly
                    0 1px 1px rgba(0, 0, 0, 0.05),
                    0 -1px 0 $emboss-highlight-rgba;
}

@mixin threedeetext ($color) {
  color: $color;
  text-shadow:      0 2px 0 darken($color, 14%),
                    0 4px 0 darken($color, 16%),
                    0 6px 0 darken($color, 18%),
                    0 8px 0 darken($color, 20%),
                    3px 8px 15px rgba(0,0,0,0.1),
                    3px 8px 5px rgba(0,0,0,0.3);
}

// box-shadows if you need them...

@mixin dropshadow-box ($shadow-size: 1px, $shadow-blur: 1px, $color-shadow: $color-shadow, $color-shadow-rgba:$color-shadow-rgba) {
   -moz-box-shadow:    0 $shadow-size $shadow-blur $color-shadow;
   -webkit-box-shadow: 0 $shadow-size $shadow-blur $color-shadow;
   box-shadow:         0 $shadow-size $shadow-blur $color-shadow;
   -moz-box-shadow:    0 $shadow-size $shadow-blur $color-shadow-rgba;
   -webkit-box-shadow: 0 $shadow-size $shadow-blur $color-shadow-rgba;
   box-shadow:         0 $shadow-size $shadow-blur $color-shadow-rgba; }

@mixin glow-box ($shadow-blur: 6px, $color-glow: $white, $color-glow-rgba:rgba($white, 0.67)) {
   -moz-box-shadow:    0 0 $shadow-blur $color-glow;
   -webkit-box-shadow: 0 0 $shadow-blur $color-glow;
   box-shadow:         0 0 $shadow-blur $color-glow;
   -moz-box-shadow:    0 0 $shadow-blur $color-glow-rgba;
   -webkit-box-shadow: 0 0 $shadow-blur $color-glow-rgba;
   box-shadow:         0 0 $shadow-blur $color-glow-rgba; }

@mixin glowshadow-box ($shadow-blur: 6px, $color-glow:$color-shadow, $color-glow-rgba:$color-shadow-rgba) {
   -moz-box-shadow:    0 0 $shadow-blur $color-glow;
   -webkit-box-shadow: 0 0 $shadow-blur $color-glow;
   box-shadow:         0 0 $shadow-blur $color-glow;
   -moz-box-shadow:    0 0 $shadow-blur $color-glow-rgba;
   -webkit-box-shadow: 0 0 $shadow-blur $color-glow-rgba;
   box-shadow:         0 0 $shadow-blur $color-glow-rgba; }


// MIXINS FOR TRANSITIONS...

$transition-dur: .2s; // 0 for no transition duration

$transition-ease: ease-out; 
// transition-timing-function - choices: 
//     ease, linear, ease-in, ease-out, 
//     ease-in-out, step-start. step-end

@mixin transition-color {
  -webkit-transition: color $transition-dur $transition-ease,
                 background $transition-dur $transition-ease;
     -moz-transition: color $transition-dur $transition-ease,
                 background $transition-dur $transition-ease;
       -o-transition: color $transition-dur $transition-ease,
                 background $transition-dur $transition-ease;
      -ms-transition: color $transition-dur $transition-ease,
                 background $transition-dur $transition-ease;
          transition: color $transition-dur $transition-ease,
                 background $transition-dur $transition-ease;
}

@mixin transition-color-shadow {
  -webkit-transition: color $transition-dur $transition-ease,
                 background $transition-dur $transition-ease,
                text-shadow $transition-dur $transition-ease;
     -moz-transition: color $transition-dur $transition-ease,
                 background $transition-dur $transition-ease,
                text-shadow $transition-dur $transition-ease;
       -o-transition: color $transition-dur $transition-ease,
                 background $transition-dur $transition-ease,
                text-shadow $transition-dur $transition-ease;
      -ms-transition: color $transition-dur $transition-ease,
                 background $transition-dur $transition-ease,
                text-shadow $transition-dur $transition-ease;
          transition: color $transition-dur $transition-ease,
                 background $transition-dur $transition-ease,
                text-shadow $transition-dur $transition-ease;
}

@mixin transition-all {
  -webkit-transition: all $transition-dur $transition-ease;
     -moz-transition: all $transition-dur $transition-ease;
       -o-transition: all $transition-dur $transition-ease;
      -ms-transition: all $transition-dur $transition-ease;
          transition: all $transition-dur $transition-ease;
}