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

/* Row Selection */

/* // TODO this makes the UI flash a CSS layout for a millsiecond when toggling */
/* // settings butit could be fixed. */

/* perspective-viewer:not([settings]) { */
/*     @include settings-not-open; */
/* } */

/* :host-context(perspective-viewer:not([settings])) { */
/*     @include settings-not-open; */
/* } */

/* @mixin settings-not-open { */
/*     regular-table table tr.rt-autosize + tr th { */
/*         height: 0px; */
/*         span { */
/*             display: none; */
/*         } */
/*     } */
/* } */

perspective-viewer,
:host {
    .psp-menu-enabled {
        padding: 0 6px;
        font-size: 8px;
        border-radius: 3px 3px 0 0;
    }

    .psp-menu-enabled:hover,
    tr:not(.rt-autosize) th.psp-menu-open {
        color: var(--psp--background-color);
        background-color: var(--psp--color);
        border-bottom-color: var(--psp--color);
        cursor: pointer;
    }

    tr:not(.rt-autosize) th.psp-menu-open {
        &:before {
            background-repeat: no-repeat;
            background-color: var(--psp--color);
            content: "";
            display: inline-block;
            -webkit-mask-size: cover;
            mask-size: cover;
            height: 8px;
            width: 10px;
            -webkit-mask-image: var(--psp-icon--column-settings--mask-image);
            mask-image: var(--psp-icon--column-settings--mask-image);
            margin-right: 4px;
            background-color: var(--psp--background-color);
        }
    }

    td.psp-menu-open {
        box-shadow:
            inset -2px 0px 0px var(--psp--color),
            inset 2px 0px 0px var(--psp--color);
    }

    tr:first-child td.psp-menu-open {
        border-top-color: var(--psp--color) !important;
    }

    tr:last-child td.psp-menu-open {
        box-shadow:
            inset -2px 0px 0px var(--psp--color),
            inset 2px 0px 0px var(--psp--color),
            inset 0px -2px 0px var(--psp--color);
    }
}

perspective-viewer,
:host-context(perspective-viewer) {
    regular-table table thead tr:last-child th {
        border-bottom-width: 1px;
        border-bottom-color: var(--psp-inactive--border-color, #8b868045);
    }
}

.psp-sort-enabled:hover {
    cursor: pointer;
}

regular-table.flat-group-rollup-mode.vertical-row-headers
    th.psp-tree-label:not(:last-of-type) {
    writing-mode: vertical-lr;
}

.psp-select-region-inactive,
:hover .psp-select-region-inactive,
:hover th.psp-tree-leaf.psp-select-region-inactive,
:hover th.psp-tree-label.psp-select-region-inactive {
    background-color: var(--psp-inactive--color) !important;
    color: var(--psp--background-color) !important;
    border-color: var(--psp--background-color) !important;
}

.psp-error {
    color: red;
}

td:focus {
    outline: #666;
    outline-style: dotted;
    outline-width: 1px;
}

perspective-viewer.dragging,
:host-context(perspective-viewer.dragging) {
    regular-table {
        pointer-events: none;
    }
}

.psp-header-border:last-child {
    border-right-width: 0px;
}

.psp-header-sort-desc:after {
    background-repeat: no-repeat;
    background-color: var(--psp--color);
    content: "";
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    -webkit-mask-image: var(--psp-icon--sort-desc--mask-image);
    mask-image: var(--psp-icon--sort-desc--mask-image);
}

.psp-header-sort-asc:after {
    background-repeat: no-repeat;
    background-color: var(--psp--color);
    content: "";
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    -webkit-mask-image: var(--psp-icon--sort-asc--mask-image);
    mask-image: var(--psp-icon--sort-asc--mask-image);
}

.psp-header-sort-col-desc:after {
    background-repeat: no-repeat;
    background-color: var(--psp--color);
    content: "";
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    -webkit-mask-image: var(--psp-icon--sort-col-desc--mask-image);
    mask-image: var(--psp-icon--sort-col-desc--mask-image);
}

.psp-header-sort-col-asc:after {
    background-repeat: no-repeat;
    background-color: var(--psp--color);
    content: "";
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    -webkit-mask-image: var(--psp-icon--sort-col-asc--mask-image);
    mask-image: var(--psp-icon--sort-col-asc--mask-image);
}

.psp-header-sort-abs-desc:after {
    background-repeat: no-repeat;
    background-color: var(--psp--color);
    content: "";
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    -webkit-mask-image: var(--psp-icon--sort-abs-desc--mask-image);
    mask-image: var(--psp-icon--sort-abs-desc--mask-image);
}

.psp-header-sort-abs-asc:after {
    background-repeat: no-repeat;
    background-color: var(--psp--color);
    content: "";
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    -webkit-mask-image: var(--psp-icon--sort-abs-asc--mask-image);
    mask-image: var(--psp-icon--sort-abs-asc--mask-image);
}

.psp-header-sort-abs-col-desc:after {
    background-repeat: no-repeat;
    background-color: var(--psp--color);
    content: "";
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    -webkit-mask-image: var(--psp-icon--sort-abs-col-desc--mask-image);
    mask-image: var(--psp-icon--sort-abs-col-desc--mask-image);
}

.psp-header-sort-abs-col-asc:after {
    background-repeat: no-repeat;
    background-color: var(--psp--color);
    content: "";
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
    width: 14px;
    height: 11px;
    margin-left: 4px;
    -webkit-mask-image: var(--psp-icon--sort-abs-col-asc--mask-image);
    mask-image: var(--psp-icon--sort-abs-col-asc--mask-image);
}

/* Shift-key affordance: while the user holds Shift on the host
 * `<perspective-viewer>`, sort-arrow mask-image icons and tree
 * expand/collapse carets recolor to advertise their Shift-modified actions
 * (abs-sort and depth-level expand/collapse). Both `:host-context` (shadow
 * render target) and the bare selector (light render target) are emitted to
 * cover the runtime branch in datagrid.ts. */
:host-context(perspective-viewer.shift-active)
    :is(
        .psp-header-sort-asc,
        .psp-header-sort-desc,
        .psp-header-sort-col-asc,
        .psp-header-sort-col-desc
    ):after,
perspective-viewer.shift-active
    :is(
        .psp-header-sort-asc,
        .psp-header-sort-desc,
        .psp-header-sort-col-asc,
        .psp-header-sort-col-desc
    ):after {
    background-color: var(
        --shift-active--color,
        var(--psp-datagrid--pos-cell--color, #1078d1)
    );
}

:host-context(perspective-viewer.shift-active)
    :is(.psp-tree-label-expand, .psp-tree-label-collapse):before,
perspective-viewer.shift-active
    :is(.psp-tree-label-expand, .psp-tree-label-collapse):before {
    color: var(
        --shift-active--color,
        var(--psp-datagrid--pos-cell--color, #1078d1)
    );
}

tbody th:last-of-type {
    border-right: 1px solid var(--psp-inactive--border-color, #8b868045);
    overflow: hidden;
    text-overflow: ellipsis;
}

tbody th:empty {
    background-image: linear-gradient(
        to right,
        transparent 9px,
        var(--psp-inactive--border-color, #eee) 10px,
        transparent 11px
    );
    background-repeat: no-repeat;
    min-width: 20px;
    max-width: 20px;
    pointer-events: none;
}

regular-table:not(.flat-group-rollup-mode) {
    .psp-tree-label {
        max-width: 0px;
        min-width: 0px;
    }

    .psp-tree-label:before {
        color: var(--psp--color);
        font-family: var(--psp-button--font-family, inherit);
        padding-right: 11px;
    }

    .psp-tree-label-expand:before {
        content: var(--psp-label--tree-expand--content, "+");
    }

    .psp-tree-label-collapse:before {
        content: var(--psp-label--tree-collapse--content, "-");
    }

    .psp-tree-label-expand,
    .psp-tree-label-collapse {
        cursor: pointer;
    }

    .psp-tree-label:hover:before {
        color: var(--psp-active--color);
        text-shadow: 0px 0px 5px var(--psp-active--color);
    }
}

.psp-tree-leaf {
    padding-left: 24px;
}

.psp-align-right {
    text-align: right;
}

.psp-color-mode-bar {
    padding: 0 2px;
}

.psp-color-mode-label-bar {
    position: relative;
    padding: 0 2px;

    .psp-bar {
        isolation: isolate;
        position: unset;
    }

    .psp-bar:before {
        color: transparent;
        pointer-events: none;
        content: var(--label);
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 3px;
    }

    .psp-bar:after {
        color: var(--psp-label-bar-bg);
        content: var(--label);
        mix-blend-mode: difference;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 5px;
    }
}

.psp-label-bar {
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0px;
}

.psp-label-bar-fill {
    position: absolute;
    top: 10%;
    height: 80%;
    background: var(--psp-label-bar-color);
    pointer-events: none;
}

.psp-label-bar-text {
    position: relative;
    color: var(--psp-label-bar-bg);
    mix-blend-mode: difference;
    pointer-events: none;
}

.psp-align-left {
    text-align: left;
}

.psp-positive:not(:focus) {
    color: var(--psp-datagrid--pos-cell--color);
}

.psp-negative:not(:focus) {
    color: var(--psp-datagrid--neg-cell--color);
}

regular-table table tbody td {
    min-width: 52px !important;
}

.psp-is-width-override .rt-column-resize,
.rt-column-resize:hover {
    border: 1px dashed #999;
    border-bottom-width: 0px;
    border-left-width: 0px;
}

.boolean-editable {
    cursor: pointer;
}

regular-table table {
    font-size: 1em;
    user-select: none;
    color: inherit;
    border-collapse: separate;

    th {
        font-weight: 400;
    }

    td,
    th {
        border-color: var(--psp-inactive--border-color, #8b868045);
        height: var(--psp-datagrid--row--height, 23px);
    }

    .psp-header-group {
        text-overflow: ellipsis;
    }

    th.psp-header-leaf {
        border-bottom-width: 0px;

        span {
            height: var(--psp-datagrid--row--height, 23px);
            min-height: var(--psp-datagrid--row--height, 23px);
        }
    }

    td,
    th.psp-tree-label,
    th.psp-tree-label,
    th.psp-tree-leaf,
    tbody tr:first-child th {
        border-style: solid;
        border-width: 0px;
        border-top-width: 1px;
    }

    tbody th:empty {
        background-position: 0px -10px;
    }

    td.psp-select-region,
    th.psp-select-region {
        /* transition: background-color 0.5s, color 0.5s, border-color 0.5s; */
        background-color: var(--psp--color) !important;
        color: var(--psp--background-color) !important;
        border-color: var(--psp--background-color) !important;
    }
}

regular-table
    tbody
    tr:hover
    td.psp-select-region:not(.psp-select-region-inactive),
regular-table
    tbody
    tr:hover
    + tr
    td.psp-select-region:not(.psp-select-region-inactive) {
    border-color: var(--psp--background-color) !important;
}

regular-table tbody tr:hover {
    td.psp-select-region.psp-menu-open {
        &:not(.psp-select-region-inactive) {
            box-shadow:
                inset -2px 0px 0px var(--psp--background-color),
                inset 2px 0px 0px var(--psp--background-color);
        }
    }
}

:host-context(perspective-viewer[settings]) td.psp-select-region.psp-menu-open {
    box-shadow:
        inset -2px 0px 0px var(--psp--background-color),
        inset 2px 0px 0px var(--psp--background-color);
}

/* This is a design/architecture bug. When the datagrid draws during a sidepanel */
/* collapse/uncollapse, the `settings` attribute is set to the _previous_ state */
/* as this collapse takes a while and we dont want the new state CSS to apply */
/* until the drawing is done. However, this causes the datagrid to draw its */
/* _first_ frame as if its in the wrong state, as it detects sidepanel state */
/* via HTML attribute checking. */
regular-table
    #psp-column-edit-buttons
    th:not(.rt-group-corner)
    span:not(.rt-column-resize):before {
    content: var(--psp-datagrid--column-edit-button--content, "Edit");
}

perspective-viewer:not([settings]),
:host-context(perspective-viewer:not([settings])) {
    regular-table #psp-column-edit-buttons:after {
        content: none;
    }
}

/* Style the last row of the `<thead>` so that is has a bottom border. */
regular-table table thead tr:last-child:after {
    width: 10000px;
    box-sizing: border-box;
    display: block;
    height: var(--psp-datagrid--row--height, 23px);
    content: " ";
    border-bottom: 1px solid var(--psp-inactive--border-color);
}

/* Extend every row to the right edge of the page with a fake column. */
regular-table table tbody tr:after {
    width: 10000px;
    box-sizing: border-box;
    display: block;
    height: var(--psp-datagrid--row--height, 23px);
    content: " ";
    border-top: 1px solid transparent;
}

regular-table table tbody tr:not(:first-child):after {
    border-top: 1px solid var(--psp-inactive--border-color);
}

regular-table table tbody tr:hover:not(:first-child):after {
    border-top: 1px solid var(--psp-datagrid--hover--border-color);
}

regular-table table tbody tr:hover + tr:after {
    border-top: 1px solid var(--psp-datagrid--hover--border-color);
}

@keyframes pulse_pos {
    0% {
        background-color: var(
            --pulse--background-color-start,
            rgba(0, 128, 255, 0.5)
        );
    }

    100% {
        background-color: var(
            --pulse--background-color-end,
            rgba(0, 128, 255, 0)
        );
    }
}

@keyframes pulse_pos2 {
    0% {
        background-color: var(
            --pulse--background-color-start,
            rgba(0, 128, 255, 0.5)
        );
    }

    100% {
        background-color: var(
            --pulse--background-color-end,
            rgba(0, 128, 255, 0)
        );
    }
}

@keyframes pulse_neg {
    0% {
        background-color: var(
            --pulse--background-color-start,
            rgba(255, 25, 0, 0.5)
        );
    }

    100% {
        background-color: var(
            --pulse--background-color-end,
            rgba(255, 25, 0, 0)
        );
    }
}

@keyframes pulse_neg2 {
    0% {
        background-color: var(
            --pulse--background-color-start,
            rgba(255, 25, 0, 0.5)
        );
    }

    100% {
        background-color: var(
            --pulse--background-color-end,
            rgba(255, 25, 0, 0)
        );
    }
}