$graph-download-font: 'Helvetica Neue', sans-serif;

$pipeline-node-types:
    (file, #fff5ba),
    (analysis-step, #d3e9ff),
    (quality-metric, #80ffc0),
    (file-type, #e0e0e0);

// FUnction to return black for light background colors passed in $color, and white for dark
// background colors passed in $color.
@function node-text-color($color) {
    @if (lightness($color) > 65) {
        @return #000000; // Lighter background, return dark color
    }

    @else {
        @return #ffffff; // Darker background, return light color
    }
}

.pipeline-graph {
    @each $node-type, $color in $pipeline-node-types {
        // Audit icons
        g.pipeline-node-#{$node-type} {
            fill: $color;

            &.highlight {
                > rect, > ellipse {
                    stroke: #f4442e;
                    stroke-width: 3px;
                }

                line {
                    stroke: #f4442e;
                    stroke-width: 1px;
                }
            }

            &.active {
                fill: desaturate(darken($color, 20%), 30%);
            }

            &.error, &.restricted {
                fill: #ffc0c0;
            }

            &.revoked, &.deleted {
                fill: #b24342;

                g.label {
                    fill: #fff;
                }
            }

            &.archived, &.replaced {
                fill: #c0c0c0;
            }

            &:hover {
                cursor: pointer;
            }

            > text {
                fill: #000;
            }
        }

        .graph-modal--#{$node-type} {
            background-color: $color;
        }
    }

    g.pipeline-node-file-type {
        pointer-events: none;
    }

    g.label {
        font-family: $graph-download-font;
        font-size: $font-size-base * 0.85; // Don't use rems; maintain size on mobile
        font-weight: bold;
        fill: #000;
        pointer-events: none;
    }

    g.node {
        > rect, > ellipse {
            stroke: #a0a0a0;
            stroke-width: 1.5px;
        }

        &.contributing {
            stroke-dasharray: 4, 2;

            rect, ellipse {
                stroke: #a0a0a0;
                stroke-width: 1.5px;
            }

            .decoration {
                stroke-dasharray: none;
            }
        }

        // Stacks of coalesced reads files. Make border slightly finer for cleaner look.
        &.reads {
            .stack {
                stroke: #a0a0a0;
                stroke-width: 1px;
            }
        }

        line {
            stroke: #a0a0a0;
            stroke-width: 0.5px;
        }

        .decoration {
            rect {
                fill: #e0e0e0;
            }

            &__border {
                fill: none;
                stroke-width: 1px;
                stroke: #a0a0a0;
            }

            &__icon {
                fill: #606060;
            }

            &.decoration--active {
                rect {
                    fill: #606060;
                }

                .decoration__icon {
                    fill: #e0e0e0;
                }
            }
        }
    }

    g.subnodes {
        text {
            font-size: 10px;
            pointer-events: none;
        }
    }

    g.cluster {
        rect {
            fill: #f0f8f0;
            stroke: #c0c0c0;
        }

        text {
            font-size: $font-size-base; // Don't use rems; maintain size on mobile
            fill: #000;
        }
    }

    /* stylelint-disable-next-line selector-class-pattern */
    g.edgePath {
        path.path {
            stroke: #c0c0c0;
            stroke-width: 2px;
        }

        defs > marker > path {
            fill: #c0c0c0;
        }

        &.active {
            path.path {
                stroke: #00f;
            }

            defs > marker > path {
                fill: #00f;
            }
        }
    }

    g.pipeline-node-qc-metric {
        > circle {
            stroke-width: 2px;
            stroke: #a0a0a0;
            fill: #80ffc0;
        }

        > text {
            font-family: $graph-download-font;
            font-weight: bold;
            fill: #000;
        }

        &.active {
            > circle {
                fill: darken(#80ffc0, 50%);
            }

            > text {
                fill: #fff;
            }
        }

        &.highlight {
            > circle {
                stroke: #f4442e;
            }

            > text {
                fill: #fff;
            }
        }

        // Handle hovering over the QC circle to bring up the tooltip.
        > circle:hover {
            + text + g {
                display: block;
            }
        }
    }

    g.qc-tooltip {
        display: none;
        pointer-events: none;

        rect, polygon {
            fill: #000;
        }

        text {
            fill: #fff;
            font-size: 0.8rem;
            font-weight: normal;
        }
    }
}

.graph-display {
    overflow: scroll;
    background-color: #f8f8f8;

    svg {
        display: block;
        margin: 0 auto;
    }
}

.select-note {
    font-style: italic;
    color: #c0c0c0;
}

.graph-dl {
    display: flex;
    margin: 0;
    padding: 5px;
}

.step-info {
    padding: 15px 30px;
    border: 1px solid #e0e0e0;
}

.selected-step {
    @extend .step-info;

    background-color: #e8f0e8;
}

.graph-node-info {
    hr {
        margin: 0 !important;
    }
}

.btn.btn-orient {
    margin-right: 5px;
}

.file-qc-buttons {
    .btn {
        margin-right: 5px;
    }
}

.details-view-header {
    margin-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;

    @media screen and (min-width: $screen-md-min) {
        display: table;
        width: 100%;
    }
}

.details-view-info {
    @media screen and (min-width: $screen-md-min) {
        display: table-cell;
        width: 60%;
    }

    h5 {
        margin-top: 5px;
        margin-bottom: 0;
        font-size: 1rem;
        font-weight: normal;
        color: #808080;
    }
}

.quality-metrics-modal {
    @media screen and (min-width: $screen-md-min) {
        display: flex;

        hr {
            margin-right: 10px;
        }
    }

    @at-root #{&}__data {
        @media screen and (min-width: $screen-md-min) {
            flex: 0 1 33.33%;
        }
    }

    @at-root #{&}__attachments {
        h5 {
            margin: 0 0 10px;
        }

        @media screen and (min-width: $screen-md-min) {
            flex: 0 1 66.66%;
        }
    }
}

.quality-metrics-attachments {
    margin-top: 20px;

    @media screen and (min-width: $screen-md-min) {
        margin-top: 0;
    }

    h5 {
        margin-top: 0;
    }
}

.zoom-control-area {
    background-color: #fff;
    border-bottom: 1px solid #a0a0a0;
}

.zoom-control {
    width: 100%;
    vertical-align: middle;
    text-align: left;

    @media screen and (min-width: $screen-sm-min) {
        width: 200px !important;
        margin: 0 auto;
    }

    .icon {
        vertical-align: middle;
        color: #808080;
    }

    td {
        padding: 5px 0 !important;
    }
}

.zoom-slider {
    width: 90%;
}

.zoom-indicator {
    width: 15%;
    text-align: center;

    button {
        background-color: white;
        border: none;
    }

    button:focus {
        outline: none;
    }
}

.zoom-decoration {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: bold;
    vertical-align: middle;
}

.graph-modal-header {
    @at-root #{&}__content {
        flex: 1 1 auto;

        h2 {
            margin: 0;
            font-size: 1.3rem;
            border-bottom: none;
        }

        h5 {
            margin: 0;
            font-size: 1rem;
            color: #808080;
        }
    }
}

.graph-modal-audits {
    margin-top: 4px;

    h5 {
        margin-top: 0;
    }
}

// Special unknown status color.
$color-unknown: #ffc0c0;

.file-status-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    @at-root #{&}__status {
        flex: 1 1 auto;
        margin-right: 1px;
        margin-bottom: 1px;
        text-align: center;
    }

    .status--status-unknown {
        fill: label-color($color-unknown);
        background-color: $color-unknown;
        box-shadow: inset 0 0 0 1px lighten($color-unknown, 20%);
    }
}

.analyses-selector {
    @at-root #{&}--file-gallery-facets {
        margin-bottom: 25px;
    }

    .file-gallery-facets.collapsed & {
        display: none;
    }
}

// Hidden div within which to draw a temporary file graph for downloading. Though hidden, it must
// take up space so that the viewBox gets configured correctly. Therefore, no display:none.
#graph-download-container {
    position: absolute;
    opacity: 0;
}
