[data-animation="fade-in"],
[data-animation="fade-out"],
[data-animation="fade"] {
  transition: opacity var(--fade_transition);
  will-change: opacity;

  &[data-activated="true"] {
    transition: none !important;
    opacity: 1 !important;
  }
}
[data-animation="slide-in-up"],
[data-animation="slide-in-down"],
[data-animation="slide-in-down_half"] {
  opacity: 0;
  visibility: visible;
  will-change: transform, opacity;
  transition: transform var(--slide_transition), opacity var(--fade_transition);

  &[data-activated="true"] {
    transition: none !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

[data-animation="fade-in"],
[data-animation="fade"] {
  opacity: 0.01;

  &[data-active="true"] {
    opacity: 1;
  }
}
[data-animation="fade-out"] {
  opacity: 1;

  &[data-active="true"] {
    opacity: 0.01;
  }
}

[data-animation="slide-in-up"] {
  transform: translateY(17px);

  &[data-active="true"] {
    opacity: 1;
    transform: translateY(0);
  }
}
[data-animation="slide-in-down"] {
  transform: translateY(-17px);

  &[data-active="true"] {
    opacity: 1;
    transform: translateY(0);
  }
}
[data-animation="slide-in-down_half"] {
  transform: translateY(-50%);

  &[data-active="true"] {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 150%;
  }
}