//
// Mixins
// Based on Twitter Bootstrap's _mixings.scss

@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

// Opacity

@mixin opacity($value, $important: '') {
  opacity: $value #{$important};
  filter: alpha(opacity=#{$value * 100}) #{$important};
}

// Border radius.

@mixin border-radius($radius, $important: '') {
  -webkit-border-radius: $radius#{$important};
  -moz-border-radius: $radius#{$important};
  -ms-border-radius: $radius#{$important};  
  -o-border-radius: $radius#{$important};      
  border-radius: $radius#{$important}; 
}

// Placeholder text
// -------------------------
@mixin placeholder($color: $input-color-placeholder) {
  &::-moz-placeholder           { color: $color; opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
  &:-ms-input-placeholder       { color: $color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome
}

// Drop shadows
// By default set to: none
@mixin box-shadow($shadow) {
  -webkit-box-shadow: none; // iOS <4.3 & Android <4.1
          box-shadow: none;
}

// Labels
// -------------------------
@mixin label-variant($color) {
  background-color: $color;
  &[href] {
    &:hover,
    &:focus {
      background-color: darken($color, 10%);
    }
  }
}

@mixin  ease-out($duration: 450ms, $property: all, $delay: 0ms) {
  transition: $property $duration cubic-bezier(0.23, 1, 0.32, 1) $delay;
}

@mixin  pulsate($animation-name, $start-size: 0.75, $end-size: 1, $duration: 1.5s) {
  @keyframes "#{$animation-name}" {
    0%, 100% {
      transform: scale($start-size);
    }
    50% {
      transform: scale($end-size);
    }
  }  
  animation: $animation-name $duration ease 0s infinite;
}

/* Cubic Bezier Transition */
@mixin cubic-transition ($delay, $duration, $property) {
    transition: {
        duration: $duration;
        property: $property;
        timing-function: cubic-bezier(0.7, 1, 0.7, 1);
    } 
}

@mixin background-opacity($color, $opacity: 0.3) {
    background: rgba($color, $opacity);
}

@mixin vertical-align($position: absolute) {
  position: #{$position};
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

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

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

@mixin burger-icon($line-color, $line-color-hover, $line-width, $line-height, $base-top: -5px, $above-top: 5px, $below-top: -5px) {
  > span {
    outline: none !important;

    &:hover {
      background: $line-color-hover;
      &:before,
      &:after {
        background: $line-color-hover;
      }
    }
  }

  > span,
  > span:before,
  > span:after {
    display: inline-block;
    width: $line-width;
    height: $line-height;
    background: $line-color;
    position: relative;
    top: $base-top;
    transition: all ease .3s;
  }

  > span:before,
  > span:after {
    position: absolute;
    left: 0;
    content: '';
  }

  > span:before {
    top: $above-top;
  }

  > span:after {
    top: $below-top;
  }

  &.th-toggle-exit {
    > span {
      background-color: transparent !important;
    }

    > span:after {
      @include transform(translateY(-$base-top) rotateZ(45deg));
    }

    > span:before {
      @include transform(translateY($base-top) rotateZ(-45deg));
    }
  }
}

@mixin burger-icon-color-change($line-color, $line-color-hover) {
  > span,
  > span:before,
  > span:after {
    background: $line-color;
  }

  > span {
    &:hover {
      background: $line-color-hover;
      &:before,
      &:after {
        background: $line-color-hover;
      }
    }
  }

  &.th-toggle-exit {
    > span {
      background-color: transparent !important;
    }
  }
}

@mixin close-icon($icon-size, $line-size, $color, $color-hover) {
  position: relative;
  display: inline-block;
  width: $icon-size;
  height: $icon-size;
  overflow: hidden;
  outline: none !important;

  &:hover {
    cursor: pointer;

    &::before,
    &::after {
      background: $color-hover;
    }
  }

  &::before,
  &::after {
    content: '';
    position: absolute;
    height: $line-size;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: $line-size / 2;
    background: $color;
  }

  &::before {
    @include transform(rotate(45deg));
  }

  &::after {
    @include transform(rotate(-45deg));
  }
}

@mixin close-icon-color-change($color, $color-hover) {
  &:hover {
    &::before,
    &::after {
      background: $color-hover;
    }
  }

  &::before,
  &::after {
    background: $color;
  }
}