@import '../tools/loading';

.spinner {
    width: $loading-size;
    margin: 0 auto;
    text-align: center;
    cursor: default;

    &.mod-vertical-margin {
        margin-top: $loading-vertical-margin;
        margin-bottom: $loading-vertical-margin;
    }

    & > div {
        display: inline-block;
        width: $bounce-size;
        height: $bounce-size;
        background-color: var(--deprecated-orange);
        border-radius: 100%;
        animation: bouncedelay 1.7s infinite ease-in-out;

        /* Prevent first frame from flickering when animation starts */
        animation-fill-mode: both;
    }

    .bounce1 {
        animation-delay: -0.32s;
    }

    .bounce2 {
        animation-delay: -0.16s;
    }
}

.loading-prompt {
    margin-top: $loading-prompt-margin-top;
    margin-bottom: $loading-prompt-margin-bottom;
    font-size: $loading-font-size;
    text-align: center;

    .spinner {
        width: $big-loading-size;
        margin-top: $big-loading-margin-top;

        & > div {
            width: $big-bounce-size;
            height: $big-bounce-size;
            background-color: var(--deprecated-orange);
        }
    }
}

.table-container {
    .loading-row {
        display: none;
    }

    .spinner {
        display: none;
    }
}

.loading-component {
    position: relative;

    & > * {
        opacity: 0.4;
        pointer-events: none;
    }

    .loading-row {
        display: table-row-group;
        opacity: 1;
    }

    .spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 999;
        display: block;
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

.mod-loading-content {
    pointer-events: none;

    tbody {
        opacity: 0.4;
    }
}

.loading-spinner {
    @include spinner;
}

@keyframes rotationAnimation {
    100% {
        transform: rotate(360deg);
    }
}