/* Layout Debug */
/*
#summary {
    background-color: red;
}

#pipelines {
    background-color: green;
}

#histograms {
    background-color: yellow;
}

#timeseries {
    background-color: blue;
}
*/

/* Colors */

@secondaryLabelColor: rgba(0, 0, 0, 0.5);
@tertiaryLabelColor: rgba(0, 0, 0, 0.25);
@quaternaryLabelColor: rgba(0, 0, 0, 0.1);
@systemBlueColor: rgb(0, 122, 255);
@systemRedColor: hsl(3, 100%, 59%); // HSL to allow desaturate below
@filterRedColor: desaturate(@systemRedColor, 25%);
@textBackground: rgba(1,1,1,0);

/* Dark Colors */

@secondaryLabelColorDark: rgba(255, 255, 255, 0.55);
@tertiaryLabelColorDark: rgba(255, 255, 255, 0.25);
@quaternaryLabelColorDark: rgba(255, 255, 255, 0.1);
@systemBlueColorDark: rgb(10, 132, 255);
@systemRedColorDark: hsl(3, 100%, 61%); // HSL to allow desaturate below
@filterRedColorDark: darken(desaturate(@systemRedColorDark, 35%), 15%);
@textBackgroundDark: rgba(0,0,0,0);

/* Color Mixins */

.secondaryLabelColor {
    color: @secondaryLabelColor;

    @media (prefers-color-scheme: dark) {
        color: @secondaryLabelColorDark;
    }
}

.secondaryLabelFill {
    fill: @secondaryLabelColor;

    @media (prefers-color-scheme: dark) {
        fill: @secondaryLabelColorDark;
    }
}

.secondaryLabelStroke {
    stroke: @secondaryLabelColor;

    @media (prefers-color-scheme: dark) {
        stroke: @secondaryLabelColorDark;
    }
}

.tertiaryLabelFill {
    fill: @tertiaryLabelColor;

    @media (prefers-color-scheme: dark) {
        fill: @tertiaryLabelColorDark;
    }
}

.quaternaryLabelFill {
    fill: @quaternaryLabelColor;

    @media (prefers-color-scheme: dark) {
        fill: @quaternaryLabelColorDark;
    }
}

.systemBlueColor {
    color: @systemBlueColor;

    @media (prefers-color-scheme: dark) {
        color: @systemBlueColorDark;
    }
}

.systemBlueFill {
    fill: @systemBlueColor;

    @media (prefers-color-scheme: dark) {
        fill: @systemBlueColorDark;
    }
}

.systemRedFill {
    fill: @systemRedColor;

    @media (prefers-color-scheme: dark) {
        fill: @systemRedColorDark;
    }
}

.filterRedColor {
    color: @filterRedColor;

    @media (prefers-color-scheme: dark) {
        color: @filterRedColorDark;
    }
}

.filterRedFill {
    fill: @filterRedColor;

    @media (prefers-color-scheme: dark) {
        fill: @filterRedColorDark;
    }
}

.textBackgroundFill {
    fill: @textBackground;

    @media (prefers-color-scheme: dark) {
        fill: @textBackgroundDark;
    }
}

.textBackgroundFillImportant {
    fill: @textBackground !important;

    @media (prefers-color-scheme: dark) {
        fill: @textBackgroundDark !important;
    }
}

/* Widths */

@histogram-label-width: 120px;

/* General */

body {
    font-family: -apple-system, "Helvetica Neue";
    font-size: 12pt;
    cursor: default;

    .secondaryLabelColor();

    @media (prefers-color-scheme: dark) {
        background-color: @textBackgroundDark;
    }
    
    padding-left: 20px;
}

#wrapper {
    width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

#summary {
    width: 300px;
    
    margin-top: 0;
    margin-bottom: 25px;
}

#pipelines {
    float: left;
    width: 300px;
}

#histograms {
    float: left;
    width: 300px;
}

#timeseries {
    float: left;
    width: 520px;
}

.chart-title {
    .systemBlueColor();
    font-size: 16px;
    font-weight: 300;
}

h2 {
    width: 120px;
    text-align: right;
    margin-top: 10px;
}

#timeseries h2 {
    text-align: left;
    width: 300px;
    margin-left: 60px;
}

/* Summary */

#summary dt {
    display: inline-block;
    width: @histogram-label-width;
    text-align: right;
}
    
#summary dt:nth-of-type(1) {
    margin-top: 10px;
}

#summary dd {
    display: inline-block;
    width: 150px;
    
    margin-left: 0;
    
    font-size: 16px;
    text-align: right;
}

/* Histogram */

// Highlight the top row of pipeline charts with blue
#pipelines svg g:nth-of-type(1) rect {
    .systemBlueFill();
    fill-opacity: 0.6;
}

#pipelines svg g:nth-of-type(1) text {
    .systemBlueFill();
}

#pipelines svg g:nth-of-type(1) rect:hover {
    .filterRedFill();
}

#pipelines svg g:nth-of-type(1) .emptybar,
#pipelines svg g:nth-of-type(1) .emptybar:hover {
    .textBackgroundFill();
}

#pipelines svg g:nth-of-type(1) .subbar emptybar {
    display: none;
}

#pipelines svg g:nth-of-type(1).bar:hover text {
    .filterRedFill();
}

.histogram {
    float: left;
}

.chart text {
    font-size: 12px;
    
    .secondaryLabelFill();
}

.chart .values {
    text-anchor: start;
    .tertiaryLabelFill();
}

.chart .labels {
    text-anchor: end;
}

.bar:hover {
    cursor: -webkit-zoom-in;
}

.bar:hover rect {
    .filterRedFill();
}

.bar:hover text {
    .filterRedFill();
}

.emptybar {
    .textBackgroundFillImportant();
}

.chart .subbar .emptybar {
    display: none;
}

p.collapse {
    font-size: 12px;
    text-align: right;
    .systemBlueColor();
        
    width: @histogram-label-width;
    margin-left: 0;
    margin-right: auto;

    margin-top: 0;
}

p.collapse:hover {
    .filterRedColor();
}

/* Time Series */

.axis text {
    font-size: 12px;
    .secondaryLabelFill();
}

.axis line {
    fill: none;
    .secondaryLabelStroke();
}

.axis path {
    display: none;
}

.gridline {
    .textBackgroundFill();
    pointer-events: none;
}

.timeserieschart .label {
    margin-bottom: 0;
}

.timeserieschart .bar,
.timeserieschart .subar {
    pointer-events: none;
}

.timeserieschart .background {
    .textBackgroundFill();
    cursor: col-resize;
}

.hoverTimeBar {
    .systemBlueFill();
    width: 1;
    pointer-events: none;
}

.hoverTimeLabel {
    font-size: 12px;
    .systemBlueFill();
    pointer-events: none;
}

.selectedTimeRange {
    .quaternaryLabelFill();
    cursor: -webkit-zoom-in;

    pointer-events: none;
}

.nowTick {
    .systemRedFill();
    pointer-events: none;
}

/* Shared */

rect, line, path {
    shape-rendering: crispEdges;
}

.bar rect {
    .tertiaryLabelFill();
}

.subbar rect,
#pipelines svg g:nth-of-type(1) rect.subbar /* stop it from being blue */
{
    .filterRedFill();
    pointer-events: none;
}

.subbar text {
    display: none;
}

.bar text {
    overflow: visible;
}
