/**
 * Styles for managing the popover animations.
 *
 * Ideally, we'd be generating these styles with Aphrodite (along with
 * ReactCSSTransitionGroup's support for custom classnames), but the generated
 * styles have issues on mobile Safari.
 *   See: https://github.com/Khan/aphrodite/issues/68.
 *
 * If the animation durations change, the corresponding values in
 * echo-manager.js must change as well.
 */

// Variant A: Slide and fade.

.echo-slide-and-fade-enter {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;

    &.echo-slide-and-fade-enter-active {
        opacity: 0 !important;
        transform: translate3d(0, -33%, 0) !important;

        /**
         * TODO(charlie): These times are intentionally different, which means
         * that the animation really "ends" after 400ms
         * cubic-bezier(1, 0, 0.9, 1) (since the opacity goes to 0), even though
         * the transform doesn't complete. There's probably a way to achieve the
         * same effect by manipulating the transform's Bezier curve and total
         * displacement.
         */
        transition: transform 800ms cubic-bezier(0, 1, 0.25, 1),
                    opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
    }
}

// Variant B: Fade, but don't slide.

.echo-fade-only-enter {
    opacity: 1 !important;

    &.echo-fade-only-enter-active {
        opacity: 0 !important;
        transition: opacity 300ms cubic-bezier(0.25, 0, 0.75, 1) !important;
    }
}

// Variant C: Fade for a longer duration, but again, don't slide.

.echo-long-fade-only-enter {
    opacity: 1 !important;

    &.echo-long-fade-only-enter-active {
        opacity: 0 !important;
        transition: opacity 400ms cubic-bezier(0.75, 0, 0.75, 1) !important;
    }
}