﻿.background-clip(@argument: padding-box) {
  -moz-background-clip: @argument;
  -webkit-background-clip: @argument;
  background-clip: @argument;
}

.box-shadow(@arguments) {
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  box-shadow: @arguments;
}

.box-sizing(@sizing: border-box) {
  -ms-box-sizing: @sizing;
  -moz-box-sizing: @sizing;
  -webkit-box-sizing: @sizing;
  box-sizing: @sizing;
}

.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
  background: @color;
  background: -webkit-gradient(linear,
                               left bottom,
                               left top,
                               color-stop(0, rgb(@start,@start,@start)),
                               color-stop(1, rgb(@stop,@stop,@stop)));
  background: -ms-linear-gradient(bottom,
                                  rgb(@start,@start,@start) 0%,
                                  rgb(@stop,@stop,@stop) 100%);
  background: -moz-linear-gradient(center bottom,
                                   rgb(@start,@start,@start) 0%,
                                   rgb(@stop,@stop,@stop) 100%);
  background: -o-linear-gradient(rgb(@stop,@stop,@stop),
                                 rgb(@start,@start,@start));
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start)));
}

.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
  -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
}

.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
  background: @color;
  background: -webkit-gradient(linear,
                               left bottom,
                               left top,
                               color-stop(0, @start),
                               color-stop(1, @stop));
  background: -ms-linear-gradient(bottom,
                                  @start,
                                  @stop);
  background: -moz-linear-gradient(center bottom,
                                   @start 0%,
                                   @stop 100%);
  background: -o-linear-gradient(@stop,
                                 @start);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
}

.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
  -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
}

.opacity(@opacity: 0.5) {
  -moz-opacity: @opacity;
  -khtml-opacity: @opacity;
  -webkit-opacity: @opacity;
  opacity: @opacity;
  @opperc: @opacity * 100;
  -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
  filter: ~"alpha(opacity=@{opperc})";
}

.rounded(@radius: 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.user-select(@argument: none) {
  -webkit-user-select: @argument;
  -moz-user-select: @argument;
  -ms-user-select: @argument;
  user-select: @argument;
}

.dialog-back (@hueshift: 0) {
  .ui-dialog-content { background-color: desaturate(darken(spin(#efe7e4, @hueshift), 50%), 15%); border-bottom: 1px solid spin(#654, @hueshift); }
}

.grid-odd (@hueshift: 0) {
    .slick-row.odd { background-color: spin(#efe7e4, @hueshift); }
}

.entity-item (@image: document) {
    padding: 2px 0px 2px 20px; background: url("images/@{image}.png") no-repeat 0px center;
}

.form-styles (@l, @e) {
    .caption {
        width: @l;
    }

    .editor {
        width: @e;
    }

    input.editor[type=checkbox] {
        width: auto;
    }

    .s-Form .editor.dateQ {
        width: @e - 24;
    }

    .s-Form .editor.emailuser {
        width: 170px;
    }

    .s-Form .editor.dateQ.s-DateTimeEditor {
        width: @e - 119;
    }

    .s-Form .editor.s-DateTimeEditor.time {
        width: 64px;
        margin-left: 4px;
    }

    .s-Form .editor.has-inplace-button {
        width: @e - 26;
    }

    .s-Form .emaildomain {
        width: @e - 185;
    }
}

.dialog-styles (@h, @l, @e) {
    .tab-pane { height: @h; }
    .form-styles(@l, @e);
}

.tabless-dialog-styles (@h, @l, @e) {
    .form-styles(@l, @e);
    .caption { width: @l; }
    .editor { width: @e; }
}

.widthAndMin(@w) {
    min-width: @w;
    width: @w;
}

.heightAndMin(@h) {
    min-height: @h;
    height: @h;
}

.flexDialogStyles(@width, @height, @caption: 12em) {
    > .size { 
        .widthAndMin(@width);
        .heightAndMin(@height);
    }

    .caption { 
        width: @caption; 
    }

    .s-PropertyGrid > .categories {
        height: @height - 140px;
    }
}

.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}



// FlexLess
// ========
//
// Less mixins for using flexbox without crying.
//
// Last update: 13.04.2014
//
// Includes the  workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=946167
// old flexbox syntax style (<2009) used instead of new (>2009)

// Enabling Flexbox
// -----------------
//
// Property Name: display
// Values: flex | inline-flex
.display(@value: flex) when (@value = flex) {
  display: -moz-box; // Mozilla Old
  display: -webkit-box; // Webkit Old
}

.display(@value: flex) when (@value = inline-flex) {
  display: -moz-inline-box; // Mozilla Old
  display: -webkit-inline-box; // Webkit Old
}

.display(@value: flex) {
  display: ~"-webkit-@{value}"; // Webkit Standard
  display: ~"-ms-@{value}box"; // IE 10 Mid
  display: ~"-ms-@{value}"; // IE 11 Standard
  display: @value; // Standard
}

// Axis Alignment
// --------------
//
// Property Name: justify-content
// Values: flex-start | flex-end | center | space-between | space-around
.justify-content(@value: flex-start) when (@value = flex-start) {
  -webkit-box-pack: start; // Webkit Old
  -moz-box-pack: start; // Mozilla Old
  -ms-flex-pack: start; // IE 10 Mid
}

.justify-content(@value: flex-start) when (@value = center) {
  -webkit-box-pack: center; // Webkit Old
  -moz-box-pack: center; // Mozilla Old
  -ms-flex-pack: center; // IE 10 Mid

}

.justify-content(@value: flex-start) when (@value = flex-end) {
  -webkit-box-pack: end; // Webkit Old
  -moz-box-pack: end; // Mozilla Old
  -ms-flex-pack: end; // IE 10 Mid
}

.justify-content(@value: flex-start) when (@value = space-between) {
  -webkit-box-pack: justify; // Webkit Old
  -moz-box-pack: justify; // Mozilla Old
  -ms-flex-pack: justify; // IE 10 Mid
}

.justify-content(@value: flex-start) when (@value = space-around) {
  -ms-flex-pack: distribute; // IE 10 Mid
}

.justify-content(@value: flex-start) {
  -webkit-justify-content: @value; // Webkit Standard
  -moz-justify-content: @value; // Mozilla Standard
  -ms-justify-content: @value; // IE 11 Standard
  justify-content: @value; // Standard
}

// Cross Axis Alignment
// --------------------
//
// Property Name: align-items
// Values: flex-start | flex-end | center | baseline | stretch
.align-items(@value: stretch) when (@value = flex-start) {
  -webkit-box-align: start; // Webkit Old
  -moz-box-align: start; // Mozilla Old
  -ms-flex-align: start; // IE 10 Mid
}

.align-items(@value: stretch) when (@value = center), (@value = baseline), (@value = stretch) {
  -webkit-box-align: @value; // Webkit Old
  -moz-box-align: @value; // Mozilla Old
  -ms-flex-align: @value; // IE 10 Mid

}

.align-items(@value: stretch) when (@value = flex-end) {
  -webkit-box-align: end; // Webkit Old
  -moz-box-align: end; // Mozilla Old
  -ms-flex-align: end; // IE 10 Mid
}

.align-items(@value: stretch) {
  -webkit-align-items: @value; // Webkit Standard
  -moz-align-items: @value; // Mozilla Standard
  -ms-align-items: @value; // IE 11 Standard
  align-items: @value; // Standard
}

// Individual Cross-Axis Alignment
// -------------------------------
//
// Property Name: align-self
// Values: auto | flex-start | flex-end | center | baseline | stretch
.align-self(@value: auto) when (@value = flex-start) {
  -ms-flex-item-align: start; // IE 10 Mid
}

.align-self(@value: auto) when (@value = auto), (@value = center), (@value = baseline), (@value = stretch) {
  -ms-flex-item--align: @value; // IE 10 Mid
}

.align-self(@value: auto) when (@value = flex-end) {
  -ms-flex-item-align: end; // IE 10 Mid
}

.align-self(@value: auto) {
  -webkit-align-self: @value; // Webkit Standard
  -moz-align-self: @value; // Mozilla Standard
  -ms-align-self: @value; // IE 11 Standard
  align-self: @value; // Standard
}

// Flex Line Alignment
// -------------------
//
// Property Name: align-content
// Values: flex-start | flex-end | center | space-between | space-around | stretch
.align-content(@value: auto) when (@value = flex-start) {
  -ms-flex-line-pack: start; // IE 10 Mid
}

.align-content(@value: auto) when (@value = center), (@value = stretch) {
  -ms-flex-line-pack: @value; // IE 10 Mid
}

.align-content(@value: auto) when (@value = flex-end) {
  -ms-flex-line-pack: end; // IE 10 Mid
}

.align-content(@value: auto) when (@value = space-between) {
  -ms-flex-line-pack: justify; // IE 10 Mid
}

.align-content(@value: auto) when (@value = space-around) {
  -ms-flex-line-pack: distribute; // IE 10 Mid
}

.align-content(@value: auto) {
  -webkit-align-content: @value; // Webkit Standard
  -moz-align-content: @value; // Mozilla Standard
  -ms-align-content: @value; // IE 11 Standard
  align-content: @value; // Standard
}

// Display Order
// -------------
//
// Property Name: order
// Values: <integer>
.order(@value: 0) {
  -webkit-box-ordinal-group: @value + 1; // Webkit Old
  -moz-box-ordinal-group: @value + 1; // Mozilla Old
  -ms-flex-order: @value; // IE 10 Mid
  -webkit-order: @value; // Webkit Standard
  -moz-order: @value; // Mozilla Standard
  -ms-order: @value; // IE 11 Standard
  order: @value; // Standard
}

// Flexibillity
// ------------
//
// Property Name: flex
// Values: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
.flex (@grow: 1, @shrink: 1, @basis: .01%) {
  -webkit-box-flex: @grow; // Webkit Old
  -moz-box-flex: @grow; // Mozilla Old
  -webkit-flex: @arguments; // Webkit Standard
  -moz-flex: @arguments; // Mozilla Standard
  -ms-flex: @arguments; // IE 10 Mid, IE 11 Standard
  flex: @arguments; // Standard

  -ms-flex-positive: @grow; // Hack because for some reasons -ms-flex not working in IE10(on production with compiled styles)
  -ms-flex-negative: @shrink;
  -ms-flex-preferred-size: @basis;
}

// Longhand - Flex Grow
// --------------------
//
// Property Name: flex-grow
// Value: <number>
.flex-grow(@value: 0) {
  -webkit-flex-grow: @value; // Webkit Standard
  -moz-flex-grow: @value; // Mozilla Standard
  -ms-flex-grow: @value; // IE 10 Mid, IE 11 Standard
  flex-grow: @value; // Standard
}

// Longhand - Flex Shrink
// --------------------
//
// Property Name: flex-shrink
// Value: <number>
.flex-shrink(@value: 1) {
  -webkit-flex-shrink: @value; // Webkit Standard
  -moz-flex-shrink: @value; // Mozilla Standard
  -ms-flex-shrink: @value; // IE 10 Mid, IE 11 Standard
  flex-shrink: @value; // Standard
}

// Longhand - Flex Basis
// --------------------
//
// Property Name: flex-basis
// Value: <number>
.flex-basis(@value: auto) {
  -webkit-flex-basis: @value; // Webkit Standard
  -moz-flex-basis: @value; // Mozilla Standard
  -ms-flex-basis: @value; // IE 10 Mid, IE 11 Standard
  flex-basis: @value; // Standard
}

// Direction
// ---------
//
// Property Name: flex-direction
// Values: row | row-reverse | column | column-reverse
.flex-direction(@value: row) when (@value = row) {
  .box-orient(horizontal);
  .box-direction(normal);
  min-width: 0;
}

.flex-direction(@value: row) when (@value = row-reverse) {
  .box-orient(horizontal);
  .box-direction(reverse);
  min-width: 0;
}

.flex-direction(@value: row) when (@value = column) {
  .box-orient(vertical);
  .box-direction(normal);
  min-height: 0;
}

.flex-direction(@value: row) when (@value = column-reverse) {
  .box-orient(vertical);
  .box-direction(reverse);
  min-height: 0;
}

.flex-direction(@value: row) {
  -webkit-flex-direction: @value; // Webkit Standard
  -moz-flex-direction: @value; // Mozilla Standard
  -ms-flex-direction: @value; // IE 10 Mid, IE 11 Standard
  flex-direction: @value; // Standard
}

// Old Properties
// --------------
.box-direction(@value) {
  -webkit-box-direction: @value; // Webkit Old
  -moz-box-direction: @value; // Mozilla Old
}

.box-orient(@value) {
  -webkit-box-orient: @value; // Webkit Old
  -moz-box-orient: @value; // Mozilla Old
}

// Wrapping
// --------
//
// Property Name: flex-wrap
// Values: nowrap | wrap | wrap-reverse
.flex-wrap(@value: nowrap) when (@value = nowrap) {
  -webkit-box-lines: single; // Webkit Old
  -moz-box-lines: single; // Mozilla Old
}

.flex-wrap(@value: nowrap) when (@value = wrap) {
  -webkit-box-lines: multiple; // Webkit Old
  -moz-box-lines: mulitple; // Mozilla Old
}

.flex-wrap(@value: nowrap) {
  -webkit-flex-wrap: @value; // Webkit Standard
  -moz-flex-wrap: @value; // Mozilla Standard
  -ms-flex-wrap: @value; // IE 10 Mid, IE 11 Standard
  flex-wrap: @value; // Standard
}

// Shorthand - Flex Flow
// ---------------------
//
// Property Name: flex-flow
// Values: <‘flex-direction’> || <‘flex-wrap’>
.flex-flow(@direction: row, @wrap: nowrap) {
  -webkit-flex-flow: @arguments; // Webkit Standard
  -moz-flex-flow: @arguments; // Mozilla Standard
  -ms-flex-flow: @arguments; // IE 10 Mid, IE 11 Standard
  flex-flow: @arguments;
}

.flex-form-styles (@l) {
    .s-Form .caption { width: @l; }
}

.flex-dialog-styles (@h, @l) {
    .tab-pane { height: @h; }
    .flex-form-styles(@l);
}

.flex-tabless-dialog-styles (@h, @l, @e) {
    .form-styles(@l, @e);
    .caption { width: @l; }
    .editor { width: @e; }
}