//Font Face
.font-face(@family, @name, @weight: 300, @style){
  @font-face{
    font-family: @family;
    src:url('../fonts/@{family}/@{name}.eot');
    src:url('../fonts/@{family}/@{name}.eot?#iefix') format('embedded-opentype'),
    url('../fonts/@{family}/@{name}.woff') format('woff'),
    url('../fonts/@{family}/@{name}.ttf') format('truetype'),
    url('../fonts/@{family}/@{name}.svg#icon') format('svg');
    font-weight: @weight;
    font-style: @style;
  }
}


//For Loop
.for(@i, @n) {.-each(@i)}
.for(@n)     when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n)  {
  .for((@i + (@n - @i) / abs(@n - @i)), @n);
}

.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i) when (@i > 0)    {.-each(extract(@array, @i))}


//List inline
.list-inline() {
  padding: 0;
  margin: 0;
  list-style: none;

  & > li {
    vertical-align: top;
    padding: 0;

    & > a {
      display: block;
    }
  }
}


//Bootstrap Tab Focus
.tab-focus() {
  outline: none;
  outline-offset: 0;
}


//Bootstrap Buttons
.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  &:focus,
  &.focus {
    color: @color;
    background-color: @background;
    border-color: @background;
  }
  &:hover {
    color: @color;
    background-color: @background;
    border-color: @background;
  }
  &:active,
  &.active
  .open > .dropdown-toggle& {
    color: @color;
    background-color: @background;
    border-color: @background;

    &:hover,
    &:focus,
    &.focus {
      color: @color;
      background-color: @background;
      border-color: @background;
    }
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus,
    &.focus {
      background-color: @background;
      border-color: @border;
    }
  }

  .badge {
    color: @background;
    background-color: @color;
  }
}


//CSS Animations based on animate.css
.animated(@name, @duration) {
  -webkit-animation-name: @name;
  animation-name: @name;
  -webkit-animation-duration: @duration;
  animation-duration: @duration;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


//Background Cover
.bg-cover () {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


//User Select
.user-select(@value) {
  -webkit-user-select: @value;
  -moz-user-select: @value;
  -ms-user-select: @value;
  user-select: @value;
  -webkit-tap-highlight-color: transparent;
}


//Validation & color variants
.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
  .help-block,
  .control-label,
  .radio,
  .checkbox,
  .radio-inline,
  .checkbox-inline,
  &.radio label,
  &.checkbox label,
  &.radio-inline label,
  &.checkbox-inline label  {
    color: @text-color;
  }
  .form-control {
    border-color: lighten(@border-color, 20%);
    .box-shadow(none);
    &:focus {
      border-color: lighten(@border-color, 20%);
      .box-shadow(none);
    }
  }
  .input-group-addon {
    color: @text-color;
    border-color: @border-color;
    background-color: @background-color;
  }
  .form-control-feedback {
    color: @text-color;
  }
}

.input-color-variant(@color, @helper-color, @tik-color) {
  .form-group__bar {
    &:before,
    &:after {
      background-color: @helper-color;
    }
  }

  label {
    color: @color;
  }

  .checkbox, .radio {
    input {
      &:checked + .input-helper {
        &:before {
          background-color: @helper-color;
          border-color: @helper-color;
        }
      }
    }

    .input-helper {
      &:before {
        border-color: @helper-color;
      }

      &:after {
        color: @tik-color;
      }
    }
  }
}