/* Colors */
.sdc-bc-white           { background-color: @white; }
.sdc-bc-blue            { background-color: @blue; }
.sdc-bc-light-blue      { background-color: @light-blue; }
.sdc-bc-lighter-blue    { background-color: @lighter-blue; }
.sdc-bc-disabled-blue   { background-color: @disabled-blue; }
.sdc-bc-dark-blue       { background-color: @dark-blue; }
.sdc-bc-darker-blue     { background-color: @darker-blue; }
.sdc-bc-black           { background-color: @black; }
.sdc-bc-text-black      { background-color: @text-black; }
.sdc-bc-dark-gray       { background-color: @dark-gray; }
.sdc-bc-gray            { background-color: @gray; }
.sdc-bc-light-gray      { background-color: @light-gray; }
.sdc-bc-silver          { background-color: @silver; }
.sdc-bc-light-silver    { background-color: @light-silver; }
.sdc-bc-green           { background-color: @green; }
.sdc-bc-light-green     { background-color: @light-green; }
.sdc-bc-disabled-green  { background-color: @disabled-green; }
.sdc-bc-red             { background-color: @red; }
.sdc-bc-disabled-red    { background-color: @disabled-red; }
.sdc-bc-light-red       { background-color: @light-red; }
.sdc-bc-yellow          { background-color: @yellow; }
.sdc-bc-light-yellow    { background-color: @light-yellow; }
.sdc-bc-disabled-yellow { background-color: @disabled-yellow; }
.sdc-bc-dark-purple     { background-color: @dark-purple; }
.sdc-bc-purple          { background-color: @purple; }
.sdc-bc-light-purple    { background-color: @light-purple; }
.sdc-bc-lighter-silver  { background-color: @lighter-silver; }

/* Prefix */
@box-sizing-prefix: webkit moz spec;
@border-radius-prefix: webkit spec;
@box-shadow-radius-prefix: webkit moz spec;
@text-shadow-radius-prefix: spec;
@text-shadow-prefix: spec;
@box-shadow-prefix: all;
@linear-gradient-prefix: all;
@transition-prefix: webkit moz o spec;
@flex-prefix: webkit spec;
@browserPrefixes: webkit moz o ms;

.prefix(@property, @value, @prefixeslist: 'all') {
  & when (@prefixeslist = all) {
    -webkit-@{property}: @value;
    -moz-@{property}: @value;
    -ms-@{property}: @value;
    -o-@{property}: @value;
    @{property}: @value;
  }
& when not (@prefixeslist = all) {
    @each @prefix in @prefixeslist {
      & when (@prefix = webkit) {
        -webkit-@{property}: @value;
      }
& when not (@prefix = webkit) if @prefix == moz {
        -moz-@{property}: @value;
      } @else if @prefix == ms {
        -ms-@{property}: @value;
      } @else if @prefix == o {
        -o-@{property}: @value;
      } @else if @prefix == spec {
        @{property}: @value;
      } @else {
        @warn "No such prefix: @{prefix}";
      }
    }
  }
}

/* Value Prefix*/
.value-suffix-with-range(@property, @valuesuffix, @from, @to, @prefixeslist) {

  & when (@prefixeslist = all) {
    property : -webkit-@{valuesuffix}(@from, @to);
    property : -moz-@{valuesuffix}(@from, @to);
    property : -o-@{valuesuffix}(@from, @to);
    property : -ms-@{valuesuffix}(@from, @to);

  }
& when not (@prefixeslist = all) {
    @each @prefix in @prefixeslist {
      & when (@prefix = webkit) {
        property : -webkit-@{valuesuffix}(@from, @to);
      }
& when not (@prefix = webkit) if @prefix == moz {
        property : -moz-@{valuesuffix}(@from, @to);
      } @else if @prefix == ms {
        property : -ms-@{valuesuffix}(@from, @to);
      } @else if @prefix == o {
        property : -o-@{valuesuffix}(@from, @to);
      } @else {
        @warn "No such prefix: @{prefix}";
      }
    }
  }
}

/* Box sizing */
.box-sizing(@value: border-box) {
  .prefix(box-sizing, @value, @box-sizing-prefix);
}

/* Borders & Shadows */
.box-shadow(@value) {
  .prefix(box-shadow, @value, @box-shadow-radius-prefix);
}

.text-shadow(@value) {
  .prefix(text-shadow, @value, @text-shadow-radius-prefix);
}

.border-radius(@value, @positions: all) {
  & when ((@positions = all)) {
    .prefix(border-radius, @value, @border-radius-prefix);
  }
& when not ((@positions = all)) {
    @each @position in @positions {
      .prefix(border-@{position}-radius, @value, @border-radius-prefix);
    }
  }

}

.transition(@value) {
  .prefix(transition, @value, @transition-prefix);
}

/* Opacity */
.opacity(@alpha) {
  @ie-opacity: round(@alpha * 100);
  opacity: @alpha;
  filter: ~"alpha(opacity = @{ie-opacity})";
}

/* Ellipsis */
.ellipsis(@width: 100%, @display: inline-block, @max-width: none) {
  overflow: hidden;
  text-overflow: ellipsis;
  width: @width;
  white-space: nowrap;
  display: @display;
  max-width: @max-width;
}

.multiline-ellipsis(@lineHeight: 1.3em, @lineCount: 2, @bgColor: @white) {
  overflow: hidden;
  position: relative;
  line-height: @lineHeight;
  max-height: @lineHeight * @lineCount;
  text-align: justify;
  // margin-right: -1em;
  padding-right: 1em;
  &:before {
    content: '...';
    position: absolute;
    right: 3px;
    bottom: 0;
  }
  &:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: @bgColor;
  }
}

.gradient(@from, @to) {
  /* fallback/image non-cover color */
  background-color: @from;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(@from), to(@to));
  .value-suffix-with-range(background-color, linear-gradient, @from, @to, @linear-gradient-prefix);
}

/* Vertical placement of multuple lines of text */
.vertical-text(@height) {
  position: absolute;
  top: 50%;
  margin-top: -@height/2;
}

.text-vertical-align(@align: middle) {
  display: table;
  width: 100%;

  & > * {
    vertical-align: @align;
    display: table-cell;
  }
}

.center-element(@width) {
  width: @width;
  margin-left: auto;
  margin-right: auto;
}

.center-content(@width) {
  & > * {
    .center-element(@width);
  }
}

/* transform-rotate */
// @mixin
//	   Defines a 2D rotation, the angle is specified in the parameter
// @param
//     @deg - angle in degrees
.transform-rotate(@deg) {
  transform: rotate(@deg + deg); /* IE10 and Mozilla */
  -ms-transform: rotate(@deg + deg); /* IE 9 */
  -webkit-transform: rotate(@deg + deg); /* Safari and Chrome */
}

/* transform-translate */
// @mixin
//	   Defines a 2D rotation, the angle is specified in the parameter
// @param
//     @deg - angle in degrees
.transform-translate(@x, @y) {
  transform: translate(@x, @y); /* IE10 and Mozilla */
  -ms-transform: translate(@x, @y); /* IE 9 */
  -webkit-transform: translate(@x, @y); /* Safari and Chrome */
}

/* transform-scale */
// @mixin
//	   Defines a 2D scale transformation, changing the elements width and height
// @param
//     @width - width
// @param
//     @height - height
.transform-scale(@width, @height) {
  transform: scale(@width, @height); /* IE10 and Mozilla */
  -ms-transform: scale(@width, @height); /* IE 9 */
  -webkit-transform: scale(@width, @height); /* Safari and Chrome */
}

.scrollable() {
  ::-webkit-scrollbar {
    width: 8px;
  }
}

.create-circle(@size, @bgcolor, @content) {
  border-radius: 50%;
  width: @size;
  height: @size;
  background: @bgcolor;
  border: 3px solid @bgcolor;
  &:after {
    content: @content;
    position: relative;
    left: 9px;
    top: 9px;
    .base-font-semibold;
    font-size: @body-font-1;
  }
}

/**/
.keyframe-animation(@animationType, @properties, @fromValue, @toValue) {

  @keyframes @{animationType} {
    from {
      @startIndex: 1;
      @each @property in @properties {
        @{property}: extract(@fromValue, @startIndex);
        @startIndex: @startIndex + 1;
      }
    }
    to {
      @startIndex: 1;
      @each @property in @properties {
        @{property}: extract(@toValue, @startIndex);
        @startIndex: @startIndex + 1;
      }
    }
  }
  @-moz-keyframes @{animationType}{
    /* Firefox */
    from {
      @startIndex: 1;
      @each @property in @properties {
        @{property}: extract(@fromValue, @startIndex);
        @startIndex: @startIndex + 1;
      }
    }
    to {
      @startIndex: 1;
      @each @property in @properties {
        @{property}: extract(@toValue, @startIndex);
        @startIndex: @startIndex + 1;
      }
    }
  }
  @-webkit-keyframes @{animationType} {
    /* Safari and Chrome */
    from {
      @startIndex: 1;
      @each @property in @properties {
        @{property}: extract(@fromValue, @startIndex);
        @startIndex: @startIndex + 1;
      }
    }
    to {
      @startIndex: 1;
      @each @property in @properties {
        @{property}: extract(@toValue, @startIndex);
        @startIndex: @startIndex + 1;
      }
    }
  }
  @-o-keyframes @{animationType} {
    /* Opera */
    from {
      @startIndex: 1;
      @each @property in @properties {
        @{property}: extract(@fromValue, @startIndex);
        @startIndex: @startIndex + 1;
      }
    }
    to {
      @startIndex: 1;
      @each @property in @properties {
        @{property}: extract(@toValue, @startIndex);
        @startIndex: @startIndex + 1;
      }
    }
  }
}


/**/
.border-shadow(@xShadow: 0.545px, @yShadow: 0.839px, @blur: 4px, @spread: 0, @color: @light-gray, @opacity: 0.2) {
  .box-shadow(@xShadow @yShadow @blur @spread fade(@color, (@opacity*100)));
}

%noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}