/*
 *  Gradients Bg Color
 * -----------------------------------------------
*/

.gradient (@startColor: #eee, @endColor: white) {
  background-color: @startColor;
  background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
  background: -webkit-linear-gradient(top, @startColor, @endColor);
  background: -moz-linear-gradient(top, @startColor, @endColor);
  background: -ms-linear-gradient(top, @startColor, @endColor);
  background: -o-linear-gradient(top, @startColor, @endColor);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
  background-color: @startColor;
  background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
  background-image: -webkit-linear-gradient(left, @startColor, @endColor);
  background-image: -moz-linear-gradient(left, @startColor, @endColor);
  background-image: -ms-linear-gradient(left, @startColor, @endColor);
  background-image: -o-linear-gradient(left, @startColor, @endColor);
}


.bg-theme-colored-gradient22 {
  .gradient(@theme-color, @theme-color2);
}


// Helper
._linear-gradient-prefixes(@deg, @start, @end){
  background-image: -webkit-linear-gradient(@deg, @start, @end);
  background-image:    -moz-linear-gradient(@deg, @start, @end);
  background-image:      -o-linear-gradient(@deg, @start, @end);
  background-image:     -ms-linear-gradient(@deg, @start, @end);
}
// Core
.linear-gradient(@_, @start, @end){
  background-color: mix(@start, @end, 50%);
}
.linear-gradient(@_, @start, @end) when (isnumber(@_)){
  @deg: @_ + 0deg;
  @legacy-deg: @deg - 90deg;
  ._linear-gradient-prefixes(@legacy-deg, @start, @end);
  background-image: linear-gradient(@deg, @start, @end);
}
.linear-gradient(to-bottom, @start, @end){
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=%d, endColorstr=%d)", @start, @end));
  -ms-filter: e(%("'progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=%d, endColorstr=%d)'", @start, @end));
  background-image: -webkit-gradient(linear, left top, left bottom, from(@start),to(@end));
  ._linear-gradient-prefixes(top, @start, @end);
  background-image: linear-gradient(to bottom, @start, @end);
}
.linear-gradient(to-top, @start, @end){
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=%d, endColorstr=%d)", @end, @start));
  -ms-filter: e(%("'progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=%d, endColorstr=%d)'", @end, @start));
  background-image: -webkit-gradient(linear, left bottom, left top, from(@start),to(@end));
  ._linear-gradient-prefixes(bottom, @start, @end);
  background-image: linear-gradient(to top, @start, @end);
}
.linear-gradient(to-right, @start, @end){
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=%d, endColorstr=%d)", @start, @end));
  -ms-filter: e(%("'progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=%d, endColorstr=%d)'", @start, @end));
  background-image: -webkit-gradient(linear, left top, right top, from(@start),to(@end));
  ._linear-gradient-prefixes(left, @start, @end);
  background-image: linear-gradient(to right, @start, @end);
}
.linear-gradient(to-left, @start, @end){
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=%d, endColorstr=%d)", @end, @start));
  -ms-filter: e(%("'progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=%d, endColorstr=%d)'", @end, @start));
  background-image: -webkit-gradient(linear, right top, left top, from(@start),to(@end));
  ._linear-gradient-prefixes(right, @start, @end);
  background-image: linear-gradient(to left, @start, @end);
}


/* Gradient BG Colors */
.bg-theme-colored-gradient {
  .linear-gradient(to-left, @theme-color, @white);

  &.to-top    { .linear-gradient(to-top, @theme-color, @white) }
  &.to-bottom { .linear-gradient(to-bottom, @theme-color, @white) }
  &.to-right  { .linear-gradient(to-right, @theme-color, @white) }
  &.to-left   { .linear-gradient(to-left, @theme-color, @white) }
  &.deg       { .linear-gradient(45, @theme-color, @white) }
}

.bg-theme-colored2-gradient {
  .linear-gradient(to-left, @theme-color2, @white);

  &.to-top    { .linear-gradient(to-top, @theme-color2, @white) }
  &.to-bottom { .linear-gradient(to-bottom, @theme-color2, @white) }
  &.to-right  { .linear-gradient(to-right, @theme-color2, @white) }
  &.to-left   { .linear-gradient(to-left, @theme-color2, @white) }
  &.deg       { .linear-gradient(45, @theme-color2, @white) }
}

.bg-theme-colored12-gradient {
  .linear-gradient(to-left, @theme-color, @theme-color2);

  &.to-top    { .linear-gradient(to-top, @theme-color, @theme-color2) }
  &.to-bottom { .linear-gradient(to-bottom, @theme-color, @theme-color2) }
  &.to-right  { .linear-gradient(to-right, @theme-color, @theme-color2) }
  &.to-left   { .linear-gradient(to-left, @theme-color, @theme-color2) }
  &.deg       { .linear-gradient(45, @theme-color, @theme-color2) }
}

.bg-theme-colored21-gradient {
  .linear-gradient(to-left, @theme-color2, @theme-color);

  &.to-top    { .linear-gradient(to-top, @theme-color2, @theme-color) }
  &.to-bottom { .linear-gradient(to-bottom, @theme-color2, @theme-color) }
  &.to-right  { .linear-gradient(to-right, @theme-color2, @theme-color) }
  &.to-left   { .linear-gradient(to-left, @theme-color2, @theme-color) }
  &.deg       { .linear-gradient(45, @theme-color2, @theme-color) }
}

/* Gradient Transparent BG Colors */
.bg-theme-colored-gradient {
  .linear-gradient(to-left, fade(@theme-color,90%), fade(@white,90%));

  &.to-top    { .linear-gradient(to-top, fade(@theme-color,90%), fade(@white,90%)) }
  &.to-bottom { .linear-gradient(to-bottom, fade(@theme-color,90%), fade(@white,90%)) }
  &.to-right  { .linear-gradient(to-right, fade(@theme-color,90%), fade(@white,90%)) }
  &.to-left   { .linear-gradient(to-left, fade(@theme-color,90%), fade(@white,90%)) }
  &.deg       { .linear-gradient(45, fade(@theme-color,90%), fade(@white,90%)) }
}
.bg-theme-colored2-gradient {
  .linear-gradient(to-left, fade(@theme-color2,90%), fade(@white,90%));

  &.to-top    { .linear-gradient(to-top, fade(@theme-color2,90%), fade(@white,90%)) }
  &.to-bottom { .linear-gradient(to-bottom, fade(@theme-color2,90%), fade(@white,90%)) }
  &.to-right  { .linear-gradient(to-right, fade(@theme-color2,90%), fade(@white,90%)) }
  &.to-left   { .linear-gradient(to-left, fade(@theme-color2,90%), fade(@white,90%)) }
  &.deg       { .linear-gradient(45, fade(@theme-color2,90%), fade(@white,90%)) }
}
.bg-theme-colored12-gradient {
  .linear-gradient(to-left, fade(@theme-color,90%), fade(@theme-color2,90%));

  &.to-top    { .linear-gradient(to-top, fade(@theme-color,90%), fade(@theme-color2,90%)) }
  &.to-bottom { .linear-gradient(to-bottom, fade(@theme-color,90%), fade(@theme-color2,90%)) }
  &.to-right  { .linear-gradient(to-right, fade(@theme-color,90%), fade(@theme-color2,90%)) }
  &.to-left   { .linear-gradient(to-left, fade(@theme-color,90%), fade(@theme-color2,90%)) }
  &.deg       { .linear-gradient(45, fade(@theme-color,90%), fade(@theme-color2,90%)) }
}
.bg-theme-colored21-gradient {
  .linear-gradient(to-left, fade(@theme-color2,90%), fade(@theme-color,90%));

  &.to-top    { .linear-gradient(to-top, fade(@theme-color2,90%), fade(@theme-color,90%)) }
  &.to-bottom { .linear-gradient(to-bottom, fade(@theme-color2,90%), fade(@theme-color,90%)) }
  &.to-right  { .linear-gradient(to-right, fade(@theme-color2,90%), fade(@theme-color,90%)) }
  &.to-left   { .linear-gradient(to-left, fade(@theme-color2,90%), fade(@theme-color,90%)) }
  &.deg       { .linear-gradient(45, fade(@theme-color2,90%), fade(@theme-color,90%)) }
}