// ---------------------------------------------------------------------------
@mixin rotateIn {
  @keyframes rotateIn {
    0% {
      transform-origin: center center;
      rotate: -200deg;
      opacity: 0;
    }
    100% {
      transform-origin: center center;
      rotate: 0;
      opacity: 1;
    }
  }
}

// ---------------------------------------------------------------------------
@mixin rotateInDownLeft {
  @keyframes rotateInDownLeft {
    0% {
      transform-origin: left bottom;
      rotate: -90deg;
      opacity: 0;
    }
    100% {
      transform-origin: left bottom;
      rotate: 0;
      opacity: 1;
    }
  }
}

// ---------------------------------------------------------------------------
@mixin rotateInUpLeft {
  @keyframes rotateInUpLeft {
    0% {
      transform-origin: left bottom;
      rotate: 90deg;
      opacity: 0;
    }
    100% {
      transform-origin: left bottom;
      rotate: 0;
      opacity: 1;
    }
  }
}

// ---------------------------------------------------------------------------
@mixin rotateInUpRight {
  @keyframes rotateInUpRight {
    0% {
      transform-origin: right bottom;
      rotate: -90deg;
      opacity: 0;
    }
    100% {
      transform-origin: right bottom;
      rotate: 0;
      opacity: 1;
    }
  }
}

// ---------------------------------------------------------------------------
@mixin rotateInDownRight {
  @keyframes rotateInDownRight {
    0% {
      transform-origin: right bottom;
      rotate: 90deg;
      opacity: 0;
    }
    100% {
      transform-origin: right bottom;
      rotate: 0;
      opacity: 1;
    }
  }
  // ---------------------------------------------------------------------------
  @keyframes rotateOut {
    0% {
      transform-origin: center center;
      rotate: 0;
      opacity: 1;
    }
    100% {
      transform-origin: center center;
      rotate: 200deg;
      opacity: 0;
    }
  }
}

// ---------------------------------------------------------------------------
@mixin rotateOutDownLeft {
  @keyframes rotateOutDownLeft {
    0% {
      transform-origin: left bottom;
      rotate: 0;
      opacity: 1;
    }
    100% {
      transform-origin: left bottom;
      rotate: 90deg;
      opacity: 0;
    }
  }
}

// ---------------------------------------------------------------------------
@mixin rotateOutUpLeft {
  @keyframes rotateOutUpLeft {
    0% {
      transform-origin: left bottom;
      rotate: 0;
      opacity: 1;
    }
    100% {
      transform-origin: left bottom;
      rotate: -90deg;
      opacity: 0;
    }
  }
}

// ---------------------------------------------------------------------------
@mixin rotateOutDownRight {
  @keyframes rotateOutDownRight {
    0% {
      transform-origin: right bottom;
      rotate: 0;
      opacity: 1;
    }
    100% {
      transform-origin: right bottom;
      rotate: -90deg;
      opacity: 0;
    }
  }
}

// ---------------------------------------------------------------------------
@mixin rotateOutUpRight {
  @keyframes rotateOutUpRight {
    0% {
      transform-origin: right bottom;
      rotate: 0;
      opacity: 1;
    }
    100% {
      transform-origin: right bottom;
      rotate: 90deg;
      opacity: 0;
    }
  }
}