// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
// ┃ 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). ┃
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

@mixin icon {
    background-repeat: no-repeat;
    background-color: var(--icon--color);
    content: "";
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
}

: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(--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(--d3fc-legend--background);
            }
            & .multi-ylabel {
                position: absolute;
                top: 0;
                width: 2.5em;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background: var(--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(--d3fc-treedata--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(--d3fc-series, rgba(31, 119, 180, 0.5));
                }

                & text.segment,
                & text.parent {
                    text-anchor: middle;
                    user-select: none;
                    pointer-events: none;
                    fill: var(--d3fc-treedata--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(
                        --d3fc-treedata-axis--lines,
                        var(--d3fc-axis--lines, white)
                    );
                    fill: var(--d3fc-series, rgba(31, 119, 180, 0.5));
                    &:hover {
                        cursor: pointer;
                        stroke: var(--d3fc-treedata--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(--d3fc-treedata--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(--d3fc-treedata--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(--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(--d3fc-axis-ticks--color, rgb(80, 80, 80));
            font-size: 11px;
        }
        & .y-axis path,
        & .y2-axis path,
        & .x-axis path {
            stroke: var(--d3fc-axis--lines, rgb(180, 210, 225));
        }

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

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

            &:hover {
                &::after {
                    color: var(--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 {
            @include icon;
            width: 16px;
            height: 12px;
            -webkit-mask-image: var(--sort-desc-icon--mask-image);
            mask-image: var(--sort-desc-icon--mask-image);
        }

        & .y-label.right-label .splitter-label::after {
            @include icon;
            width: 16px;
            height: 12px;
            -webkit-mask-image: var(--sort-asc-icon--mask-image);
            mask-image: var(--sort-asc-icon--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(--d3fc-series, 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(--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(--d3fc-series, rgba(31, 119, 180, 0.5));
                    stroke: var(--d3fc-series, 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(--d3fc-legend--text, rgb(51, 51, 51));
        }

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

        & #legend-axis path {
            stroke: var(--d3fc-legend--text, 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(--plugin--background, rgb(247, 247, 247));
            border: 1px solid var(--inactive--color, rgb(204, 204, 204));
            color: var(--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(--d3fc-tooltip--background, #ffffff);
        color: var(--d3fc-tooltip--color, black);
        border: 1px solid var(--d3fc-tooltip--border-color, #777777);
        box-shadow: var(--d3fc-tooltip--box-shadow, none);
        pointer-events: none;
    }

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