// ---------------------------------------------------------------------------
@mixin hinge {
  @keyframes hinge {
    0% {
      rotate: 0;
      transform-origin: top left;
      animation-timing-function: ease-in-out;
    }
    20%,
    60% {
      rotate: 80deg;
      transform-origin: top left;
      animation-timing-function: ease-in-out;
    }
    40% {
      rotate: 60deg;
      transform-origin: top left;
      animation-timing-function: ease-in-out;
    }
    80% {
      transform: rotate(60deg) translateY(0);
      opacity: 1;
      transform-origin: top left;
      animation-timing-function: ease-in-out;
    }
    100% {
      translatey: 700px;
      opacity: 0;
    }
  }
}

// ---------------------------------------------------------------------------
@mixin rollIn {
  @keyframes rollIn {
    0% {
      opacity: 0;
      transform: translateX(-100%) rotate(-120deg);
    }
    100% {
      opacity: 1;
      transform: translateX(0px) rotate(0deg);
    }
  }
}

// ---------------------------------------------------------------------------
@mixin rollOut {
  @keyframes rollOut {
    0% {
      opacity: 1;
      transform: translateX(0px) rotate(0deg);
    }
    100% {
      opacity: 0;
      transform: translateX(-100%) rotate(-120deg);
    }
  }
}