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 {
    #column_settings_sidebar {
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 4;

        #attributes-button-panel {
            flex: 0 0 auto;
            margin-top: 4px;
        }

        #attributes-tab {
            flex-direction: column;
            display: flex;
            overflow: hidden;
        }

        #attributes-tab > .split-panel-child {
            min-height: 200px;
            flex: 0 1 auto;
        }

        /* NOTE: These should probably make their way to global form styling eventually. */
        .errored {
            outline-color: var(--psp-error--color);
        }

        .item_title {
            flex: 0 0 auto;
            font-size: var(--label--font-size, 0.75em);
        }

        input {
            &[type="text"],
            &[type="search"] {
                outline: 1px solid;
                outline-color: var(--psp-inactive--color);
                background-color: var(--psp--background-color);
                border: none;
                margin-bottom: 0.5em;
                font-family: inherit;
                font-size: 1em;
                &:disabled {
                    background-color: var(--psp-inactive--color);
                }
            }

            &[type="search"] {
                min-height: 24px;
                border-radius: 2px;
            }

            &::-webkit-search-cancel-button {
                cursor: pointer;
            }
        }

        .sidebar_header_contents {
            display: flex;
            margin: 8px;
            align-items: center;
            border-radius: 3px;
            outline-width: 1px;
            outline-color: var(--psp-inactive--color);

            &.editable {
                &:hover {
                    outline-style: solid;
                    cursor: text;
                }
            }
            &:focus {
                outline-style: solid;
                background: var(--psp--background-color);
            }
            &.edited {
                outline-style: dashed;
            }
            &.invalid {
                outline-color: var(--psp-error--color);
            }

            .sidebar_header_title {
                line-height: normal;
                margin: 0;
                flex: 1;
                padding-left: 5px;
                background: none;
                outline: none;
                color: unset;

                &:disabled {
                    background: none;
                    outline: none;
                    color: unset;
                }
            }
        }
    }

    label#color-label:before {
        content: var(--psp-label--color--content, "Color");
    }

    label#format-label:before {
        content: var(--psp-label--format--content, "Format");
    }

    label#timezone-label:before {
        content: var(--psp-label--timezone--content, "Timezone");
    }

    label#date-style-label:before {
        content: var(--psp-label--date-style--content, "Date Style");
    }

    label#time-style-label:before {
        content: var(--psp-label--time-style--content, "Time Style");
    }

    label#foreground-label:before {
        content: var(--psp-label--foreground--content, "Foreground");
    }

    label#background-label:before {
        content: var(--psp-label--background--content, "Background");
    }

    label#series-label:before {
        content: var(--psp-label--series--content, "Series");
    }

    label#color-range-label:before {
        content: var(--psp-label--color-range--content, "Color Range");
    }

    label#style-label:before {
        content: var(--psp-label--style--content, "Style");
    }

    label#minimum-integer-digits-label:before {
        content: var(
            --psp-label--minimum-integer-digits--content,
            "Minimum Integer Digits"
        );
    }

    label#rounding-increment-label:before {
        content: var(
            --psp-label--rounding-increment--content,
            "Rounding Increment"
        );
    }

    label#notation-label:before {
        content: var(--psp-label--notation--content, "Notation");
    }

    label#use-grouping-label:before {
        content: var(--psp-label--use-grouping--content, "Use Grouping");
    }

    label#sign-display-label:before {
        content: var(--psp-label--sign-display--content, "Sign Display");
    }

    label#aggregate-depth-label:before {
        content: var(--psp-label--aggregate-depth--content, "Aggregate Depth");
    }

    label#max-value-label:before {
        content: var(--psp-label--max-value--content, "Max Value");
    }

    label#rounding-priority-label:before {
        content: var(
            --psp-label--rounding-priority--content,
            "Rounding Priority"
        );
    }

    label#rounding-mode-label:before {
        content: var(--psp-label--rounding-mode--content, "Rounding Mode");
    }

    label#trailing-zero-display-label:before {
        content: var(
            --psp-label--trailing-zero-display--content,
            "Trailing Zero Display"
        );
    }

    label#significant-digits-label:before {
        content: var(
            --psp-label--significant-digits--content,
            "Significant Digits"
        );
    }

    label#fractional-digits-label:before {
        content: var(
            --psp-label--fractional-digits--content,
            "Fractional Digits"
        );
    }

    label#year-label:before {
        content: var(--psp-label--year--content, "Year");
    }

    label#month-label:before {
        content: var(--psp-label--month--content, "Month");
    }

    label#day-label:before {
        content: var(--psp-label--day--content, "Day");
    }

    label#weekday-label:before {
        content: var(--psp-label--weekday--content, "Weekday");
    }

    label#hour-label:before {
        content: var(--psp-label--hour--content, "Hour");
    }

    label#minute-label:before {
        content: var(--psp-label--minute--content, "Minute");
    }

    label#second-label:before {
        content: var(--psp-label--second--content, "Second");
    }

    label#fractional-seconds-label:before {
        content: var(
            --psp-label--fractional-seconds--content,
            "Fractional Seconds"
        );
    }

    label#hours-label:before {
        content: var(--psp-label--hours--content, "12/24 Hours");
    }

    div.tab-title#Style:before {
        content: var(--psp-label--style-tab--content, "Style");
    }

    div.tab-title#Attributes:before {
        content: var(--psp-label--attributes-tab--content, "Attributes");
    }
}