@charset "utf-8";

.anm-rotate {
  animation: rotate 1s infinite linear;
}

@keyframes rotate {
  20% {
    transform: rotate(72deg);
  }
  40% {
    transform: rotate(144deg);
  }
  60% {
    transform: rotate(216deg);
  }
  80% {
    transform: rotate(288deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.fade-in {
  /* animation-direction: reverse; */
  animation: fade-in 0.2s 1 linear;
  opacity: 0.5;
  /* padding: 0; */
  transform: translate(0, 0.4rem);
}

@keyframes fade-in {
  0% {
    opacity: 0.5;
    transform: translate(0, 0.4rem);
    /* padding: 0.4rem 0; */
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
    /* transform: translate(0, 0.4rem); */
    /* padding: 0; */
  }
}

.notification-resize {
  animation: resize 2s 1 linear;
  /* transform: translate(100%, 0%); */
}

@keyframes resize {
  0% {
    /* transform: translate(0, 0); */
    opacity: 0;
    transform: scale(1, 0);
  }
  5% {
    /* transform: translate(0, 8rem); */
    opacity: 0.8;
    transform: scale(1, 1);
  }
  95% {
    /* transform: translate(0, 8rem); */
    opacity: 0.8;
    transform: scale(1, 1);
  }
  100% {
    /* transform: translate(0, 0rem); */
    opacity: 0;
    transform: scale(1, 0);
  }
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
  }
}

.notification-cool-down {
  animation: cooldown 0.3s 1 linear;
}

@keyframes cooldown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.opacity-trans {
  transition: opacity 0.15s linear;
}