// TODO: Remove manual PWGx- namespacing, replace with tooling

.PWGx-PipelineGraph-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: auto;
    margin-bottom: 16px;

    * {
        box-sizing: border-box;
    }

    .PWGx-PipelineGraph {
        margin-left: auto;
        margin-right: auto;
    }
}

circle.halo {
    stroke: white;
    fill: none;
}

.PWGx-svgResultStatusOutline {
    stroke: $graph-connector-grey;
    fill: none;
}

.PWGx-result-status-glyph {
    stroke: none;
    fill: #fff;
}

.PWGx-svgResultStatusSolid {
    transform: translateZ(0);

    > circle.statusColor {
        &.success {
            fill: $status-success;
        }
        &.failure {
            fill: $status-failure;
        }
        &.unstable {
            fill: $status-unstable;
        }
        &.aborted {
            fill: $graph-connector-grey;
        }
        &.paused {
            fill: $status-paused;
        }
        &.unknown {
            fill: $status-unknown;
        }

        .pipeline-node-selected & {
            stroke: none;
        }
    }
}

.PWGx-progress-spinner.running circle.statusColor {
    fill: none;
    stroke: $progress-bg;
}

.PWGx-progress-spinner.running path {
    fill: none;
    stroke: $progress-bar-color;
}

.PWGx-progress-spinner.pc-over-100 circle.statusColor {
    fill: none;
    stroke: $progress-bar-color;
}

.PWGx-progress-spinner.pc-over-100 path {
    fill: none;
    stroke: $status-unstable;
}

.PWGx-progress-spinner.running.spin {
    animation: progress-spinner-rotate 4s linear;
    animation-iteration-count: infinite;
}

@keyframes progress-spinner-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.PWGx-progress-spinner circle.inner,
.PWGx-progress-spinner.running.spin circle.inner {
    display: none;
    animation: progress-spinner-pulsate 1.2s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
}

.PWGx-progress-spinner.running circle.inner {
    display: block;
    fill: $progress-bar-color;
    stroke: $progress-bar-color;
}

@keyframes progress-spinner-pulsate {
    0% {
        transform: scale(0.1, 0.1);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2, 1.2);
        opacity: 0;
    }
}

.PWGx-progress-spinner.queued circle.statusColor {
    fill: none;
    stroke: $graph-connector-grey;
}

.PWGx-progress-spinner.queued circle.statusColor.inner {
    display: block;
    fill: $graph-connector-grey;
    stroke: $graph-connector-grey;
}

.PWGx-progress-spinner.queued path {
    fill: none;
    stroke: none;
}

.PWGx-pipeline-connector {
    stroke: $graph-connector-grey;
}

.PWGx-pipeline-node-terminal {
    fill: $graph-connector-grey;
}

.PWGx-pipeline-connector-skipped {
    stroke: $graph-connector-grey;
    stroke-opacity: 0.25;
}

.PWGx-pipeline-small-label {
    font-size: 80%;
}

.PWGx-pipeline-big-label.selected {
    font-weight: bold;
}

.PWGx-pipeline-small-label.selected {
    font-weight: bold;
    margin-top: 3px;
}

.PWGx-pipeline-selection-highlight circle {
    fill: none;
    stroke: $selection-highlight;
}