@prefix: graphjs;

.@{prefix}-loading {
    overflow: hidden;
    position: relative;
    z-index: 1;
    pointer-events: none;
    & > * {
        filter: blur(5px);
    }
    .@{prefix}-loader {
        box-sizing: border-box;
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        vertical-align: middle;
        pointer-events: all;
        filter: none;
        .transition(all 1s ease);
        &.@{prefix}-placeholder {
            .@{prefix}-fill {
                .transition(background-color 2s linear);
                .animation(loading-placeholder normal 2s infinite ease-in-out);
            }
            .@{prefix}-circle {
                .border-radius(@border-radius-full) !important;
            }
            .@{prefix}-rounded-square {
                .border-radius(25%) !important;
            }
            .@{prefix}-paragraph {
                display: block;
                &.@{prefix}-centered {
                    .@{prefix}-line:last-child {
                        margin-left: calc(100% / 3 / 2) !important;
                        margin-right: calc(100% / 3 / 2) !important;
                    }
                }
                .@{prefix}-line:last-child {
                    width: calc(100% / 3 * 2) !important;
                }
            }
            .@{prefix}-line {
                display: block;
            }
            hr {
                height: 1px;
                margin: 0;
                border: none;
                outline: none;
            }
            hr.@{prefix}-vertical {
                width: 1px;
                height: 100%;
                border: none;
                outline: none;
            }
        }
        .@{prefix}-dots {
            position: absolute;
            top: 50%;
            left: 50%;
            .transform(translate(-50%, -50%));
            & > span {
                display: inline-block;
                width: .85em;
                height: .85em;
                margin-right: .15em;
                border-radius: 100%;
                // ThemeOption: background-color: @primary-color;
                animation-name: loading-dots;
                animation-duration: 2s;
                animation-iteration-count: infinite;
                animation-fill-mode: both;
                transition: opacity .125s linear;
                &:nth-child(2) {
                    animation-delay: .5s;
                }
                &:nth-child(3) {
                    animation-delay: 1s;
                    margin-right: 0;
                }
            }
        }
    }
    .@{prefix}-blockage {
        position: absolute;
        z-index: 3;
        top: 50%;
        left: 50%;
        width: auto;
        // ThemeOption: color: @text-color-weak;
        font-size: 1em !important;
        text-transform: none;
        border-width: 3px;
        border-style: solid;
        // ThemeOption: border-color: @text-color-weak;
        border-color: transparent; // ThemeFix
        border-radius: .5em;
        // ThemeOption: background-color: @background-color-shade;
        .box-shadow(e("0 0 15px 0 fade(black, 5%), 0 2px 1px 0px fade(black, 7.5%)"));
        pointer-events: all;
        cursor: pointer;
        filter: none;
        .transform(translate(-50%, -50%));
        .transition(all 1s ease);
        &:hover {
            // ThemeOption: color: @text-color-normal;
            // ThemeOption: border-color: @text-color-normal;
            border-color: transparent; // ThemeFix
            // ThemeOption: background-color: @background-color-contrast;
        }
    }
}

.@{prefix}-blocked {
    .@{prefix}-placeholder {
        filter: blur(5px);
        .@{prefix}-fill {
            .animation(unset) !important;
            background-color: fade(black, 5%);
        }
    }
}