@perspective-dev/viewer 4.0.0

package/src/less/config-selector.less

@@ -0,0 +1,363 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 {
+    #top_panel.dragdrop-highlight {
+        .psp-text-field {
+            border-bottom-color: var(--icon--color) !important;
+        }
+
+        .pivot-column-border {
+            border-color: var(--icon--color) !important;
+        }
+    }
+
+    #top_panel {
+        display: flex;
+        flex-direction: column;
+        justify-content: stretch;
+        padding: 0px 0px 12px 0px;
+        max-width: 1000px;
+        z-index: 1;
+
+        .row_close {
+            margin: 0 6.5px 4px 6.5px;
+            cursor: pointer;
+            height: 14px;
+        }
+
+        .row_close:before {
+            height: 14px;
+            width: 14px;
+            background-repeat: no-repeat;
+            background-color: var(--icon--color);
+            content: "";
+            -webkit-mask-size: cover;
+            mask-size: cover;
+            display: inline-block;
+            -webkit-mask-image: var(--column-checkbox-on--mask-image);
+            mask-image: var(--column-checkbox-on--mask-image);
+        }
+
+        .row_close:hover:before {
+            -webkit-mask-image: var(--column-checkbox-hover--mask-image);
+            mask-image: var(--column-checkbox-hover--mask-image);
+        }
+
+        .pivot-column {
+            display: inline-flex;
+            align-items: center;
+            min-height: 28px;
+            position: relative;
+
+            .pivot-column-border {
+                flex: 1 1 auto;
+                overflow: hidden;
+                background-color: var(--plugin--background);
+                border: 1px solid var(--inactive--color, #ababab);
+                border-radius: 2px;
+                display: flex;
+                align-items: center;
+                position: relative;
+                padding-right: 8px;
+
+                .column_name {
+                    display: block;
+                }
+
+                .input-sizer {
+                    flex: 1 100000 auto;
+                }
+            }
+
+            &:hover .pivot-column-border {
+                border-color: var(--icon--color);
+            }
+
+            .pivot-column-draggable {
+                position: relative;
+                width: calc(100% - 27px);
+                min-height: 28px;
+                padding-bottom: 4px;
+                display: flex;
+                align-items: stretch;
+                cursor: move;
+            }
+
+            &:not(.column-empty) .pivot-column-border:before {
+                flex: 0 0 auto;
+                height: 12px;
+                width: 5px;
+                -webkit-mask-image: var(--column-drag-handle--mask-image);
+                mask-image: var(--column-drag-handle--mask-image);
+                margin: 0px 0 0 6px;
+                background-repeat: no-repeat;
+                background-color: var(--icon--color);
+                content: "";
+                display: inline-block;
+                -webkit-mask-size: cover;
+                mask-size: cover;
+            }
+
+            span {
+                white-space: nowrap;
+            }
+
+            span:first-child {
+                text-overflow: ellipsis;
+                // max-width: 250px;
+                overflow: hidden;
+            }
+
+            // Column is being dragged-over, e.g. this is the drop indicator.
+            & .config-drop {
+                background-color: #8b868045;
+                margin-right: 7px;
+                margin-bottom: 4px;
+                border: 1px solid var(--icon--color);
+                border-radius: 2px;
+                overflow: visible;
+                flex: 1 1 auto;
+                align-self: stretch;
+                position: relative;
+                &:before {
+                    content: " ";
+                    position: absolute;
+                    z-index: -1;
+                    top: 5px;
+                    left: 5px;
+                    right: 5px;
+                    bottom: 5px;
+                    border-radius: 2px;
+                    background-color: var(--icon--color);
+                    opacity: 0.3;
+                }
+
+                & > * {
+                    color: transparent;
+                }
+            }
+        }
+
+        label.pivot-selector-label {
+            pointer-events: none;
+        }
+
+        #group_by label.pivot-selector-label:before {
+            content: var(--group-by-label--content, "Group By");
+        }
+
+        #split_by label.pivot-selector-label:before {
+            content: var(--split-by-label--content, "Split By");
+        }
+
+        #sort label.pivot-selector-label:before {
+            content: var(--sort-label--content, "Order By");
+        }
+
+        #filter label.pivot-selector-label:before {
+            content: var(--filter-label--content, "Where");
+        }
+
+        .highlight-drop {
+            background-color: rgba(0, 0, 0, 0.5);
+        }
+
+        .rrow {
+            display: flex;
+            min-height: 24px;
+            align-items: center;
+            list-style: none;
+            padding: 24px 0px 12px 0px;
+
+            span[draggable] {
+                cursor: move;
+            }
+        }
+
+        .rrow > div {
+            display: flex;
+            min-height: 24px;
+            flex-direction: column;
+            justify-content: flex-end;
+        }
+
+        .rrow > * {
+            width: 100%;
+            padding: 0;
+            margin: 0px 0px -12px 0px;
+        }
+
+        .psp-text-field ul {
+            min-height: 20px;
+        }
+
+        .psp-text-field {
+            position: relative;
+            border-width: 0;
+            border-style: solid;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            min-height: 24px;
+            background-size: 100% 200%;
+        }
+
+        .psp-text-field > .psp-text-field__input {
+            flex-direction: column;
+            justify-content: stretch;
+            border: 0px;
+            line-height: 20px;
+            vertical-align: bottom;
+            padding-bottom: 0px;
+            display: none;
+            margin: 0;
+            padding: 0 0 0 0;
+            min-height: 26px;
+            // margin-bottom: -1px;
+
+            // // Comma separators
+            // &> :not(.config-drop):after {
+            //     width: 0px;
+            //     content: ",";
+            // }
+
+            // &> :last-child:after {
+            //     display: none;
+            //     content: "" !important;
+            // }
+        }
+
+        .psp-text-field__input + label {
+            width: 0px;
+            height: 20px;
+            line-height: 17px;
+            box-sizing: border-box;
+            // color: var(--inactive--color);
+            white-space: nowrap;
+            padding: var(--column-drop-container--padding, 0px);
+            font-size: var(--label--font-size, 0.75em);
+            display: inline-block;
+        }
+
+        .psp-text-field__input {
+            display: flex !important;
+        }
+
+        .psp-text-field__input + label {
+            position: absolute;
+            top: 0px;
+            margin: var(--column-drop-label--margin, -16px 0px 0px 0px);
+            font-size: var(--label--font-size, 0.75em);
+            display: inline-block;
+        }
+
+        #transpose_button {
+            cursor: pointer;
+            flex-grow: 0;
+            font-family: inherit;
+            font-size: var(--label--font-size, 0.75em);
+            user-select: none;
+            padding: 0;
+            align-self: center;
+            margin-bottom: -23px;
+            margin-top: 11.5px;
+            align-self: flex-end;
+            z-index: 1;
+            min-height: 0px;
+            margin-right: 30px;
+
+            &:hover:before {
+                color: var(--icon--color, inherit);
+            }
+
+            &:before {
+                font-family: var(--button--font-family, inherit);
+                color: var(--inactive--color, #666);
+                content: var(--transpose-button--content, "Swap");
+            }
+        }
+    }
+
+    .sort-icon {
+        display: inline-flex;
+        margin-left: auto;
+        // margin-right: 8px;
+        cursor: pointer;
+        font-family: var(--button--font-family, inherit);
+
+        &:hover {
+            opacity: 1;
+            color: var(--active--color, inherit);
+        }
+
+        &:before {
+            @include icon;
+            width: 16px;
+            height: 16px;
+        }
+
+        &.desc:before {
+            -webkit-mask-image: var(--sort-desc-icon--mask-image);
+            mask-image: var(--sort-desc-icon--mask-image);
+        }
+
+        &.asc:before {
+            -webkit-mask-image: var(--sort-asc-icon--mask-image);
+            mask-image: var(--sort-asc-icon--mask-image);
+        }
+
+        &.none:before {
+            -webkit-mask-image: var(--sort-none-icon--mask-image);
+            mask-image: var(--sort-none-icon--mask-image);
+        }
+
+        &.asc.abs:before {
+            -webkit-mask-image: var(--sort-abs-asc-icon--mask-image);
+            mask-image: var(--sort-abs-asc-icon--mask-image);
+        }
+
+        &.desc.abs:before {
+            -webkit-mask-image: var(--sort-abs-desc-icon--mask-image);
+            mask-image: var(--sort-abs-desc-icon--mask-image);
+        }
+
+        &.col.asc:before {
+            -webkit-mask-image: var(--sort-col-asc-icon--mask-image);
+            mask-image: var(--sort-col-asc-icon--mask-image);
+        }
+
+        &.col.desc:before {
+            -webkit-mask-image: var(--sort-col-desc-icon--mask-image);
+            mask-image: var(--sort-col-desc-icon--mask-image);
+        }
+
+        &.col.asc.abs:before {
+            -webkit-mask-image: var(--sort-abs-col-asc-icon--mask-image);
+            mask-image: var(--sort-abs-col-asc-icon--mask-image);
+        }
+
+        &.col.desc.abs:before {
+            -webkit-mask-image: var(--sort-abs-col-desc-icon--mask-image);
+            mask-image: var(--sort-abs-col-desc-icon--mask-image);
+        }
+    }
+}

package/src/less/containers/dropdown-menu.less

@@ -0,0 +1,94 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 {
+    position: fixed;
+    z-index: 10000;
+    outline: none;
+    font-size: 0.75em;
+    border: inherit;
+    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    user-select: none;
+    background-color: white;
+    padding: 8px;
+
+    display: flex;
+    flex-direction: column;
+    min-width: 80px;
+
+    code {
+        font-family: var(--interface-monospace--font-family), monospace;
+    }
+
+    input {
+        margin: 0;
+        padding: 0;
+        border: none;
+        border-bottom: 1px solid var(--inactive--color, #ccc);
+        background: transparent;
+        font-family: var(--interface-monospace--font-family), monospace;
+        color: inherit;
+        outline: none;
+    }
+
+    .invalid {
+        color: var(--error--color, #ff0000);
+        border-color: var(--error--color, #ff0000);
+    }
+
+    .selected {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    .dropdown-group-label {
+        color: var(--inactive--color);
+
+        &:not(:first-of-type) {
+            margin-top: 16px;
+        }
+    }
+
+    .dropdown-group-container {
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+    }
+
+    span {
+        min-height: 22px;
+        display: inline-flex;
+        align-items: center;
+        margin: 0 -8px;
+        padding: 0 8px;
+    }
+
+    .dropdown-group-container span {
+        cursor: pointer;
+    }
+
+    .no-results {
+        font-style: italics;
+        padding: 6px 24px;
+        color: #ccc;
+    }
+}
+
+:host(:hover) {
+    .selected {
+        background-color: transparent;
+    }
+
+    .dropdown-group-container span:hover {
+        background-color: var(--icon--color);
+        color: var(--plugin--background);
+    }
+}

package/src/less/containers/pairs-list.less

@@ -0,0 +1,46 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+.pairs-list {
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .pairs-list-header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: solid 1px var(--inactive--border-color);
+        margin-bottom: 12px;
+    }
+
+    .pairs-list-item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: 4px;
+        width: 100%;
+        margin-bottom: 4px;
+
+        &:last-child .is_column_active {
+            opacity: 0.3;
+            cursor: default;
+            pointer-events: none;
+        }
+    }
+}

package/src/less/containers/radio-list.less

@@ -0,0 +1,29 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 {
+    .radio-list-item {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+
+        // Fix radio buttons
+        input[type="radio"] {
+            width: 16px;
+            margin: 0 4px 0 0;
+        }
+
+        input[type="radio"][disabled] ~ * {
+            opacity: 0.5;
+        }
+    }
+}

package/src/less/containers/scroll-panel.less

@@ -0,0 +1,27 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 {
+    .scroll-panel-container {
+        will-change: transform;
+        width: 100%;
+    }
+
+    .scroll-panel-auto-width {
+        height: 1px;
+        margin-top: -1px;
+    }
+
+    .scroll-panel-content {
+        position: relative;
+    }
+}

package/src/less/containers/split-panel.less

@@ -0,0 +1,80 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 {
+    #modal_panel.split-panel.orient-reverse
+        > .split-panel-child:not(:last-child):not(.is-width-override) {
+        max-width: 350px;
+    }
+
+    .split-panel.orient-reverse
+        > .split-panel-child:not(:last-child):not(.is-width-override) {
+        max-width: 300px;
+    }
+
+    .split-panel {
+        display: flex;
+        height: 100%;
+        width: 100%;
+
+        &.orient-vertical {
+            flex-direction: column;
+
+            & > .split-panel-child {
+                flex: 0 1 auto;
+            }
+
+            & > .split-panel-divider:hover {
+                cursor: row-resize;
+            }
+        }
+
+        &.orient-reverse {
+            flex-direction: row-reverse;
+        }
+
+        &.orient-vertical.orient-reverse {
+            flex-direction: column-reverse;
+        }
+
+        & > * {
+            flex: 0 1 auto;
+        }
+
+        &:not(.orient-vertical) > *:first-child {
+            flex: 0 0 auto;
+        }
+
+        // The thing you click to drag the panel size.
+        .split-panel-divider {
+            flex: 0 0 6px;
+            transition: background-color 0.2s ease-out;
+            z-index: var(--settings-panel-z-index);
+
+            &:hover {
+                background-color: rgba(0, 0, 0, 0.05);
+                cursor: col-resize;
+            }
+        }
+
+        // Make the elements embedded in each child stretch to fill the
+        // container
+        .split-panel-child {
+            position: relative;
+            display: flex;
+
+            & > * {
+                flex: 1 1 auto;
+            }
+        }
+    }
+}