/**
 * @version    $Id$
 * @package    IT_Theme_Framework
 * @author     InnoThemes Team <support@innothemes.com>
 * @copyright  Copyright (C) 2012 InnoThemes.com. All Rights Reserved.
 * @license    GNU/GPL v2 or later http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Websites: http://www.innothemes.com
 * Technical Support:  Feedback - http://www.innothemes.com/contact-us/get-support.html
 */

 //= Position
.position(@position: relative) {
    position: @position;
}

//= Float
.float(@float: left) {
    float: @float;
}

//= Single side border-radius
.border-radius(@radius: 0) {
    border-radius: @radius;
}
.border-top-radius(@radius) {
    border-top-right-radius: @radius;
    border-top-left-radius:  @radius;
}
.border-right-radius(@radius) {
    border-bottom-right-radius: @radius;
    border-top-right-radius:    @radius;
}
.border-bottom-radius(@radius) {
    border-bottom-right-radius: @radius;
    border-bottom-left-radius:  @radius;
}
.border-left-radius(@radius) {
    border-bottom-left-radius: @radius;
    border-top-left-radius:    @radius;
}
.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius:    @radius;
    border-radius:         @radius;
}

//= Drop shadow
.box-shadow(@shadow: none) {
    -webkit-box-shadow: @shadow;
    box-shadow:         @shadow;
}

//= Margin & Padding
.margin(@margin) {
    margin: @margin;
}
.margin-left(@margin) {
    margin-left: @margin;
}
.margin-right(@margin) {
    margin-right: @margin;
}
.margin-top(@margin) {
    margin-top: @margin;
}
.margin-bottom(@margin) {
    margin-bottom: @margin;
}
.padding(@padding) {
    padding: @padding;
}
.padding-left(@padding) {
    padding-left: @padding;
}
.padding-right(@padding) {
    padding-right: @padding;
}
.padding-top(@padding) {
    padding-top: @padding;
}
.padding-bottom(@padding) {
    padding-bottom: @padding;
}
.base-left(@base-unit) {
    left: @base-unit;
}
.base-right(@base-unit) {
    right: @base-unit;
}
.base-top(@base-unit) {
    top: @base-unit;
}
.base-bottom(@base-unit) {
    bottom: @base-unit;
}
//= Box sizing
.box-sizing(@boxmodel: border-box) {
    -webkit-box-sizing: @boxmodel;
    -moz-box-sizing:    @boxmodel;
    box-sizing:         @boxmodel;
}

//= Transition
.transition(@transition) {
    -webkit-transition: @transition;
    -moz-transition:    @transition;
    transition:         @transition;
}

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

//= Bootstrap v3.1.0 IT Custom
.clearfix() {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}
// User select
// -----------
.user-select(@select) {
    -webkit-user-select: @select;
    -moz-user-select:    @select;
    -ms-user-select:     @select; // IE10+
    -o-user-select:      @select;
    user-select:         @select;
}

// WebKit-style focus
// ------------------
.tab-focus() {
    // Default
    outline: thin dotted;
    // WebKit
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

// Grid System
// -----------
.make-row(@gutter: @grid-gutter-width) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
    &:extend(.clearfix all);
}
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
    position: relative;
    float: left;
    width: percentage((@columns / @grid-columns));
    min-height: 1px;
    padding-left:  (@gutter / 2);
    padding-right: (@gutter / 2);
}
.make-grid-columns-float(@class) {
    .col(@index) when (@index = 1) { // initial
        @item: ~".col-@{class}-@{index}";
        .col((@index + 1), @item);
    }
    .col(@index, @list) when (@index =< @grid-columns) { // general
        @item: ~".col-@{class}-@{index}";
        .col((@index + 1), ~"@{list}, @{item}");
    }
    .col(@index, @list) when (@index > @grid-columns) { // terminal
        @{list} {
          float: left;
          position: relative;
          // Prevent columns from collapsing when empty
          min-height: 1px;
          // Inner gutter via padding
          padding-left:  (@grid-gutter-width / 2);
          padding-right: (@grid-gutter-width / 2);
        }
    }
    .col(1); // kickstart it
}
.calc-grid(@index, @class, @type) when (@type = width) and (@index > 0) {
    .col-@{class}-@{index} {
        width: percentage((@index / @grid-columns));
    }
}
.calc-grid(@index, @class, @type) when (@type = push) {
    .col-@{class}-push-@{index} {
        left: percentage((@index / @grid-columns));
    }
}
.calc-grid(@index, @class, @type) when (@type = pull) {
    .col-@{class}-pull-@{index} {
        right: percentage((@index / @grid-columns));
    }
}
.calc-grid(@index, @class, @type) when (@type = offset) {
    .col-@{class}-offset-@{index} {
        margin-left: percentage((@index / @grid-columns));
    }
}
.make-grid(@index, @class, @type) when (@index >= 0) {
    .calc-grid(@index, @class, @type);
    // next iteration
    .make-grid((@index - 1), @class, @type);
}

// Form Control
//-------------
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
    height: @input-height;
    padding: @padding-vertical @padding-horizontal;
    font-size: @font-size;
    line-height: @line-height;
    border-radius: @border-radius;
}

// Button
//-------
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
    padding: @padding-vertical @padding-horizontal;
    font-size: @font-size;
    line-height: @line-height;
    border-radius: @border-radius;
}
.button-variant(@color; @background; @border) {
    color: @color;
    background-color: @background;
    border-color: @border;

    &:hover,
    &:focus,
    &:active,
    &.active {
        color: @color;
        background-color: darken(@background, 8%);
        border-color: darken(@border, 12%);
    }
    &:active,
    &.active {
        background-image: none;
    }
    &.disabled,
    &[disabled] {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            background-color: @background;
            border-color: @border;
        }
    }
}