//Gradients
@mixin gradient-horizontal($color-start: #555, $color-end: #333) {
  //background-color: $color-end;
  background-image: -moz-linear-gradient(left, $color-start, $color-end); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($color-start), to($color-end)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(left, $color-start, $color-end); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, $color-start, $color-end); // Opera 11.10
  background-image: linear-gradient(to right, $color-start, $color-end); // Standard, IE10
  background-repeat: repeat-x;
  //filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb($color-start),argb($color-end))); // IE9 and down
}
@mixin gradient-vertical($color-start: #555, $color-end: #333) {
  // background-color: mix($color-start, $color-end, 60%);
  background-image: -moz-linear-gradient(top, $color-start, $color-end); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($color-start), to($color-end)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(top, $color-start, $color-end); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(top, $color-start, $color-end); // Opera 11.10
  background-image: linear-gradient(to bottom, $color-start, $color-end); // Standard, IE10
  background-repeat: repeat-x;
  //filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb($color-start),argb($color-end))); // IE9 and down
}
@mixin linear-gradient($settings){
  background: -webkit-linear-gradient($settings);
  background: -o-linear-gradient($settings);
  background: -moz-linear-gradient($settings);
  background: linear-gradient($settings);
}
@mixin repeating-linear-gradient($settings){
  background: -webkit-repeating-linear-gradient($settings);
  background: -o-repeating-linear-gradient($settings);
  background: -moz-repeating-linear-gradient($settings);
  background: repeating-linear-gradient($settings);
}
%gradient-vertical-foreground-background{
  @include gradient-vertical($color-foreground, $color-background);
}
%gradient-vertical-background-fade{
  @include gradient-vertical($color-background,rgba($color-background,0));
}
%gradient-vertical-fade-background{
  @include gradient-vertical(rgba($color-background,0),$color-background);
}
%gradient-horizontal-background-fade{
  @include gradient-horizontal($color-background,rgba($color-background,0));
}
%gradient-horizontal-fade-background{
  @include gradient-horizontal(rgba($color-background,0),$color-background);
}
%gradient-horizontal-foreground-fade{
  @include gradient-horizontal($color-foreground,rgba($color-foreground,0));
}
%gradient-horizontal-fade-foreground{
  @include gradient-horizontal(rgba($color-foreground,0),$color-foreground);
}
%gradient-vertical-fade-highlight{
  @include gradient-vertical(rgba($color-highlight,0),$color-highlight);
}
@mixin gradient-background($settings, $settings2: false, $settings3: false) {
  @if($settings2 == false && $settings3 == false) {
    background-image: linear-gradient($settings);
    background-image: -o-linear-gradient($settings);
    background-image: -ms-linear-gradient($settings);
    background-image: -moz-linear-gradient($settings);
    background-image: -webkit-linear-gradient($settings);
  }
  @if($settings2 != false && $settings3 == false){
    background-image: linear-gradient($settings),linear-gradient($settings2);
    background-image: -o-linear-gradient($settings),-o-linear-gradient($settings2);
    background-image: -ms-linear-gradient($settings),-ms-linear-gradient($settings2);
    background-image: -moz-linear-gradient($settings),-moz-linear-gradient($settings2);
    background-image: -webkit-linear-gradient($settings),-webkit-linear-gradient($settings2);
  }
  @if($settings2 != false && $settings3 != false){
    background-image: linear-gradient($settings),linear-gradient($settings2),linear-gradient($settings3);
    background-image: -o-linear-gradient($settings),-o-linear-gradient($settings2),-o-linear-gradient($settings3);
    background-image: -ms-linear-gradient($settings),-ms-linear-gradient($settings2),-ms-linear-gradient($settings3);
    background-image: -moz-linear-gradient($settings),-moz-linear-gradient($settings2),-moz-linear-gradient($settings3);
    background-image: -webkit-linear-gradient($settings),-webkit-linear-gradient($settings2),-webkit-linear-gradient($settings3);
  }
}
// Border Radius
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

%border-radius{
  @include border-radius($border-radius);
}
%border-radius-half-right{
  @include border-radius(0 $border-radius $border-radius 0);
}
%border-radius-none{
  @include border-radius(0);
}
%border-radius-infinite{
  @include border-radius(5000px);
}
%border-radius-large{
  @include border-radius($border-radius-large);
}
%border-radius-small{
  @include border-radius($border-radius-small);
}
%border-radius-circle-half-right{
  @include border-radius(0 100% 100% 0);
}
// Drop shadows
@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  box-shadow: $shadow;
}
%box-shadow{
  @include box-shadow(0px 0px $gap 0 rgba($black,0.125));
}
%box-shadow-minor{
  @include box-shadow(0px 0px 0.5*$gap 0 rgba($black,0.125));
}
%box-shadow-none{
  @include box-shadow(none !important);
}
%box-shadow-fake-border{
  @include box-shadow(0px 0px 0px 1px rgba($black,0.15));
}
%box-shadow-input-inset{
  @include box-shadow(inset 0px 1px 1px 0px rgba($black,0.125));
}
%box-shadow-inset-active{
  @include box-shadow(inset 0px 1px $gap 0px rgba($black,0.125));
}
%box-shadow-fake-border-inset{
  @include box-shadow(inset 0px 0px 0px 1px rgba($black,0.15));
}
%box-shadow-foreground{
  @include box-shadow(0px 0px $gap $gap $color-foreground);
}
%box-shadow-background{
  @include box-shadow(0px 0px $gap $gap $color-background);
}
%box-shadow-highlight{
  @include box-shadow(0px 0px $gap $gap $color-highlight);
}
// Appearance
@mixin appearance($appearance) {
  -webkit-appearance: $appearance;
  -moz-appearance: $appearance;
  appearance: $appearance;
}
%appearance-none{
  @include appearance(none);
}
%appearance-auto{
  @include appearance(auto);
}
// Transitions
@mixin transition($transition) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}
@mixin transition-delay($transition-delay) {
  -webkit-transition-delay: $transition-delay;
  -moz-transition-delay: $transition-delay;
  -o-transition-delay: $transition-delay;
  transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration) {
  -webkit-transition-duration: $transition-duration;
  -moz-transition-duration: $transition-duration;
  -o-transition-duration: $transition-duration;
  transition-duration: $transition-duration;
}
%transition-all-quick-easeout{
  @include transition(all 0.25s ease-out 0s); //todo: muze mrdat print
}
// Transformations
@mixin transform($transformation) {
  -webkit-transform: $transformation;
  -moz-transform: $transformation;
  -ms-transform: $transformation;
  -o-transform: $transformation;
  transform: $transformation;
}
@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
  -moz-transform: rotate($degrees);
  -ms-transform: rotate($degrees);
  -o-transform: rotate($degrees);
  transform: rotate($degrees);
}
%rotate-45cw{
  @include rotate(45deg);
}
%rotate-90cw{
  @include rotate(90deg);
}
%rotate-90ccw{
  @include rotate(-90deg);
}
%rotate-135cw{
  @include rotate(135deg);
}
%rotate-45ccw{
  @include rotate(-45deg);
}
@mixin transform($transformation) {
  -webkit-transform: $transformation;
  -moz-transform: $transformation;
  -ms-transform:$transformation;
  -o-transform: $transformation;
  transform: $transformation;
}
@mixin scale($ratio) {
  -webkit-transform: scale($ratio);
  -moz-transform: scale($ratio);
  -ms-transform: scale($ratio);
  -o-transform: scale($ratio);
  transform: scale($ratio);
}
@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
  -moz-transform: translate($x, $y);
  -ms-transform: translate($x, $y);
  -o-transform: translate($x, $y);
  transform: translate($x, $y);
}
@mixin translateX($x) {
  -webkit-transform: translateX($x);
  -moz-transform: translateX($x);
  -ms-transform: translateX($x);
  -o-transform: translateX($x);
  transform: translateX($x);
}
@mixin translateY($y) {
  -webkit-transform: translateY($y);
  -moz-transform: translateY($y);
  -ms-transform: translateY($y);
  -o-transform: translateY($y);
  transform: translateY($y);
}
@include respond-to(screen-only) {
  %translate-reset {
    @include transform(translate(0, 0) !important);
  }
}
@mixin skew($x, $y) {
  -webkit-transform: skew($x, $y);
  -moz-transform: skew($x, $y);
  -ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
  -o-transform: skew($x, $y);
  transform: skew($x, $y);
  -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
}
@mixin translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
  -moz-transform: translate3d($x, $y, $z);
  -o-transform: translate3d($x, $y, $z);
  transform: translate3d($x, $y, $z);
}

@mixin filter($filter){
  -webkit-filter: $filter;
  -moz-filter: $filter;
  -o-filter: $filter;
  -ms-filter: $filter;
  filter: $filter;
}

%blur{
  @include filter(blur(0.5*$gap));
}

// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
@mixin backface-visibility($visibility){
  -webkit-backface-visibility: $visibility;
  -moz-backface-visibility: $visibility;
  backface-visibility: $visibility;
}
// Background clipping
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
@mixin background-clip($clip) {
  -webkit-background-clip: $clip;
  -moz-background-clip: $clip;
  background-clip: $clip;
}
// Background sizing
@mixin background-size($size) {
  -webkit-background-size: $size;
  -moz-background-size: $size;
  -o-background-size: $size;
  background-size: $size;
}
// Box sizing
@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
  -moz-box-sizing: $boxmodel;
  box-sizing: $boxmodel;
}
%box-sizing-border-box{
  @include box-sizing(border-box);
}
// flexbox
%flexbox-base{
  display: -webkit-box;      //* OLD - iOS 6-, Safari 3.1-6
  display: -moz-box;         //* OLD - Firefox 19- (buggy but mostly works)
  display: -ms-flexbox;      //* TWEENER - IE 10
  display: -webkit-flex;     //* NEW - Chrome
  display: flex;             //* NEW, Spec - Opera 12.1, Firefox 20+
}

%compositor-layer {
  //transform: translateZ(0); //older browsers
  transform: translate3d(0, 0, 0)
  //will-change: transform;
  //backface-visibility: hidden;
}
%reset-compositor-layer {
  //transform: translateZ(0); //older browsers
  transform: initial;
  //will-change: transform;
  //backface-visibility: hidden;
}
// placeholders
@mixin placeholder() {
  ::-webkit-input-placeholder {
    @content;
  }
  :-moz-placeholder { /* Firefox 18- */
    @content;
  }
  ::-moz-placeholder {  /* Firefox 19+ */
    @content;
  }
  :-ms-input-placeholder {
    @content;
  }
}
// User select
// For selecting text on the page
@mixin user-select($select) {
  -webkit-user-select: $select;
  -moz-user-select: $select;
  -ms-user-select: $select;
  -o-user-select: $select;
  user-select: $select;
}
//Animations
@mixin animation($value){
  -webkit-animation: $value;
  -moz-animation: $value;
  -ms-animation: $value;
  -o-animation: $value;
  animation: $value;
  //@extend %compositor-layer;
}
//Keyframes
@mixin keyframes($name){
  @-webkit-keyframes #{$name} {
	@content;
  }
  @-moz-keyframes #{$name} {
	@content;
  }
  @-ms-keyframes #{$name} {
	@content;
  }
  @keyframes #{$name} {
	@content;
  }
}
//Flex

// The 'flex' shorthand
// - applies to: flex items
// <positive-number>, initial, auto, or none
@mixin flex($shorthand) {
  -webkit-box-flex: $shorthand;   /* OLD - iOS 6-, Safari 3.1-6 */
  width: $shorthand;              /* For old syntax, otherwise collapses. */
  -webkit-flex: $shorthand;       /* Safari 6.1+. iOS 7.1+, BB10 */
  -ms-flex: $shorthand;           /* IE 10 */
  flex: $shorthand;
}

// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
@mixin flex-direction ($direction: row){
  -webkit-flex-direction: $direction;
  -ms-flex-direction: $direction;
  flex-direction: $direction;
}

// Flex Line Wrapping
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
@mixin flex-wrap($wrap: nowrap) {
  -webkit-flex-wrap: $wrap;
  -ms-flex-wrap: $wrap;
  flex-wrap: $wrap;
}

// Flex Direction and Wrap
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
@mixin flex-flow($flow) {
  -webkit-flex-flow: $flow;
  -ms-flex-flow: $flow;
  flex-flow: $flow;
}

// Display Order
// - applies to: flex items
// <integer>
@mixin order($order: 0) {
  -webkit-box-ordinal-group: $order;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: $order;      /* OLD - Firefox 19- */
  -ms-flex-order: $order;              /* TWEENER - IE 10 */
  -webkit-order: $order;               /* NEW - Chrome */
  order: $order;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

// Flex grow factor
// - applies to: flex items
// <number>
@mixin flex-grow($grow: 0) {
  -webkit-flex-grow: $grow;
  -ms-flex-grow: $grow;
  flex-grow: $grow;
}

// Flex shrink
// - applies to: flex item shrink factor
// <number>
@mixin flex-shrink($shrink: 1) {
  -webkit-flex-shrink: $shrink;
  -ms-flex-shrink: $shrink;
  flex-shrink: $shrink;
}

// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width>
@mixin flex-basis($width: auto) {
  -webkit-flex-basis: $width;
  -ms-flex-basis: $width;
  flex-basis: $width;
}

// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around
@mixin justify-content($justify: flex-start) {
  -webkit-justify-content: $justify;
  -ms-justify-content: $justify;
  justify-content: $justify;
}

// Packing Flex Lines
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch
@mixin align-content($align: stretch) {
  -webkit-align-content: $align;
  -ms-align-content: $align;
  align-content: $align;
}

// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch
@mixin align-items ($direction: stretch){
  -ms-flex-align: $direction;
  -webkit-align-items: $direction;
  -webkit-box-align: $direction;
  align-items: $direction;
}

// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch
@mixin align-self($align: auto) {
  -webkit-align-self: $align;
  -ms-align-self: $align;
  align-self: $align;
}

%flex{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
%inline-flex{
  @include display(inline-flex);
}
%flex-direction-row{
  @include flex-direction(row);
}
%flex-direction-row-rewerse{
  @include flex-direction(row-reverse);
}
%flex-direction-column{
  @include flex-direction(column);
}
%justify-content-center{
  @include justify-content(center);
}
%justify-content-space-between{
  @include justify-content(space-between);
}
%justify-content-flex-start{
  @include justify-content(flex-start);
}
%justify-content-flex-end{
  @include justify-content(flex-end);
}
%align-items-center{
  @include align-items(center);
}
%align-items-baseline{
  @include align-items(baseline);
}
%align-items-stretch{
  @include align-items(stretch);
}
%align-items-flex-end{
  @include align-items(flex-end);
}
%align-content-center{
  @include align-content(center);
}
%flex-wrap-wrap{
  @include flex-wrap(wrap);
}
%flex-wrap-nowrap{
  @include flex-wrap(nowrap);
}
%flex-shrink-0{
  @include flex-shrink(0);
}
%flex-grow-0{
  @include flex-grow(0);
}
%flex-shrink-0{
  @include flex-shrink(0);
}
%flex-grow-1{
  @include flex-grow(1);
}
%order-1{
  @include order(1);
}
%order-2{
  @include order(2);
}
%order-3{
  @include order(3);
}
