// =============================================================================
// LOADING (CSS)
// =============================================================================


// Bigcommerce Component
// -----------------------------------------------------------------------------
//
// The Bigcommerce Coding Standards, coupled with Foundation.
// If any library overrides or extra CSS is needed, declare it here.
//
// 1. If set to false, there is no outputted CSS for this component.
//
// -----------------------------------------------------------------------------


@if $exportCSS--loading {

    // =============================================================================
    // LOADING NOTIFICATION
    // =============================================================================

    .loadingNotification {
        @include loadingNotification-base();

        &.ng-hide-remove,
        &.ng-hide-add-active {
            @include loadingNotification-startState();
        }

        &.ng-hide-remove-active {
            @include loadingNotification-activeState();
        }
    }

    .loadingNotification-label {
        @include loadingNotification-label();
    }


    // =============================================================================
    // Loading overlay
    // =============================================================================

    .loadingOverlay-container {
        @include loadingOverlay-container();
    }

    .loadingOverlay {
        @include loadingOverlay-base();

        &::before {
            @include loadingOverlay-spinner();
            animation: spin $loadingOverlay-spinner-duration infinite $loadingOverlay-spinner-easing;
        }

        &.ng-enter,
        &.ng-leave.ng-leave-active {
            @include loadingOverlay-startState();
        }

        &.ng-leave,
        &.ng-enter.ng-enter-active {
            @include loadingOverlay-activeState();
        }

    }

    @keyframes spin {
        0% {
            transform: translateY(-50%) rotate(0deg);
        }

        100% {
            transform: translateY(-50%) rotate(360deg);
        }
    }

}