/* -- 1. Variables/Mixins -- */
/* used when generating css stylesheet */

// colors

	@theme-color:					#aab2bd;
	@theme-secondary-color: 		#20638f;

	@text-primary:					#222;
	
	@brand-primary:					#3bafda;
	@brand-success:					#8cc152;
	@brand-info:					#37bc9b;
	@brand-warning:					#f6bb42;
	@brand-danger:					#da4453;
	@brand-inverse:					#434a54;
	
	@subactive-color:				lighten(@theme-color, 15%);

    @link-color:                    #3b73af;

	@main-bg:						#fff;
	@sub-bg:						#f5f5f5;

    @white:                         #fff;

    @header-bg:                     @theme-secondary-color;

    @tooltip-bg:                    rgba(0,0,0,0.9);
    @tooltip-arrow-color:           @tooltip-bg;

// dimensions
    @fixed_width:                   1080px;
    @header-height:                 48px;
    @side_menu_expanded_width:      240px;
    @side_menu_collapsed_width:     42px;

    @screen-lg-min:                 ~"only screen and (min-width: 1200px)";
    @screen-md-min:                 ~"only screen and (min-width: 992px)";
    @screen-sm-min:                 ~"only screen and (min-width: 768px)";

    @screen-md-max:                 ~"only screen and (max-width: 1199px)";
    @screen-sm-max:                 ~"only screen and (max-width: 991px)";
    @screen-xs-max:                 ~"only screen and (max-width: 767px)";


// buttons
	@btn-default-color:             #333;
	@btn-default-bg:                #fff;
	@btn-default-border:            #ccc;
	
	@btn-primary-color:             #fff;
	@btn-primary-bg:                @brand-primary;
	@btn-primary-border:            @brand-primary;
	
	@btn-success-color:             #fff;
	@btn-success-bg:                @brand-success;
	@btn-success-border:            @brand-success;
	
	@btn-info-color:                #fff;
	@btn-info-bg:                   @brand-info;
	@btn-info-border:               @brand-info;
	
	@btn-warning-color:             #fff;
	@btn-warning-bg:                @brand-warning;
	@btn-warning-border:            @brand-warning;
	
	@btn-danger-color:              #fff;
	@btn-danger-bg:                 @brand-danger;
	@btn-danger-border:              @brand-danger;
	
	@btn-inverse-color:              #fff;
	@btn-inverse-bg:                 @brand-inverse;
	@btn-inverse-border:             @brand-inverse;

    .button-variant(@color; @background; @border) {
        color: @color;
        background-color: @background;
        border-color: @border;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active,
        .open > .dropdown-toggle& {
            color: @color;
            background-color: lighten(@background, 8%);
            border-color: lighten(@border, 8%);
        }
        &:active,
        &.active,
        .open > .dropdown-toggle& {
            background-image: none;
        }
        &.disabled,
        &[disabled],
        fieldset[disabled] & {
            &,
            &:hover,
            &:focus,
            &.focus,
            &:active,
            &.active {
                background-color: @background;
                border-color: @border;
            }
        }
        .badge {
            color: @background;
            background-color: @color;
        }
        &.btn-outline {
            color: @background;
            background: @white;
            border-width: 2px;
            &:hover,
            &:focus,
            &.focus,
            &:active,
            &.active {
                border-color: darken(@border, 12%);
            }
        }
    }

    .reset_ul() {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .text_overflow() {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    // Micro ClearFix
    .cf() {
        zoom: 1;
        &:before, &:after {
            content: "";
            display: table;
        }
        &:after {
            clear: both;
        }
    }

// easings

    @easeInCubic:           cubic-bezier(0.55, 0.055, 0.675, 0.19);
    @easeInOutQuart:        cubic-bezier(0.77, 0, 0.175, 1);

// tables
	.table-row-variant(@state; @background) {
		.table > thead > tr,
		.table > tbody > tr,
		.table > tfoot > tr {
			> td.@{state},
			> th.@{state},
			&.@{state} > td,
			&.@{state} > th {
				background-color: @background;
				color: @white;
			}
		}
	  
		.table-hover > tbody > tr {
			> td.@{state}:hover,
			> th.@{state}:hover,
			&.@{state}:hover > td,
			&.@{state}:hover > th {
				background-color: darken(@background, 5%);
			}
		}
	}

// custom fonts
	.custom_font(@weight: 400, @size: 22px, @height: 32px) {
		font: @weight @size e('/') @height "Open Sans", Arial, sans-serif;
	}
	
// some mixins from 3L ( http://mateuszkocz.github.io/3l/ )
	
	.border-radius (@radius:5px, ...) {
		-webkit-border-radius: @arguments;
		-moz-border-radius: @arguments;
		border-radius: @arguments;
	}
	.round-corner (top-left, @radius...){
		-webkit-border-top-left-radius: @radius;
		-moz-border-top-left-radius: @radius;
		border-top-left-radius: @radius;
	}
	.round-corner (top-right, @radius...){
		-webkit-border-top-right-radius: @radius;
		-moz-border-top-right-radius: @radius;
		border-top-right-radius: @radius;
	}
	.round-corner (bottom-right, @radius...) {
		-webkit-border-bottom-right-radius: @radius;
		-moz-border-bottom-right-radius: @radius;
		border-bottom-right-radius: @radius;
	}
	.round-corner (bottom-left, @radius...) {
		-webkit-border-bottom-left-radius: @radius;
		-moz-border-bottom-left-radius: @radius;
		border-bottom-left-radius: @radius;
	}
	.box-shadow(@shadow1, @shadow2:X, ...){
		@shadows: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
		-webkit-box-shadow: @shadows;
		-moz-box-shadow: @shadows;
		box-shadow: @shadows;
	}
	.opacity(@value) when (isnumber(@value)) and (@value =< 1){
		opacity: @value;
		filter: ~"alpha(opacity="@value*100~")";
	}
	.opacity(@value) when (isnumber(@value)) and (@value > 1) and not (ispercentage(@value)){
		opacity: @value/100;
		filter: ~"alpha(opacity="@value~")";
	}
	.transition(@transition1, @transition2:X, ...){
		@transitions: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
		-webkit-transition: @transitions;
		transition: @transitions;
	}
	.transition-transform (@transformArguments1, @transformArguments2:X, ...) {
		@transformArguments: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
		-webkit-transition: -webkit-transform @transformArguments;
		transition: transform @transformArguments;
	}
	.transition-property(@property1, @property2:X, ...) {
		@properties: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
		-webkit-transition-property: @properties;
		transition-property: @@properties;
	}
	.transition-duration(@property1, @property2:X, ...) {
		@properties: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
		-webkit-transition-duration: @properties;
		transition-duration: @properties;
	}
	.transition-timing-function(@property1, @property2:X, ...) {
		@properties: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
		-webkit-transition-timing-function: @properties;
		transition-timing-function: @properties;
	}
	.transition-delay(@property1, @property2:X, ...) {
		@properties: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
		-webkit-transition-delay: @properties;
		transition-delay: @properties;
	}
	.transform-origin(@arguments) {
		-webkit-transform-origin: @arguments;
		-moz-transform-origin: @arguments;
		-ms-transform-origin: @arguments;
		-o-transform-origin: @arguments;
		transform-origin: @arguments;
	}
    .transform (@arguments) {
        -webkit-transform: @arguments;
        -moz-transform: @arguments;
        -ms-transform: @arguments;
        -o-transform: @arguments;
        transform: @arguments;
    }
	.rotate(@arguments) {
		-webkit-transform: rotate(@arguments);
		-moz-transform: rotate(@arguments);
		-ms-transform: rotate(@arguments);
		-o-transform: rotate(@arguments);
		transform: rotate(@arguments);
    }
	.scale(@arguments) {
		-webkit-transform: scale(@arguments);
		-moz-transform: scale(@arguments);
		-ms-transform: scale(@arguments);
		-o-transform: scale(@arguments);
		transform: scale(@arguments);
	}
	.scale(@argument1,@argument2) {
		-webkit-transform: scale(@argument1,@argument2);
		-moz-transform: scale(@argument1,@argument2);
		-ms-transform: scale(@argument1,@argument2);
		-o-transform: scale(@argument1,@argument2);
		transform: scale(@argument1,@argument2);
	}
	.scaleX(@arguments) {
		-webkit-transform: scaleX(@arguments);
		-moz-transform: scaleX(@arguments);
		-ms-transform: scaleX(@arguments);
		-o-transform: scaleX(@arguments);
		transform: scaleX(@arguments);
	}
	.scaleY(@arguments) {
		-webkit-transform: scaleY(@arguments);
		-moz-transform: scaleY(@arguments);
		-ms-transform: scaleY(@arguments);
		-o-transform: scaleY(@arguments);
		transform: scaleY(@arguments);
	}
    .gradient(@color1, @color2, @color3){
        background-color: @color3;
        background-image: -moz-linear-gradient(top, @color1 0%, @color2 100%);
        background-image: -webkit-linear-gradient(top, @color1 0%,@color2 100%);
        background-image: linear-gradient(to bottom, @color1 0%,@color2 100%);
    }
    .box-sizing (@type: border-box) {
        -webkit-box-sizing: @type;
        -moz-box-sizing:    @type;
        box-sizing:         @type;
    }

    // Retina images
    // Retina background-image support with non-retina fall back
    .retina-image(@file-1x, @file-2x, @width-1x, @height-1x) {
        background-image: url("@{file-1x}");
        background-repeat: no-repeat;
        @media only screen and (-webkit-min-device-pixel-ratio: 2),
                only screen and ( min--moz-device-pixel-ratio: 2),
                only screen and ( -o-min-device-pixel-ratio: 2/1),
                only screen and ( min-device-pixel-ratio: 2),
                only screen and ( min-resolution: 192dppx),
                only screen and ( min-resolution: 2dppx) {
            background-image: url("@{file-2x}");
            background-size: @width-1x @height-1x;
        }
    }
