perspective-viewer 4.4.1

/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
 * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
 * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
 * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
 * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
 * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
 * ┃ 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 {
    #settings_panel {
        #plugin_selector_container.open ~ * {
            opacity: 0;
        }

        #plugin_selector_container {
            min-height: var(
                --psp-plugin-selector--height,
                var(--psp-status-bar--height, 48px)
            );
            display: flex;
            white-space: nowrap;
            flex-direction: column;
            flex: 0 0 auto;

            /* Overflow the padding bounds of the container */
            /* TODO these bounds exist to protext the resizer and scrollbar (left & */
            /* right resp) but we really should find a way to remove it and delegate */
            /* to sub-containers. */
            margin: 0 0px 0 -9px;

            #plugin_selector_border {
                height: 2px;
                min-height: 2px;
                width: 100%;
                background-color: var(--psp-inactive--color, #6e6e6e);
                margin-top: 2px;
            }

            .plugin-selector-options {
                overflow-y: auto;
            }

            &.open {
                position: absolute;
                margin: 0;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;

                /* This element is first in the container but visually "overlaps" */
                /* when expanded */
                z-index: 3;
                color: var(--psp--color, #042121);
                /* background: var(--psp--background-color); */

                .plugin-select-item {
                    padding-left: 8px;
                }
            }

            .plugin-select-item-name {
                padding-left: 10px;
                font-size: 1.33333em;
            }

            .plugin-select-item-name:before {
                /* This value is set in a `style` tag from Yew! */
                content: var(--default-column-title);
            }

            .plugin-select-item {
                /* width: 48px; */
                padding-left: 9px;
                height: var(
                    --psp-plugin-selector--height,
                    var(--psp-status-bar--height, 48px)
                );
                min-height: var(
                    --psp-plugin-selector--height,
                    var(--psp-status-bar--height, 48px)
                );
                display: flex;
                align-items: center;
                border-bottom: 1px solid transparent;
                box-shadow: 0px 1px var(--psp-inactive--color, #6e6e6e);
                cursor: pointer;
            }

            .plugin-select-item > .icon {
                display: inline-block;
                -webkit-mask-size: cover;
                mask-size: cover;
                background-repeat: no-repeat;
                background-color: var(--psp--color);
            }

            .plugin-select-item:hover {
                background-color: var(--psp--color, #042121);
                color: var(--psp--background-color, #fdfffd);
            }

            .plugin-select-item:hover > .icon {
                background-color: var(--psp--background-color, #fdfffd);
            }

            .plugin-select-item[data-plugin="Candlestick"] > .icon {
                -webkit-mask-image: var(
                    --psp-plugin-selector--candlestick--content
                );
                mask-image: var(--psp-plugin-selector--candlestick--content);
                &:before {
                    content: var(--psp-plugin-selector--candlestick--content);
                    visibility: hidden;
                }
            }

            .plugin-select-item[data-plugin="Heatmap"] > .icon {
                -webkit-mask-image: var(
                    --psp-plugin-selector--heatmap--content
                );
                mask-image: var(--psp-plugin-selector--heatmap--content);
                &:before {
                    content: var(--psp-plugin-selector--heatmap--content);
                    visibility: hidden;
                }
            }

            .plugin-select-item[data-plugin="Map Scatter"] > .icon {
                -webkit-mask-image: var(
                    --psp-plugin-selector--map-scatter--content
                );
                mask-image: var(--psp-plugin-selector--map-scatter--content);
                &:before {
                    content: var(--psp-plugin-selector--map-scatter--content);
                    visibility: hidden;
                }
            }

            .plugin-select-item[data-plugin="OHLC"] > .icon {
                -webkit-mask-image: var(--psp-plugin-selector--ohlc--content);
                mask-image: var(--psp-plugin-selector--ohlc--content);
                &:before {
                    content: var(--psp-plugin-selector--ohlc--content);
                    visibility: hidden;
                }
            }

            .plugin-select-item[data-plugin="Sunburst"] > .icon {
                -webkit-mask-image: var(
                    --psp-plugin-selector--sunburst--content
                );
                mask-image: var(--psp-plugin-selector--sunburst--content);
                &:before {
                    content: var(--psp-plugin-selector--sunburst--content);
                    visibility: hidden;
                }
            }

            .plugin-select-item[data-plugin="Treemap"] > .icon {
                -webkit-mask-image: var(
                    --psp-plugin-selector--treemap--content
                );
                mask-image: var(--psp-plugin-selector--treemap--content);
                &:before {
                    content: var(--psp-plugin-selector--treemap--content);
                    visibility: hidden;
                }
            }

            .plugin-select-item[data-plugin="X Bar"] > .icon {
                -webkit-mask-image: var(--psp-plugin-selector--x-bar--content);
                mask-image: var(--psp-plugin-selector--x-bar--content);
                &:before {
                    content: var(--psp-plugin-selector--x-bar--content);
                    visibility: hidden;
                }
            }

            .plugin-select-item[data-plugin="X/Y Line"] > .icon {
                -webkit-mask-image: var(
                    --psp-plugin-selector--x-y-line--content
                );
                mask-image: var(--psp-plugin-selector--x-y-line--content);
                &:before {
                    content: var(--psp-plugin-selector--x-y-line--content);
                    visibility: hidden;
                }
            }

            .plugin-select-item[data-plugin="X/Y Scatter"] > .icon {
                -webkit-mask-image: var(
                    --psp-plugin-selector--x-y-scatter--content
                );
                mask-image: var(--psp-plugin-selector--x-y-scatter--content);
                &:before {
                    content: var(--psp-plugin-selector--x-y-scatter--content);
                    visibility: hidden;
                }
            }

            .plugin-select-item[data-plugin="Y Area"] > .icon {
                -webkit-mask-image: var(--psp-plugin-selector--y-area--content);
                mask-image: var(--psp-plugin-selector--y-area--content);
                &:before {
                    content: var(--psp-plugin-selector--y-area--content);
                    visibility: hidden;
                }
            }

            .plugin-select-item[data-plugin="Y Bar"] > .icon {
                -webkit-mask-image: var(--psp-plugin-selector--y-bar--content);
                mask-image: var(--psp-plugin-selector--y-bar--content);
                &:before {
                    content: var(--psp-plugin-selector--y-bar--content);
                    visibility: hidden;
                }
            }

            .plugin-select-item[data-plugin="Y Line"] > .icon {
                -webkit-mask-image: var(--psp-plugin-selector--y-line--content);
                mask-image: var(--psp-plugin-selector--y-line--content);
                &:before {
                    content: var(--psp-plugin-selector--y-line--content);
                    visibility: hidden;
                }
            }

            .plugin-select-item[data-plugin="Y Scatter"] > .icon {
                -webkit-mask-image: var(
                    --psp-plugin-selector--y-scatter--content
                );
                mask-image: var(--psp-plugin-selector--y-scatter--content);
                &:before {
                    content: var(--psp-plugin-selector--y-scatter--content);
                    visibility: hidden;
                }
            }

            .plugin-select-item[data-plugin="Datagrid"] > .icon {
                -webkit-mask-image: var(
                    --psp-plugin-selector--datagrid--content
                );
                mask-image: var(--psp-plugin-selector--datagrid--content);
                &:before {
                    content: var(--psp-plugin-selector--datagrid--content);
                    visibility: hidden;
                }
            }
        }

        #plugin_selector {
            flex-grow: 1;
        }
    }
}