/**
 * Flashes are used to display a visual confirmation to the user that an action
 * has completed successfully (or failed).
 */

.ct-widget {

    /**
     * The flash animation displays an icon in the center of the user's screen
     * that flashes into view and then out.
     */
    $flash-timer: 2s;

    @include keyframes(flash) {
        0% {
            opacity: 0;
            font-size: 32px;
            @include transform(font-size);
        }
        25% {
            font-size: 320px;
            opacity: 1;
            @include transform(all);
        }
        50% {
            font-size: 320px;
            opacity: 1;
            @include transform(all);
        }
        75% {
            font-size: 320px;
            opacity: 1;
            @include transform(all);
        }
        100% {
            opacity: 0;
            @include transform(all);
        }
    }

    @mixin animation--flash() {
        @include animation(flash $flash-timer ease-in);
        @include animation-iteration-count(1);
        @include animation-fill-mode(forwards);
    }

    /**
     * The flash timer animation is used purely to indicated to the Javascript
     * that created the flash element that the animation has finished.
     */
    @include keyframes(flash-timer) {
        0% {
            opacity: 1;
            @include transform(opacity);
        }
        99% {
            opacity: 1;
            @include transform(opacity);
        }
        100% {
            opacity: 0;
            @include transform(opacity);
        }
    }

    @mixin animation--flash-timer() {
        @include animation(flash-timer $flash-timer ease-in);
        @include animation-iteration-count(1);
        @include animation-fill-mode(forwards);
    }

    /**
     * The icon that is flashed.
     */
    &.ct-flash {
        color: rgba(white, 0.9);
        height: 0;
        left: 0;
        position: fixed;
        @include type-icons;
        top: 0;
        width: 0;
        z-index: $base-z-index + 1000;

        &:before {
            left: 50%;
            opacity: 0;
            position: fixed;
            text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            top: 50%;
            transform: translate(-50%, -50%);
        }

        &--active {
            @include animation--flash-timer();

            &:before {
                @include animation--flash();

                // Fallback for IE9
                font-size: 320px;
                opacity: 1;
            }
        }

        /**
         * Modifiers that can be applied to the flash to change it's appearance.
         */
        &--ok:before {
            content: '\ea10';
        }

        &--no:before {
            content: '\ea0f';
        }
    }

}