@mixin focus(
  $outline: $focus_outline,
  $outline-offset: null,
  $outline-width: null,
  $box-shadow: $focus_box_shadow,
  $border-radius: null,
  $border: null
) {
  @if $outline != null {
    outline: $outline;
  }

  @if $outline-width != null {
    outline-width: $outline-width;
  }

  @if $outline-offset != null {
    outline-offset: $outline-offset;
  }

  @if $box-shadow != null {
    box-shadow: $box-shadow;
  }

  @if $border-radius != null {
    border-radius: $border-radius;
  }

  @if $border != null {
    border: $border;
  }
}

@mixin gradientBorder($color, $height) {
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($color), to(transparent));
  background-image: -webkit-linear-gradient(180deg, $color, transparent), -webkit-linear-gradient(180deg, $color, transparent);
  background-image: -moz-linear-gradient(180deg, $color, transparent), -moz-linear-gradient(180deg, $color, transparent);
  background-image: -o-linear-gradient(180deg, $color, transparent), -o-linear-gradient(180deg, $color, transparent);
  background-image: linear-gradient(20deg, $color, transparent), linear-gradient(90deg, $color, transparent);
  -moz-background-size: 100% $height;
  background-size: 100% $height;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  height: $height;
}

@mixin gradientBg($color1, $color2, $height) {
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from($color1), to($color2));
	background-image: -webkit-linear-gradient(180deg, $color1, $color2), -webkit-linear-gradient(180deg, $color1, $color2);
	background-image: -moz-linear-gradient(180deg, $color1, $color2), -moz-linear-gradient(180deg, $color1, $color2);
	background-image: -o-linear-gradient(180deg, $color1, $color2), -o-linear-gradient(180deg, $color1, $color2);
	background-image: linear-gradient(20deg, $color1, $color2), linear-gradient(90deg, $color1, $color2);
	-moz-background-size: 100% $height;
	background-size: 100% $height;
	background-position: 0 100%, 0 100%;
	background-repeat: no-repeat;
}

@mixin flexDisplay() {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flexKeepSizeDisplay() {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-grow: 0;
  -webkit-flex-grow: 0;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}

@mixin flexWrap($wrapMode) {
  -webkit-flex-wrap: $wrapMode;
  -ms-flex-wrap: $wrapMode;
  flex-wrap: $wrapMode;
}

@mixin flexDirection($direction) {
  -webkit-flex-direction: $direction;
  -ms-flex-direction: $direction;
  flex-direction: $direction;
}

@mixin flexJustifyContent($justify, $msjustify) {
  -webkit-justify-content: $justify;
  -ms-flex-pack: $msjustify;
  justify-content: $justify;
}

@mixin flexAlignItems($align, $msalign) {
  -webkit-align-items: $align;
  -ms-flex-align: $msalign;
  align-items: $align;
}

@mixin flexAlignContent($align, $msalign) {
  -webkit-align-content: $align;
  -ms-flex-line-pack: $msalign;
  align-content: $align;
}

@mixin flexAlignSelf($align) {
  -webkit-align-self: $align;
  -ms-flex-item-align: $align;
  align-self: $align;
}

@mixin flexSelf($grow, $shrink, $basis) {
  -webkit-flex: $grow $shrink $basis;
  -ms-flex: $grow $shrink $basis;
  flex: $grow $shrink $basis;
}

@mixin flexOrder($order) {
  -webkit-order: $order;
  -ms-flex-order: $order;
  order: $order;
}

@mixin positionAbsolute($margin) {
	position: absolute;
	top: $margin;
	left: $margin;
	right: $margin;
	bottom: $margin;
}

@mixin boxShadow($shadow_color: null) {
  @if ($shadow_color) {
    box-shadow: 2px 3px 3px -1px $shadow_color;
    -webkit-box-shadow: 2px 3px 3px -1px $shadow_color;
    -moz-box-shadow: 2px 3px 3px -1px $shadow_color;
  }
  @else {
    box-shadow: none;
    -webkit-box-shadow: 2px 3px 3px -1px none;
    -moz-box-shadow: 2px 3px 3px -1px none;
  }
}

@mixin flexSelf($grow, $shrink, $basis) {
  -webkit-flex: $grow $shrink $basis;
  -ms-flex: $grow $shrink $basis;
  flex: $grow $shrink $basis;
}

// .fadeInUp :global {
// 	-webkit-animation-name: fadeInUp;
// 	animation-name: fadeInUp;
// 	-webkit-animation-duration: 0.6s;
// 	animation-duration: 0.6s;
// 	-webkit-animation-fill-mode: both;
// 	animation-fill-mode: both;
// }

// .fadeOutDown :global {
// 	-webkit-animation-name: fadeOutDown;
// 	animation-name: fadeOutDown;
// 	-webkit-animation-duration: 0.6s;
// 	animation-duration: 0.6s;
// 	-webkit-animation-fill-mode: both;
// 	animation-fill-mode: both;
// }

@mixin animateFadeInUpFadeOutDown($delay) {
  -webkit-animation: fadeInUp 0.6s both, fadeOutDown 0.6s $delay forwards;
	animation: fadeInUp 0.6s both, fadeOutDown 0.6s $delay forwards;
}

@mixin multilineEllipsis($lines) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
}

@mixin fullScreenButton() {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: $field_image_full_screen_bg;
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: $field_image_full_screen_shadow;
}

@mixin transition($property, $duration, $function, $delay) {
  -webkit-transition: $property $duration $function $delay;
  -moz-transition: $property $duration $function $delay;
  -o-transition: $property $duration $function $delay;
  -ms-transition: $property $duration $function $delay;
  transition: $property $duration $function $delay;
}