.slide-right {
  &-leave-active {
    overflow: hidden;
    transition-duration: 0.1s;
  }

  &-enter-active {
    overflow: hidden;
    transition-duration: 0.2s;
  }

  &-enter-from [data-transition] {
    opacity: 0;
    transform: translateX(-2rem);
  }

  &-enter-active [data-transition] {
    transition: all 0.1s ease-in 0.1s;
  }

  &-leave-active [data-transition] {
    transition: all 0.1s ease-out;
  }

  &-leave-to [data-transition] {
    opacity: 0;
    transform: translateX(2rem);
  }
}

.slide-left {
  &-leave-active {
    overflow: hidden;
    transition-duration: 0.1s;
  }

  &-enter-active {
    overflow: hidden;
    transition-duration: 0.2s;
  }

  &-enter-from [data-transition] {
    opacity: 0;
    transform: translateX(2rem);
  }

  &-enter-active [data-transition] {
    transition: all 0.1s ease-in 0.1s;
  }

  &-leave-active [data-transition] {
    transition: all 0.1s ease-out;
  }

  &-leave-to [data-transition] {
    opacity: 0;
    transform: translateX(-2rem);
  }
}

.modal {
  &-transition-enter-active {
    transition: all 0.2s ease-in;
  }

  &-transition-enter-from,
  &-transition-leave-to {
    opacity: 0;
    transform: scale(1.1);
  }

  &-transition-leave-active {
    transition: all 0.1s ease-out;
  }
}

@keyframes scale-dot {
  50% {
    transform: scale(1.4);
  }
}

@keyframes pulse-3 {
  50%,
  100% {
    opacity: 0.2;
  }
}

@keyframes pulse-4 {
  33%,
  100% {
    opacity: 0.2;
  }
}

@keyframes shake-x {
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-0.625rem);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(0.625rem);
  }
}

@keyframes rotation180 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(180deg);
  }
}

@keyframes mecto-icon {
  from {
    opacity: 1;
    transform: scale(0.5);
  }

  to {
    opacity: 0;
    transform: translateY(-$spacing-xl * 3) scale(2);
  }
}

@keyframes status-success-path {
  to {
    stroke-dashoffset: 0;
    stroke-width: 1.5;
  }
}
@keyframes status-failed-path {
  to {
    stroke-dashoffset: 200;
    stroke-width: 1.5;
  }
}

@keyframes status-icon {
  80% { transform: scale(0.9); }
  90% { transform: scale(1.1); }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}
