/**
* Utility mixins
*/


// interface
@mixin interface($case: none) {
  user-select: $case;
}

@mixin font-smoothing() {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Creates an arrow at the bottom
@mixin arrow-bottom($color: black, $left: 50%, $size:$defaultTooltipArrowSize) {

  &:after {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  &:after {
    border-color: transparent;
    border-top-color: $color;
    border-width: $size;
    left: $left;
    margin-left: $size*-1;
  }
}

@mixin arrow-bottom-color($color) {
  &:after {
    border-top-color: $color;
  }
}

// helper to fix flickering/blurry in different browsers
@mixin perspectiveHelper($perspective: 1000px) {
  perspective: $perspective;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

@mixin perspective($perspective: 1000px) {
  perspective: $perspective;
}

// a central loader
@mixin centralLoader() {
  left: calc(50% - #{$loaderSize - 10px});
  top: calc(50% - #{$loaderSize - 10px});
  background: #fff;
  padding: 10px;
  border-radius: $globalRadius;
  box-shadow: $globalBoxShadow;
}

// creates an arrow at top
@mixin arrow-top($color: #fff, $left: 50%, $size:$defaultTooltipArrowSize) {

  &:after, &:before {
    bottom: 100%;
    left: $left;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  &:after {
    border-color: transparent;
    border-bottom-color: $color;
    border-width: $size;
    margin-left: $size*-1;
  }
}

@mixin arrow-top-color($color) {
  &:after {
    border-bottom-color: $color;
  }
}

// creates a link in a specific color
@mixin link-color($color: $grayColor, $fontWeight:normal, $hoverColor:lighten($color, 10%),
  $activeColor:darken($color, 10%)) {
  color: $color;
  font-weight: $fontWeight;
  cursor: pointer;
  &:hover {
    color: $hoverColor;
  }

  &:active {
    color: $activeColor;
  }
}

// keyframes helper for different vendors
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

// animations
@mixin animate($name, $duration: .5s, $iterationCount: 1, $direction: normal) {
  animation-name: $name;
  animation-duration: $duration;
  animation-fill-mode: both;
  animation-iteration-count: $iterationCount;
  animation-direction: $direction;
}

// Creates an overflow container
@mixin overflowContainer($color, $height: 100%, $width: 60px) {

  position: relative;
  transform: translateZ(0px);

  &:after {
    content: ' ';
    background: linear-gradient(to right, rgba($color, 0) 0%, $color 100%);;
    width: $width;
    height: $height;
    position: absolute;
    right: 0;
    top: 0;
    pointer-events: none;
  }
}

// creates a loading animation
// Shamelessly stolen from bootstrap
@mixin loadingContainer($color: #fff) {
  animation: progress-bar-stripes 2s linear infinite;
  cursor: wait;
  background-image: linear-gradient(45deg, rgba($color, .15) 25%, transparent 25%,
          transparent 50%, rgba($color, .15) 50%, rgba($color, .15) 75%,
          transparent 75%, transparent);
  background-size: 40px 40px;
}

// small helper for ellipsis
@mixin ellipsis($max-width: 300px) {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: $max-width;
}

/**
* Creates an icon, by default uses fontello
* Nested spans are no icons anymore
*/
@mixin icon($font: $iconFontName) {
  font-family: $font;
  font-weight: normal !important;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  &:before {
    text-decoration: inherit;
    display: inline-block;
    speak: none;
  }
  span {
    font-family: $baseFontFamily;
  }
}

/**
* A Mixin that creates a bottom border for a specific element and animates it on hover
* On active state this border is always active
* Don't forget to set position:relative to element
*/
@mixin borderWobble($color: $primaryColor, $height: $tabBottomLineHeight, $padding: $overallPadding) {

  &:hover, &.active {
    &:after {
      left: 0;
      width: calc(100% - (#{$padding*2}));
      opacity: 1;
    }
  }

  &:after {
    will-change: width, left, opacity;
    content: ' ';
    position: absolute;
    width: 0;
    background: $color;
    opacity: 0;
    height: $height;
    bottom: 0;
    left: calc(50% - (#{$padding}));
    margin: 0 $padding;
    transition: width .2s ease, left .2s ease, opacity .2s ease;
  }
}

/**
* Mixin to clear floats
*/
@mixin clearfix() {
  *zoom: 1;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

/**
* Mixin to support a specific retina display
*/
@mixin retinaDisplay($ratio: 1.3) {
  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
  only screen and (min--moz-device-pixel-ratio: $ratio),
  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
  only screen and (min-device-pixel-ratio: $ratio),
  only screen and (min-resolution: #{$ratio}dppx) {
    @content;
  }
}

/**
* Mixin to support retina displays on a specific size
*/
@mixin retinaDisplayScreenSize($ratio:1.3, $size:$breakpointDesktop) {
  @media only screen and (-webkit-min-device-pixel-ratio: $ratio) and (min-width: #{$breakpointDesktop}),
  only screen and (min--moz-device-pixel-ratio: $ratio) and (min-width: #{$breakpointDesktop}),
  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1) and (min-width: #{$breakpointDesktop}),
  only screen and (min-device-pixel-ratio: $ratio) and (min-width: #{$breakpointDesktop}),
  only screen and (min-resolution: #{$ratio}dppx) and (min-width: #{$breakpointDesktop}) {
    @content;
  }
}

/**
* Mixin that generates a simple grid
*/
@mixin generate-grid($columns: $columns) {
  $gridSize: length($columns);
  @for $i from 1 to $gridSize {
    $class: nth($columns, $i);
    &.#{$class} {
      width: #{$i/$gridSize * 100%};
    }
  }
  @media #{$mediaSmall} {
    @for $i from 1 to $gridSize {
      $class: nth($columns, $i);
      &.small-#{$class} {
        width: #{$i/$gridSize * 100%};
      }
    }
  }
}

/**
 * Mixin that creates a colored section that may include links
 */
@mixin create-color-section($color, $decoration: underline, $fontWeight: normal, $hoverColor:  darken($color, 20) ) {
  color: $color !important;
  a {
    color: $color !important;
    text-decoration: $decoration;
    font-weight: $fontWeight;
    &:hover {
      color: $hoverColor !important;
    }
  }
}

/* Form Mixins */

/**
* Inputs
*/
@mixin inputs() {
  .input, select, textarea,
  input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]) {
    @content;
  }
}

/**
* Base Input Style
*/
@mixin input-style() {
  background-color: $inputBackground;
  border: $inputBorder;
  box-shadow: $inputBoxShadow;
  border-radius: $inputBorderRadius;
}

/**
* Input style when focused
*/
@mixin focus-input-style() {
  background-color: $inputFocusColor;
  border-color: $inputFocusBorderColor !important;
  box-shadow: $inputFocusBoxShadow !important;
  outline: none;
}

/**
* Mixin to create a button style
*/
@mixin button-style($color, $background) {
  background-color: $background;
  border-color: transparent;
  color: $color;

  $disabledColor: rgba($background, .4);
  $disabledOutlineColor: rgba($background, .2);
  &.outline {
    background-color: transparent;
    border-color: $background;
    color: $background;

    &:hover {
      background-color: $background;
      color: $color;
    }

    &.disabled, &[disabled] {
      background-color: transparent;
      color: $disabledOutlineColor;
      border-color: $disabledOutlineColor;
    }
  }

  &:hover {
    color: $color;
    background-color: rgba($background, .7);
    &.loading {
      background-color: $background;
    }
  }

  &:active, &:focus, &.outline:active, &.outline:focus {
    &:not(.disabled):not([disabled]) {
      transition: none;
      color: $color;
      background-color: darken($background, 10%);
      border-color: transparent;
    }
  }

  &.disabled, [disabled] {
    background-color: $disabledColor;
    color:$color;
    cursor: not-allowed;
  }
}

/**
* Mixin to create a multine ellipsis
*/
@mixin multi-line-ellipsis($fontSize:14px, $lineHeight:1.4, $maxLines:3) {
  height: $fontSize*$lineHeight*$maxLines;
  display:block;
  /* autoprefixer: off */
  display: -webkit-box;
  line-height: $lineHeight;
  -webkit-line-clamp: $maxLines;
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: $fontSize;
}

@mixin multi-line-ellipsis-fade($lineHeight:1.5, $maxLines:6, $fontSize:15px, $fadeBackground:white) {

  $maxHeight: $fontSize*$lineHeight*$maxLines;
  $spacer:5px;

  &:before {
    content:"";
    float: left;
    width: $spacer;
    height: $maxHeight;
  }

  line-height: $lineHeight;
  overflow: hidden;
  height: $maxHeight;

  > *:first-child {
    float: right;
    width: 100%;
    margin:0;
    margin-left: $spacer*-1;
  }

  &:after {
    content: "\00a0\00a0\00a0";
    box-sizing: content-box;
    float: right;
    position: relative;
    top: ($lineHeight*$fontSize) * -1;
    left: 100%;
    width: 50%;
    margin-left: -50%;
    padding-right: $spacer;
    text-align: right;
    background-size: 100% 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0),
            $fadeBackground 100%, $fadeBackground);
  }
}

/**
* Tooltips
*/
@mixin spaceTop() {
  &.open {
    transform: translate3d(0, 6px, 0);
  }
}

@mixin spaceBottom() {
  &.open {
    transform: translate3d(0, -3px, 0);
  }
}

@mixin tooltip-arrow-state($arrowColor) {
  &.is-collision-bottom:not(.is-collision-left) {
    @include spaceBottom();
    @include arrow-bottom($arrowColor);
  }

  &:not(.is-collision-bottom):not(.is-collision-left) {
    @include spaceTop();
    @include arrow-top($arrowColor);
  }

  // left collisions
  &.is-collision-left.is-collision-bottom {
    @include spaceBottom();
    @include arrow-bottom($arrowColor, 15px);
  }

  &.is-collision-left:not(.is-collision-bottom) {
    @include spaceTop();
    @include arrow-top($arrowColor, 15px);
  }

  // right collisions
  &.is-collision-right:not(.is-collision-bottom) {
    @include spaceTop();
    @include arrow-top($arrowColor, calc(100% - 15px));
  }

  &.is-collision-right.is-collision-bottom {
    @include spaceBottom();
    @include arrow-bottom($arrowColor, calc(100% - 15px));
  }
}