/*
* Make variations background-color over the element
* Modify the variables.less variable @colors
*/
.variant-colors-bg(@index) when (@index > 0) {
  @currentColorName: extract(@colors, @index);
  &--@{currentColorName} {
    background-color: @@currentColorName;
  }
  .variant-colors-bg(@index - 1);
}

/*
* Make variations background-color class
* Modify the _variables.less variable @colors
*/
.variant-background-color(@index) when (@index > 0) {
  @currentColorName: extract(@colors, @index);
  .background-color--@{currentColorName} {
    background-color: @@currentColorName;
  }
  .variant-background-color(@index - 1);
}

/*
* Make variations border-color class
* Modify the _variables.less variable @colors
*/
.variant-border-color(@index) when (@index > 0) {
  @currentColorName: extract(@colors, @index);
  .border-color--@{currentColorName} {
    border-color: @@currentColorName;
  }
  .variant-border-color(@index - 1);
}

/*
* Make variations background-color Button Primary
* Modify the _variables.less variable @colors-state
* TODO WARNING CHANGE ARRAY IN @colors-state in params
*/
.variant-colors-button-primary(@index) when (@index > 0) {
  @currentColorName: extract(@colors-state, @index);
  &--@{currentColorName} {
    background-color: @@currentColorName;
    transition: 1s all;

    &:hover {
      background-color: darken(@@currentColorName, 10%);

      .button__badge {
        color: darken(@@currentColorName, 10%);
      }
    }

    .button__badge {
      color: @@currentColorName;
    }
  }
  .variant-colors-button-primary(@index - 1);
}

/*
* Make variations background-color Button Primary
* Modify the _variables.less variable @colors
*/
.variant-colors-button-secondary(@index) when (@index > 0) {
  @currentColorName: extract(@colors-state, @index);
  &--@{currentColorName} {
    color: @@currentColorName;
    border: solid .1rem @@currentColorName;
    transition: 1s all;

    &:hover {
      background-color: @@currentColorName;
      color: @stormtrooper;
    }

    .button__badge {
      color: @@currentColorName;
    }
  }
  .variant-colors-button-secondary(@index - 1);
}

/*
* Make variations color atoms
* Modify the _variables.less variable @colors
*/
.variant-colors-font(@index) when (@index > 0) {
  @currentColorName: extract(@colors, @index);
  &--@{currentColorName} {
    color: @@currentColorName;
  }
  .variant-colors-font(@index - 1);
}

/*
* Make variations color atoms
* Modify the _variables.less variable @colors
*/
.make-colors(@index) when (@index > 0) {
  @currentColorName: extract(@colors, @index);
  .color {
    &--@{currentColorName} {
      color: @@currentColorName;
    }
  }
  .make-colors(@index - 1);
}

.placeholder(@font, @size, @color) {
  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-family: @font;
    font-size: @size;
    color: @color;
  }
  :-ms-input-placeholder { /* IE 10+ */
    font-family: @font;
    font-size: @size;
    color: @color;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    font-family: @font;
    font-size: @size;
    color: @color;
  }
  :-moz-placeholder { /* Firefox 18- */
    font-family: @font;
    font-size: @size;
    color: @color;
  }
}

/*
* Create font styles
*/
.font(@font, @size, @color, @lineHeight) {
  font-family: @font;
  font-size: @size;
  color: @color;
  line-height: @lineHeight;
  font-weight: initial;
}

.font-regular() {
  font-family: @regular_regular;
  font-size: 1.4rem;
  line-height: 1.8rem;
  color: @vader;
}

.font-regular-bold() {
  font-family: @regular_bold;
  font-size: 1.4rem;
  line-height: 1.8rem;
  color: @vader;
}

.fill-element() {
  position: relative;
  overflow: hidden;

  &:before {
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    content: "";
    transition: all 0.5s;
    transform: translateY(100%);

    background-color: @smart;

    will-change: transform;
  }

  &:hover {
    i {
      color: @stormtrooper;
      z-index: 3;
    }

    &:before {
      transform: translateY(0);
    }
  }
}

.property_(@property, @value) {
  _: ~"; @{property}:" @value;
}

/*
* Create css property for all browsers: chrome, ie, firefox, opera and standard
*/
.vendor(@property, @value) {
  .property_('-webkit-@{property}', @value);
  .property_('-ms-@{property}', @value);
  .property_('-moz-@{property}', @value);
  .property_('-o-@{property}', @value);
  .property_(@property, @value);
}