/* DEFAULT ANIMATIONS FUNCTIONS */
@mixin animate($animation, $duration, $method, $times: "", $animation2: "") {
  & {
    animation: $animation $duration $method unquote($times) unquote($animation2);
  }
}

@mixin keyFrames($name) {
  @keyframes #{$name} {
    @content;
  }
}

/* POPUP BUTTONS ANIMATIONS */
@mixin animationCheck($animation, $duration, $method, $times: "", $animation2: "") {
  @include keyFrames(stroke) {
    100% {
      stroke-dashoffset: 0;
    }
  }

  @include keyFrames(scale) {
    0% {}

    100% {
      transform: none;
    }

    50% {
      transform: scale3d(1.1, 1.1, 1);
    }
  }

  @include keyFrames(fill) {
    100% {
      box-shadow: inset 0 0 0 30px $vi-grey;
    }
  }

  @include animate($animation, $duration, $method, $times, $animation2);
}

/* POPUP CTAs */
@mixin cta {
  background-color: $vi-bg-black;
  border: 2px solid $vi-bg-black;
  border-radius: 25px;
  box-shadow: 7px 7px 16px 0 rgba(0, 0, 0, .3), -3px -3px 14px -5px rgba(255, 255, 255, .3);
  color: $vi-orange;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  height: auto;
  margin: 20px 0 0;
  overflow: hidden;
  padding: 10px 15px;
  position: relative;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  width: auto;
}

@mixin cta_after {
  background: #fff;
  content: '';
  height: 155px;
  left: -75px;
  opacity: 0.1;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: 1;
}

@mixin cta_hover_after {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

@mixin cta_span {
  z-index: 5;
}

/* END POPUP CTAs */

/* CHECKMARK STYLE */
@mixin checkMark {
  .checkmark {
    width: 0 !important;
    height: 0 !important;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: $vi-white;
    stroke-miterlimit: 10;
    box-shadow: inset 0 0 0 $vi-grey;
    transition: height 0.2s ease-in-out, width 0.2s ease-in-out;
    visibility: hidden;

    &__circle {
      stroke: $vi-grey;
      stroke-dasharray: 166;
      stroke-dashoffset: 166;
      stroke-miterlimit: 10;
      stroke-width: 2;
      fill: none;

      @include animationCheck(stroke, .6s, $vi-popup-check-curve, "", forwards);
    }

    &__check {
      stroke-dasharray: 48;
      stroke-dashoffset: 48;
      transform-origin: 50% 50%;
      @include animationCheck(stroke, 0.3s, $vi-popup-check-curve, "0.8s", forwards);
    }
  }
}

/* END CHECKMARK STYLE */

/***********************/
/* TOGGLE SWITCHER */

@mixin slideSwitch {

  /* The slider */
  .template-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;

    &:before {
      background-color: $vi-white;
      border: 1px solid #9a99a2;
      bottom: -1px;
      content: "";
      height: 20px;
      left: 0;
      position: absolute;
      transition: all .4s ease-in-out;
      width: 20px;
    }

    &.template-switch-round {
      border-radius: 34px;

      &:before {
        border-radius: 50%;
      }
    }
  }

  /* The switch - the box around the slider */
  .template-switch {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 20px;

    & input {
      opacity: 0;
      width: 0;
      height: 0;

      &:checked+.template-slider {
        background: $vi-primary-gradient;

        &:before {
          -webkit-transform: translateX(15px);
          -ms-transform: translateX(15px);
          transform: translateX(15px);
        }
      }

      &:focus+.template-slider {
        box-shadow: 0 0 1px   ;
      }
    }
  }
}

/* END TOGGLE SWITCHER */

/* CONTENT ANIMATIONS */
@mixin animationContentCheck($animation, $duration, $times, $animation2: "") {
  @include keyFrames(dotty) {
    0% {
      content: '';
    }

    25% {
      content: '.';
    }

    50% {
      content: '..';
    }

    75% {
      content: '...';
    }

    100% {
      content: '';
    }
  }

  @include animate($animation, $duration, $times, $animation2);
}


/** LAYOUT MIXINS **/
@mixin flex($align-items: flex-start, $justify-content: flex-start, $flex-flow: row nowrap) {
  align-items: $align-items;
  display: flex;
  flex-flow: $flex-flow;
  justify-content: $justify-content;
}

@mixin gradient-title() {
  background: -$vi-primary-gradient;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@mixin border-gradient($border-radius: 10px, $offset: -2px, $border-width: 2px) {
  &:before {
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    background: -webkit-linear-gradient($vi-primary-g-1, $vi-primary-g-2) border-box;
    border: $border-width solid transparent;
    border-radius: $border-radius;
    bottom: $offset;
    content: "";
    left: $offset;
    mask-composite: exclude;
    position: absolute;
    right: $offset;
    top: $offset;
    z-index: -1;
  }
}