/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------

utilities/mixins-colors.less

--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */






/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------

Lighten and Darken Colors

--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.lighten-color(@color, @lightness) {

  color: lighten(@color, @lightness * (100 - lightness(@color)));

}

.darken-color(@color, @lightness) {

  color: darken(@color, @lightness * lightness(@color));

}


/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------

Gradients

--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

#gradient {

  .horizontal(@color-1: #555, @color-2: #333) {

    .horizontal(@color-1, 0%, @color-2, 100%);

  }

  .horizontal(@color-1: #555, @color-1-stop: 0%, @color-2: #333, @color-2-stop: 100%) {

    background-image: -webkit-linear-gradient(left, @color-1 @color-1-stop, @color-2 @color-2-stop);
    background-image: -o-linear-gradient(left, @color-1 @color-1-stop, @color-2 @color-2-stop);
    background-image: linear-gradient(to right, @color-1 @color-1-stop, @color-2 @color-2-stop);
    background-repeat: repeat-x;
    filter: e("progid:DXImageTransform.Microsoft.gradient(startColorstr='@{color-1}', endColorstr='@{color-2}', GradientType=1)");
  }

  .vertical(@color-1: #555, @color-2: #333) {

    .vertical(@color-1, 0%, @color-2, 100%);

  }

  .vertical(@color-1: #555, @color-1-stop: 0%, @color-2: #333, @color-2-stop: 100%) {

    background-image: -webkit-linear-gradient(top, @color-1 @color-1-stop, @color-2 @color-2-stop);
    background-image: -o-linear-gradient(top, @color-1 @color-1-stop, @color-2 @color-2-stop);
    background-image: linear-gradient(to bottom, @color-1 @color-1-stop, @color-2 @color-2-stop);
    background-repeat: repeat-x;
    filter: e("progid:DXImageTransform.Microsoft.gradient(startColorstr='@{color-1}', endColorstr='@{color-2}', GradientType=0)");

  }

  .directional(@color-1: #555, @color-2: #333, @deg: 45deg) {

    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(@deg, @color-1, @color-2);
    background-image: -o-linear-gradient(@deg, @color-1, @color-2);
    background-image: linear-gradient(@deg, @color-1, @color-2);

  }

  .horizontal-three-colors(@color-1: #00b3ee, @color-1-stop: 0%, @color-2: #7a43b6, @color-2-stop: 50%, @color-3: #c3325f, @color-3-stop: 0%) {

    background-image: -webkit-linear-gradient(left, @color-1 @color-1-stop, @color-2 @color-2-stop, @color-3 @color-3-stop);
    background-image: -o-linear-gradient(left, @color-1 @color-1-stop, @color-2 @color-2-stop, @color-3 @color-3-stop);
    background-image: linear-gradient(to right, @color-1 @color-1-stop, @color-2 @color-2-stop, @color-3 @color-3-stop);
    background-repeat: no-repeat;
    filter: e("progid:DXImageTransform.Microsoft.gradient(startColorstr='@{color-1}', endColorstr='@{color-3}', GradientType=1)");;

  }

  .vertical-three-colors(@color-1: #00b3ee, @color-1-stop: 0%, @color-2: #7a43b6, @color-2-stop: 50%, @color-3: #c3325f, @color-3-stop: 0%) {

    background-image: -webkit-linear-gradient(@color-1 @color-1-stop, @color-2 @color-2-stop, @color-3 @color-3-stop);
    background-image: -o-linear-gradient(@color-1 @color-1-stop, @color-2 @color-2-stop, @color-3 @color-3-stop);
    background-image: linear-gradient(@color-1 @color-1-stop, @color-2 @color-2-stop, @color-3 @color-3-stop);
    background-repeat: no-repeat;
    filter: e("progid:DXImageTransform.Microsoft.gradient(startColorstr='@{color-1}', endColorstr='@{color-3}', GradientType=0)");

  }

  .radial(@inner-color: #555, @outer-color: #333) {

    background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
    background-image: radial-gradient(circle, @inner-color, @outer-color);
    background-repeat: no-repeat;

  }

  .striped(@color: rgba(255, 255, 255, 0.15), @angle: 45deg) {

    background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
    background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);

  }

}






/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------

Border Gradient

--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

#border-gradient {

  .horizontal(@color-1: #555, @color-2: #333) {

    .horizontal(@color-1, 0%, @color-2, 100%);

  }

  .horizontal(@color-1: #555, @color-1-stop: 0%, @color-2: #333, @color-2-stop: 100%) {


    -webkit-border-image: -webkit-gradient(linear, 100% 0, 0 0, from(@color-1), to(@color-2)) 1 100%;
    -webkit-border-image: -webkit-linear-gradient(right, @color-1, @color-2) 1 100%;
    -moz-border-image: -moz-linear-gradient(right, @color-1, @color-2) 1 100%;
    -o-border-image: -o-linear-gradient(right, @color-1, @color-2) 1 100%;
    border-image: linear-gradient(to right, @color-1, @color-2) 1 100%;

  }

}