/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
 * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
 * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
 * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
 * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
 * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
 * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
 * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
 * ┃ This file is part of the Perspective library, distributed under the terms ┃
 * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 */

:host {
    user-select: none;
    .chart {
        position: absolute;
        box-sizing: border-box;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 12px;
        overflow: hidden;

        &.yline {
            .y-series:not(:first-child) .gridline-x {
                display: none;
            }
        }

        text {
            /* `font-family` does not apply to `<text>` nodes via inheritance. */
            font-family: var(--psp-interface-monospace--font-family);
        }

        &.heatmap,
        &.treemap {
            d3fc-group.cartesian-chart {
                grid-template-columns:
                    minmax(0em, max-content)
                    auto 1fr auto minmax(0em, max-content);
                grid-template-rows:
                    minmax(0em, max-content)
                    auto 1fr auto minmax(0em, max-content);
            }
        }

        .chart-label {
            display: none;
        }

        &.heatmap {
            padding-right: 120px;
        }
        &.xyscatter {
            padding: 0;
            font-size: 14px;

            d3fc-group:first-child {
                padding: 16px;
                padding-top: 0px;
                width: calc(100% - 32px);
                height: calc(100% - 16px);
            }

            & .multi-xlabel {
                position: absolute;
                bottom: 0;
                height: 2.5em;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background: var(--psp-d3fc--legend--background);
            }
            & .multi-ylabel {
                position: absolute;
                top: 0;
                width: 2.5em;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background: var(--psp-d3fc--legend--background);
            }

            & .outer-container {
                height: 100%;
            }

            & .inner-container {
                display: inline-grid;
                overflow-y: auto;
                width: calc(100% - 16px);
                height: 100%;
                padding: 0;
                margin: 0;

                & div {
                    overflow: hidden;
                }

                & text.segment,
                & text.parent {
                    text-anchor: middle;
                    user-select: none;
                    pointer-events: none;
                    fill: var(--psp-d3fc--treemap--labels, rgb(51, 51, 51));
                }

                & div.xy-scatter-container {
                    margin: 5px 0;
                }
            }
        }
        &.sunburst {
            padding: 0;
            font-size: 14px;
            & .outer-container {
                height: 100%;
            }
            & .inner-container {
                width: 100%;
                height: 100%;
                display: inline-grid;
                padding: 0;
                margin: 0;
                overflow-x: hidden;
                overflow-y: auto;

                & div {
                    overflow: hidden;
                }

                .sunburst-container:not(:only-child) svg {
                    transform: translate(0, -27px);
                }

                & svg {
                    width: 100%;
                    height: 100%;
                }

                & path {
                    fill: var(
                        --psp-d3fc--series--color,
                        rgba(31, 119, 180, 0.5)
                    );
                }

                & text.segment,
                & text.parent {
                    text-anchor: middle;
                    user-select: none;
                    pointer-events: none;
                    fill: var(--psp-d3fc--treemap--labels, rgb(51, 51, 51));
                }

                & div.title-container {
                    margin-top: 5px;
                }
            }
        }

        &.has-legend {
            padding-right: 120px;
        }

        &.treemap {
            & .treemap-container {
                position: relative;

                &:not(:only-child) {
                    width: calc(100% - 12px);
                    height: calc(100% - 12px);
                }
            }

            & .outer-container {
                height: 100%;
            }

            & .inner-container {
                width: 100%;
                height: 100%;
                display: inline-grid;
                padding: 0;
                margin: 0;
                overflow-x: hidden;
                overflow-y: auto;

                & div {
                    overflow: hidden;
                }

                & svg {
                    width: 100%;
                    height: 100%;
                }

                & .treerect {
                    stroke: var(
                        --psp-d3fc--treemap-axis--lines,
                        var(--psp-d3fc--axis-lines--color, white)
                    );
                    fill: var(
                        --psp-d3fc--series--color,
                        rgba(31, 119, 180, 0.5)
                    );
                    &:hover {
                        cursor: pointer;
                        stroke: var(
                            --psp-d3fc--treemap--hover-highlight,
                            black
                        );
                        stroke-opacity: 1;
                    }
                }
                & .rootnode {
                    opacity: 0;
                    pointer-events: none;
                    z-index: 0;
                }
                & .branchnode {
                    opacity: 0;
                    &:hover {
                        fill-opacity: 0.1;
                        opacity: 1;
                        fill: var(--psp-d3fc--treemap--hover-highlight, black);
                    }
                }
                & .leafnode {
                    fill-opacity: 0.8;
                    &:hover {
                        fill-opacity: 0.5;
                    }
                }
                & #hidden {
                    opacity: 0;
                    pointer-events: none;
                    z-index: 0;
                }

                & .top {
                    font-size: 14px;
                    z-index: 5;
                    pointer-events: none;
                }
                & .mid {
                    font-size: 8px;
                    opacity: 0.7;
                    z-index: 4;
                }
                & .lower {
                    font-size: 0px;
                    opacity: 0;
                    z-index: 4;
                }
                & text {
                    fill: var(--psp-d3fc--treemap--labels, rgb(51, 51, 51));
                    &.title {
                        dominant-baseline: hanging;
                    }
                }

                & .parent-controls {
                    position: absolute;
                    top: 12px;
                    right: auto;
                    left: 30px;
                    width: auto;
                    z-index: 4;
                    transition: box-shadow 1s;
                    &:hover {
                        box-shadow: 2px 2px 6px #000;
                        transition: box-shadow 0.2s;
                    }
                }
            }
        }

        & .x-label {
            height: 1.2em !important;
            line-height: 1em !important;
        }

        & .x-label,
        & .y-label {
            color: var(--psp-d3fc--label--color, inherit);
            font-size: 14px;
        }

        & d3fc-canvas.plot-area {
            display: none;
        }
        &.xyscatter,
        &.xyline,
        &.ohlc,
        &.candlestick,
        &.heatmap {
            & d3fc-canvas.plot-area {
                display: block;
            }
        }

        & .y-axis text,
        & .y2-axis text,
        & .x-axis text {
            fill: var(--psp-d3fc--axis-ticks--color, rgb(80, 80, 80));
            font-size: 11px;
        }
        & .y-axis path,
        & .y2-axis path,
        & .x-axis path {
            stroke: var(--psp-d3fc--axis-lines--color, rgb(180, 210, 225));
        }

        & .splitter-label {
            display: inline-block;
            margin: 0 10px;
            cursor: pointer;

            &::after {
                margin-left: 5px;
                color: var(--psp-d3fc--axis-lines--color, rgb(180, 210, 225));
            }

            &:hover {
                &::after {
                    color: var(--psp-d3fc--axis-ticks--color, rgb(80, 80, 80));
                }
            }

            &.disabled {
                &::after {
                    color: rgba(80, 80, 80, 0.3);
                }
                cursor: default;
            }
        }

        & .y-label.left-label .splitter-label::after {
            background-repeat: no-repeat;
            background-color: var(--psp--color);
            content: "";
            display: inline-block;
            -webkit-mask-size: cover;
            mask-size: cover;
            width: 16px;
            height: 12px;
            -webkit-mask-image: var(--psp-icon--sort-desc--mask-image);
            mask-image: var(--psp-icon--sort-desc--mask-image);
        }

        & .y-label.right-label .splitter-label::after {
            background-repeat: no-repeat;
            background-color: var(--psp--color);
            content: "";
            display: inline-block;
            -webkit-mask-size: cover;
            mask-size: cover;
            width: 16px;
            height: 12px;
            -webkit-mask-image: var(--psp-icon--sort-asc--mask-image);
            mask-image: var(--psp-icon--sort-asc--mask-image);
        }

        &.ybar .y-axis path,
        &.yline .y-axis path,
        &.xyline .y-axis path,
        &.ybar .y2-axis path,
        &.yline .y2-axis path,
        &.xyline .y2-axis path,
        &.xyline .x-axis path,
        &.yarea .y-axis path,
        &.yscatter .y-axis path,
        &.xyscatter .y-axis path,
        &.yarea .y2-axis path,
        &.yscatter .y2-axis path,
        &.xyscatter .y2-axis path,
        &.xyscatter .x-axis path,
        &.xbar .x-axis path {
            visibility: hidden;
        }

        & .y-label {
            white-space: nowrap;
        }

        & .nearbyTip {
            fill: var(--psp-d3fc--series--color, rgba(31, 119, 180, 0.5));
        }
    }

    #dragHandles {
        position: absolute;
        top: 0px;
        right: 0px;
        left: auto;
        pointer-events: none;
        & rect {
            pointer-events: all;
        }
    }

    .label rect {
        fill: none;
    }

    .legend-container {
        position: absolute;
        top: 12px;
        right: 12px;
        left: auto;
        width: 150px;
        height: 280px;

        &.legend-color {
            width: 90px;
            height: 150px;
        }

        &[borderbox-on-hover="true"] {
            transition: box-shadow 1s;
            &:hover {
                background-color: var(--psp-d3fc--legend--background, #ffffff);
                transition:
                    box-shadow 0.2s,
                    background-color 0.2s;
            }
        }

        & .legend {
            font-size: 8pt;
            width: 100%;

            & .cell {
                cursor: pointer;

                & path {
                    fill: var(
                        --psp-d3fc--series--color,
                        rgba(31, 119, 180, 0.5)
                    );
                    stroke: var(--psp-d3fc--series--color, rgb(31, 119, 180));
                }
                &.hidden path {
                    fill: rgba(204, 204, 204, 0.5);
                    stroke: rgb(204, 204, 204);
                }

                &.hidden circle {
                    fill: rgb(204, 204, 204) !important;
                }
            }
        }

        & text {
            fill: var(--psp-d3fc--legend--color, rgb(51, 51, 51));
        }

        & .label {
            &:hover {
                fill: rgb(34, 160, 206);
            }
        }

        & #legend-axis path {
            stroke: var(--psp-d3fc--legend--color, rgb(51, 51, 51));
        }

        & .legend-controls {
            margin-left: 12px;

            & #up-arrow,
            & #down-arrow {
                cursor: pointer;
                color: rgb(31, 119, 180);
            }

            & #up-arrow.disabled,
            & #down-arrow.disabled {
                cursor: default;
                color: rgb(51, 51, 51);
            }
        }
    }

    .heatmap .legend-container.legend-color {
        height: 200px;
    }

    .treemap .legend-container.legend-color {
        height: 200px;
    }

    .treemap .legend-container:not(.legend-color) {
        width: 100px;
    }

    .zoom-controls {
        position: absolute;
        top: 10px;
        left: 0;
        width: 100%;
        text-align: center;

        & button {
            -webkit-appearance: none;
            background: var(--psp--background-color, rgb(247, 247, 247));
            border: 1px solid var(--psp-inactive--color, rgb(204, 204, 204));
            color: var(--psp-d3fc--label--color, inherit);
            font-size: 12px;
            padding: 8px;
            opacity: 0.5;
            cursor: pointer;
            &:hover {
                opacity: 1;
            }
        }
    }

    .parent-controls {
        position: absolute;
        top: 30px;
        right: 145px;
        width: 100%;
        text-align: right;

        & button {
            -webkit-appearance: none;
            background: rgb(247, 247, 247);
            border: 1px solid rgb(204, 204, 204);
            padding: 10px;
            opacity: 0.5;
            cursor: pointer;

            &:hover {
                background: rgb(230, 230, 230);
            }
        }
    }

    div.tooltip {
        position: absolute;
        text-align: left;
        font-size: 12px;
        font-weight: 300;
        white-space: nowrap;
        padding: 0.5em;
        background: var(--psp-d3fc--tooltip--background, #ffffff);
        color: var(--psp-d3fc--tooltip--color, black);
        border: 1px solid var(--psp-d3fc--tooltip--border-color, #777777);
        box-shadow: var(--psp-d3fc--tooltip--box-shadow, none);
        pointer-events: none;
    }

    div.tooltip ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
}