/*
 *VERTICAL ALIGN KNOWN CHILD
 * */
 @mixin vertical-centering-known-child($child-height,$selector) {
  //position: relative;
  #{$selector} {
    height: $child-height;
    position: absolute;
    top: 50%;
    margin-top: -$child-height / 2;
  }
}


/*
  *VERTICAL ALIGN KNOWN PARENT
  * */
@mixin vertical-centering-known-parent($parent-height,$selector) {
  line-height: $parent-height;
  height: $parent-height;
  #{$selector} {
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
  }
}

/*
  *VERTICAL ALIGN GHOST ELEMENT TECHNIQUE
  * */
@mixin vertical-centering-ghost-element($selector) {
  text-align: center;
  /* May want to do this if there is risk the container may be narrower than the element inside */
  //white-space: nowrap;
  height: 100%;

  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25rem; /* Adjusts for spacing */
    width: 0.25rem;
  }

  #{$selector} {
    display: inline-block;
    vertical-align: middle;
  }
}

//VERTICAL ALIGN transform technique
@mixin vertical-centering-transform($position: relative) {
  position: $position !important;
  top: 50% !important;
  -webkit-transform: translateY(-50%) !important;
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -o-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
}

@mixin horizontal-centering-container($selector) {
  text-align: center !important;
  width: 100% !important;

  #{$selector} {
    display: inline-block;
  }
}

/*
dato un container  con padding-top e padding-bottom crea
  container-top e container-bottom nella posizione corretta
*/
@mixin vertical-fluid-layout($top, $bottom, $selector:null) {

  position: relative;
  width: 100%;

  @if ($top > 0) {

    $cname: #{&}-top;
    @if ($selector) {
      $cname: #{$selector}-top;
    }
    padding-top: $top;
    #{$cname} {
      position: absolute;
      top: 0;
      left: 0;
      height: $top;
      line-height: $top;
      text-align: center;
      width: 100%;

    }
  }

  @if ($bottom > 0) {
    $cname: #{&}-bottom;
    @if ($selector) {
      $cname: #{$selector}-bottom;
    }
    padding-bottom: $bottom;
    #{$cname} {
      position: absolute;
      bottom: 0;
      left: 0;
      height: $bottom;
      line-height: $bottom;
      text-align: center;
      width: 100%
    }
  }

}

@mixin horizontal-fluid-layout($left, $right, $height : 100%, $position : relative) {

  position: $position;
  height: $height;
  width: 100%;

  @if ($left > 0) {
    padding-left: $left;
    & > .left {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: $left;
      text-align: center;
    }
  }

  @if ($right > 0) {
    padding-right: $right;
    & > .right {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: $right;
      text-align: center;
    }
  }
}

@mixin transition($transition...) {
  -webkit-transition: $transition !important;
  -moz-transition: $transition !important;
  -ms-transition: $transition !important;
  -o-transition: $transition !important;
  transition: $transition !important;
}

@mixin transition-transform($duration...) {
  -webkit-transition: -webkit-transform $duration !important;
  -moz-transition: -moz-transform $duration !important;
  -ms-transition: -ms-transform $duration !important;
  -o-transition: -o-transform $duration !important;
  transition: transform $duration !important;
}

@mixin transition-property($property...) {
  -webkit-transition-property: $property !important;
  -moz-transition-property: $property !important;
  -ms-transition-property: $property !important;
  -o-transition-property: $property !important;
  transition-property: $property !important;
}

@mixin transition-duration($duration...) {
  -webkit-transition-property: $duration !important;
  -moz-transition-property: $duration !important;
  -ms-transition-property: $duration !important;
  -o-transition-property: $duration !important;
  transition-property: $duration !important;
}

@mixin transition-timing-function($timing...) {
  -webkit-transition-timing-function: $timing !important;
  -moz-transition-timing-function: $timing !important;
  -ms-transition-timing-function: $timing !important;
  -o-transition-timing-function: $timing !important;
  transition-timing-function: $timing !important;
}

@mixin transition-delay($delay...) {
  -webkit-transition-delay: $delay !important;
  -moz-transition-delay: $delay !important;
  -ms-transition-delay: $delay !important;
  -o-transition-delay: $delay !important;
  transition-delay: $delay !important;
}

@mixin transform($transformation...) {
  -webkit-transform: $transformation !important;
  -moz-transform: $transformation !important;
  -ms-transform: $transformation !important;
  -o-transform: $transformation !important;
  transform: $transformation !important;
}

@mixin keyframe($animation-name) {
  @-webkit-keyframes #{$animation-name} {
      @content;
  }

  @-moz-keyframes #{$animation-name} {
      @content;
  }

  @keyframes #{$animation-name} {
      @content;
  }
}

@mixin animation($animation...) {
  -webkit-animation: $animation !important;
  -moz-animation: $animation !important;
  -ms-animation: $animation !important;
  -o-animation: $animation !important;
  animation: $animation !important;
}
@mixin animation-delay($delay...) {
  -webkit-animation-delay: $delay !important;
  -moz-animation-delay: $delay !important;
  -ms-animation-delay: $delay !important;
  -o-animation-delay: $delay !important;
  animation-delay: $delay !important;
}

@mixin box-shadow($box-shadow-intensity, $color) {
  -webkit-box-shadow: $box-shadow-intensity $color !important;
  -moz-box-shadow: $box-shadow-intensity $color !important;
  -ms-box-shadow: $box-shadow-intensity $color !important;
  -o-box-shadow: $box-shadow-intensity $color !important;
  box-shadow: $box-shadow-intensity $color !important;
}

@mixin box-shadow-inline($box-shadow-style...) {
  -webkit-box-shadow: $box-shadow-style !important;
  -moz-box-shadow: $box-shadow-style !important;
  -ms-box-shadow: $box-shadow-style !important;
  -o-box-shadow: $box-shadow-style !important;
  box-shadow: $box-shadow-style !important;
}

//gradient background
@mixin gradient($startColor, $endColor, $from) {
  background-color: $startColor !important; /* For browsers that do not support gradients */
  background-image: linear-gradient(to $from,  $startColor, $endColor) !important; /* Standard syntax (must be last) */
}

@function gradient($startColor, $endColor, $from) {
  @return linear-gradient(to $from,  $startColor, $endColor);
}

@mixin gradient-more-colors($from, $colors...) {
  background-image: linear-gradient(to $from,  $colors) !important; /* Standard syntax (must be last) */
}

@mixin gradient-inline($gradient) {
  background-image: ($gradient) !important;
}

@mixin text-ellipssis() {
  white-space: nowrap !important; 
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@mixin mask-image($path) {
  -webkit-mask-image: url($path);
  -moz-mask-image: url($path);
  -ms-mask-image: url($path);
  -o-mask-image: url($path);
  mask-image: url($path);
}

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

@mixin border-text($color)
{
  text-shadow: 2px 0 0 $color, -2px 0 0  $color, 0 2px 0 $color, 0 -2px 0 $color, 1px 1px $color, -1px -1px 0 $color, 1px -1px 0 $color, -1px 1px 0 $color;
}