@perspective-dev/workspace 4.2.0 → 4.4.0

package/src/ts/workspace/workspace.ts

@@ -24,7 +24,7 @@ import type {
 } from "@perspective-dev/viewer";
 import type * as psp from "@perspective-dev/client";
 import type * as psp_viewer from "@perspective-dev/viewer";
-import injectedStyles from "../../../build/css/injected.css";
+import injectedStyles from "../../../dist/css/injected.css";
 import { PerspectiveDockPanel } from "./dockpanel";
 import { WorkspaceMenu } from "./menu";
 import { createCommands } from "./commands";
@@ -683,20 +683,23 @@ export class PerspectiveWorkspace extends SplitPanel {
 
     async _filterViewer(
         viewer: HTMLPerspectiveViewerElement,
-        filters: [string, string, string][],
+        removeFilters: psp.Filter[],
+        insertFilters: psp.Filter[],
         candidates: Set<string>,
     ) {
         const config = await viewer.save();
         const table = await viewer.getTable();
         const availableColumns = Object.keys(await table.schema());
         const currentFilters = config.filter || [];
-        const columnAvailable = (filter: [string, string, any]) =>
+        const columnAvailable = (filter: psp.Filter) =>
             filter[0] && availableColumns.includes(filter[0]);
 
-        const validFilters = filters.filter(columnAvailable);
+        const clearColumns = new Set<string>(removeFilters.map((f) => f[0]));
+        const validFilters = insertFilters.filter(columnAvailable);
         validFilters.push(
             ...currentFilters.filter(
-                (x: [string, ..._: string[]]) => !candidates.has(x[0]),
+                (x: [string, ..._: string[]]) =>
+                    !candidates.has(x[0]) && !clearColumns.has(x[0]),
             ),
         );
 
@@ -712,14 +715,21 @@ export class PerspectiveWorkspace extends SplitPanel {
         const candidates = new Set([
             ...(config["group_by"] || []),
             ...(config["split_by"] || []),
-            ...(config.filter || []).map((x: [string, string, any]) => x[0]),
+            ...(config.filter || []).map((x: psp.Filter) => x[0]),
         ]);
 
-        const filters = [...event.detail.config.filter];
+        const removeFilters = (
+            (event.detail.removeConfigs ?? []) as psp.ViewConfigUpdate[]
+        ).flatMap((x) => x.filter ?? []);
+        const insertFilters = (
+            (event.detail.insertConfigs ?? []) as psp.ViewConfigUpdate[]
+        ).flatMap((x) => x.filter ?? []);
+
         toArray(this.dockpanel.widgets()).forEach((widget) => {
             this._filterViewer(
                 (widget as PerspectiveViewerWidget).viewer,
-                filters,
+                removeFilters,
+                insertFilters,
                 candidates,
             );
         });

package/src/less/dockpanel.less

@@ -1,105 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-.lm-DockPanel {
-    overflow: var(--dock-panel--overflow, hidden);
-    position: absolute;
-    background-color: var(--detail--background-color, transparent);
-    padding: var(--workspace-spacing);
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    &[data-mode="single-document"] {
-        padding: 0px;
-    }
-}
-
-.lm-Widget,
-.lm-Widget {
-    cursor: inherit;
-}
-
-.lm-DockPanel.ew,
-.lm-DockPanel.ew .lm-Widget,
-.lm-SplitPanel.ew,
-.lm-SplitPanel.ew .lm-Widget {
-    cursor: ew-resize !important;
-}
-
-.lm-DockPanel.ns,
-.lm-DockPanel.ns .lm-Widget,
-.lm-SplitPanel.ns,
-.lm-SplitPanel.ns .lm-Widget {
-    cursor: ns-resize !important;
-}
-
-.workspace-master-widget {
-    min-width: 100px !important;
-}
-
-.lm-DockPanel.resizing ::slotted(perspective-viewer),
-.lm-SplitPanel.resizing ::slotted(perspective-viewer) {
-    pointer-events: none;
-}
-
-.widget-blur ::slotted(perspective-viewer) {
-    opacity: 0.5;
-}
-
-.lm-DockPanel-handle.resizing {
-    background-color: rgba(0, 0, 0, 0.05);
-}
-
-.perspective-scroll-panel {
-    overflow: auto !important;
-}
-
-.lm-Panel {
-    min-height: 100%;
-}
-
-.lm-DockPanel-handle {
-    background-color: none;
-}
-
-.lm-SplitPanel-handle {
-    background-color: var(--workspace-split-panel-handle--background-color);
-}
-
-.lm-SplitPanel-handle,
-.lm-DockPanel-handle {
-    transition: background-color 0.3s ease-out;
-    &:hover {
-        background-color: rgba(0, 0, 0, 0.05);
-    }
-}
-
-.lm-DockPanel-handle[data-orientation="horizontal"] {
-    width: 10px !important;
-    margin-left: -5px;
-}
-
-.lm-DockPanel-handle[data-orientation="vertical"] {
-    height: 10px !important;
-    margin-top: -5px;
-}
-
-.lm-DockPanel-overlay {
-    background: rgba(75, 75, 75, 0.2);
-    border: 1px dashed #666;
-    border-radius: 6px;
-    transition-property: top, left, right, bottom;
-    transition-duration: 50ms;
-    transition-timing-function: linear;
-    margin: 0px;
-}

package/src/less/menu.less

@@ -1,128 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@import "@lumino/widgets/style/menu.css";
-
-.lm-Menu {
-    font-size: 12px;
-    padding: 8px;
-    background-color: var(--plugin--background);
-    color: var(--icon--color);
-    border: 1px solid var(--inactive--color);
-    border-radius: 3px;
-    max-width: 350px;
-    top: 0;
-    left: 0;
-}
-
-.lm-Menu.perspective-workspace-menu {
-    .lm-Menu-item {
-        padding-left: 37px !important;
-        min-width: var(--min-width);
-    }
-}
-
-.lm-Menu-item.lm-mod-active {
-    background-color: var(--icon--color);
-    color: var(--plugin--background);
-}
-
-.lm-Menu-item.lm-mod-disabled {
-    opacity: 0.5;
-}
-
-.lm-Menu-itemIcon {
-    width: 24px;
-    height: 12px;
-    margin-right: 4px;
-}
-
-.lm-Menu-itemLabel {
-    flex: 1 1;
-    padding: 4px 2px 4px 2px;
-}
-
-.lm-Menu-itemMnemonic {
-    text-decoration: underline;
-}
-
-.lm-Menu-itemShortcut {
-    padding: 4px 0px;
-}
-
-.lm-Menu-itemSubmenuIcon {
-    width: 24px;
-    height: 18px;
-}
-
-.lm-Menu-item {
-    display: flex;
-    align-items: center;
-    outline: none;
-
-    margin: 0 -8px;
-    padding: 0 8px;
-}
-
-.lm-Menu-item[data-type="separator"] > div {
-    padding: 0;
-    height: 9px;
-}
-
-.lm-Menu-item[data-type="separator"] > div::after {
-    content: "";
-    display: block;
-    position: relative;
-    top: 4px;
-    border-top: 1px solid;
-}
-
-.lm-MenuBar-menu {
-    transform: translateY(-1px);
-}
-
-.lm-MenuBar-item {
-    padding: 10px 32px;
-    border-left: 1px solid transparent;
-    border-right: 1px solid transparent;
-    color: #737373 !important;
-}
-
-.lm-MenuBar-item.lm-mod-active {
-    background: rgba(0, 0, 0, 0.2);
-}
-
-.lm-MenuBar.lm-mod-active .lm-MenuBar-item.lm-mod-active {
-    z-index: 10001;
-    background: rgba(0, 0, 0, 0.2);
-    // border-left: 1px solid #c0c0c0;
-    // border-right: 1px solid #c0c0c0;
-}
-
-.lm-Menu-itemIcon:before {
-    content: attr(content);
-    font-family:
-        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
-        "Liberation Mono", monospace;
-}
-
-[data-type="submenu"] .lm-Menu-itemSubmenuIcon:before {
-    content: ">";
-    font-family:
-        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
-        "Liberation Mono", monospace;
-    height: 18px;
-}
-
-.lm-mod-drag-image.lm-TabBar-tab {
-    display: none;
-}

package/src/less/tabbar.less

@@ -1,389 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-.lm-TabBar-tabLabel {
-    background-color: transparent;
-    border: none;
-    color: var(--icon--color, #666);
-    cursor: pointer;
-    padding: 0px 6px;
-    margin: 0;
-    margin-left: 15.5px;
-    margin-right: auto;
-    flex: 0 1 auto;
-    border-radius: 3px;
-    &:hover {
-        background-color: var(--icon--color);
-        color: var(--plugin--background);
-    }
-}
-
-// .p-TabBar-tabLabel[value="[untitled]"] {
-//     color: #ddd !important;
-// }
-
-.lm-TabBar-tabLabel:focus {
-    outline: none;
-    color: var(--workspace-secondary--color, #666) !important;
-    cursor: text;
-}
-
-.lm-TabBar-tab.lm-mod-closable > .lm-TabBar-tabCloseIcon:before {
-    content: var(--close-button--content, "\2715");
-}
-
-.lm-TabBar-tab > .lm-TabBar-tabConfigIcon:before {
-    content: var(--open-settings-button--content, "\1F527");
-    font-family: var(--settings--font-family, "Arial");
-    transition: color 0.5s ease;
-}
-
-.lm-TabBar-tab.lm-mod-current.settings_open > .lm-TabBar-tabConfigIcon:before {
-    content: var(--close-settings-button--content, "\1F527");
-}
-
-.lm-TabBar-tab.lm-mod-current.linked > .lm-TabBar-tabConfigIcon:before {
-    color: #22a0ce;
-}
-
-.lm-TabBar-tab > .lm-TabBar-tabConfigIcon {
-    opacity: 0;
-    pointer-events: none;
-}
-
-.lm-TabBar-tab.lm-mod-current > .lm-TabBar-tabConfigIcon {
-    opacity: 1;
-    pointer-events: all;
-}
-
-.lm-mod-current {
-    .lm-TabBar-tabConfigIcon,
-    .lm-TabBar-tabCloseIcon {
-        color: inherit;
-        transition: color 0.2s ease-out;
-    }
-
-    .lm-TabBar-tabConfigIcon:hover,
-    .lm-TabBar-tabCloseIcon:hover {
-        color: #1a7da1;
-        transition: color 0.2s ease-out;
-    }
-}
-
-.lm-BoxPanel {
-    overflow: scroll !important;
-}
-
-.lm-TabBar,
-.lm-TabBar-tab {
-    position: relative;
-
-    overflow: visible !important;
-}
-
-.lm-TabBar-tabLabel:empty::after {
-    content: "untitled";
-    color: #aaa;
-}
-
-.lm-mod-current .lm-TabBar-tabLabel:empty::after {
-    color: #ddd;
-}
-
-.lm-TabBar-tabLabel:empty::after {
-    content: "untitled";
-}
-
-.divider {
-    left: 32px;
-    bottom: 0;
-    position: absolute;
-    right: 32px;
-
-    height: 1px;
-    background-color: var(--workspace-tabbar--border-color);
-    margin-bottom: 0px;
-}
-
-.lm-TabBar-tab .drag-handle {
-    pointer-events: all;
-    height: 12px;
-    width: 14px;
-    -webkit-mask-image: var(--column-drag-handle--mask-image);
-    mask-image: var(--column-drag-handle--mask-image);
-    padding: 12px 0 12px 12px;
-    background-repeat: no-repeat;
-    background-color: var(--icon--color, red);
-    content: "";
-    display: inline-block;
-    -webkit-mask-size: cover;
-    mask-size: auto;
-    mask-position: center;
-    mask-repeat: no-repeat;
-}
-
-.lm-TabBar {
-    // z-index: -1;
-    pointer-events: none;
-    .lm-TabBar-tabCloseIcon {
-        pointer-events: all;
-    }
-
-    .bookmarks-button {
-        pointer-events: all;
-    }
-}
-
-.lm-TabBar-tab.lm-mod-hidden {
-    display: flex !important;
-    opacity: 0.5;
-}
-
-.lm-TabBar-tab.lm-mod-current .divider {
-    display: block;
-}
-
-// .lm-TabBar-tabLabel input {
-//     height: 18px;
-// }
-
-// .lm-TabBar {
-//     // min-height: 0px !important;
-// }
-
-@border-color: 1px solid #eaeaea;
-@night-border-color: 1px solid #ddd;
-
-.pfm-button-base {
-    background: white !important;
-}
-
-.pfm-button-base:active {
-    background: #016bc6 !important;
-}
-
-.lm-TabBar-content {
-    padding: 0px;
-    border-bottom: 0px solid #fff !important;
-    border-left: #eaeaea;
-    border-right: #eaeaea;
-}
-
-.lm-TabBar-tab.lm-mod-current {
-    .shadow {
-        margin: -1px;
-        position: absolute;
-        width: calc(100% + 2px);
-        height: 200%;
-        pointer-events: none;
-        left: 0px;
-    }
-
-    &.settings_open .shadow {
-        box-shadow: none;
-    }
-}
-
-.lm-TabBar-tab {
-    // margin: 0px 4px;
-    border-color: #eaeaea;
-    align-items: center;
-}
-
-.lm-TabBar-content.inactive-blur > .lm-TabBar-tab {
-    background-color: var(
-        --workspace-inactive-blur--background-color,
-        transparent
-    );
-}
-
-.condensed .lm-TabBar-content {
-    & > .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabConfigIcon {
-        display: block;
-    }
-
-    & > .lm-TabBar-tab.lm-mod-current.settings_open {
-        .lm-TabBar-tabLabel {
-            margin-left: 0px;
-        }
-    }
-}
-
-.lm-TabBar-content > .lm-TabBar-tab.lm-mod-current.settings_open {
-    border-width: 1px 1px 0px 1px !important;
-    border-color: var(--workspace-tabbar--border-color, #ddd);
-
-    .lm-TabBar-tabToolbar {
-        display: flex;
-    }
-
-    .divider {
-        height: 1px;
-        margin-bottom: 0px;
-        background-color: var(--workspace-tabbar--border-color, #ddd);
-    }
-
-    &:last-child:first-child .divider {
-        transition: none;
-    }
-}
-
-.lm-TabBar-content > .lm-TabBar-tab.lm-mod-current.perspective_updating {
-    .lm-TabBar-tabConfigIcon {
-        display: none;
-    }
-
-    .lm-TabBar-tabLoadingIcon {
-        display: block;
-    }
-}
-
-.lm-TabBar-content > .lm-TabBar-tab {
-    max-width: 100000px !important;
-    flex: 0 1 100000px !important;
-    background: none;
-    color: #737373;
-    height: 40px !important;
-    max-height: 40px !important;
-    margin-bottom: -40px;
-    transform: none !important;
-    transition: color 0.2s ease-out;
-}
-
-.lm-TabBar-content > .lm-TabBar-tab {
-    color: #ccc;
-}
-
-.lm-TabBar-content > .lm-TabBar-tab {
-    color: #ccc;
-}
-
-.lm-TabBar-content > .lm-TabBar-tab:hover {
-    color: #ccc;
-}
-
-.lm-TabBar-content > .lm-TabBar-tab.lm-mod-current {
-    color: var(--workspace-secondary--color, #666);
-}
-
-.lm-TabBar-tab.lm-mod-current .lm-TabBar-tabLabel {
-    white-space: nowrap !important;
-}
-
-.lm-TabBar-tabLabel {
-    font-family: inherit;
-    font-size: 12px;
-    line-height: 22px;
-    text-align: start;
-    white-space: normal !important;
-    word-break: break-all;
-}
-
-.lm-TabBar-tabCloseIcon,
-.lm-TabBar-tabConfigIcon {
-    cursor: pointer !important;
-    line-height: 22px !important;
-    padding-right: 16.5px !important;
-}
-
-.lm-TabBar-tabConfigIcon {
-    padding-left: 8px;
-    padding-right: 8px !important;
-}
-
-.lm-TabBar-tabLoadingIcon {
-    padding-left: 11px;
-    padding-right: 12px;
-}
-
-.bottom .lm-TabBar-tab {
-    flex-basis: 10000px !important;
-    max-width: 10000px !important;
-}
-
-.lm-TabBar-content > .lm-TabBar-tab.lm-mod-current {
-    color: var(--workspace-tabbar--color, #666) !important;
-    // border: var(--workspace-tabbar--border, 1px solid #ddd);
-    // border-width: var(--workspace-tabbar-tab--border-width);
-    // box-shadow: 0 13px 0 -12px var(--inactive--border-color);
-    // border-radius: var(--workspace-tabbar--border-radius, 6px)
-    //     var(--workspace-tabbar--border-radius, 6px) 0 0;
-    // background-color: var(--workspace-tabbar--background-color, white);
-    background: none;
-    height: 40px !important;
-    max-height: 40px !important;
-    margin-bottom: -40px;
-    border: 0 solid transparent;
-    border-width: 1px 1px 0px 1px;
-}
-
-.bottom .lm-TabBar-tab.lm-mod-current {
-    border: none;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: #ccc;
-}
-
-.perspective-workspace.context-menu * .lm-TabBar.context-focus {
-    opacity: 1;
-}
-
-.perspective-workspace.context-menu * .lm-TabBar,
-.perspective-workspace.context-menu
-    .lm-Widget.workspace-widget:not(.context-focus)
-    .viewer-container {
-    opacity: 0.2;
-}
-
-@mixin icon {
-    background-repeat: no-repeat;
-    background-color: var(--icon--color);
-    content: "";
-    display: inline-block;
-    -webkit-mask-size: cover;
-    mask-size: cover;
-}
-
-.bookmarks-button {
-    margin-left: 11px;
-    margin-right: -13px;
-    height: 20px;
-    border-radius: 3px;
-    border: 1px solid var(--inactive--color);
-    background-color: var(--plugin--background);
-
-    &:hover {
-        background-color: var(--icon--color);
-        border-color: var(--icon--color);
-    }
-}
-
-.bookmarks {
-    @include icon;
-    cursor: pointer;
-    width: 20px;
-    height: 12px;
-    -webkit-mask-image: var(--bookmarks--mask-image);
-    mask-image: var(--bookmarks--mask-image);
-    -webkit-mask-position: center;
-    mask-position: center;
-    -webkit-mask-size: auto;
-    mask-size: auto;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    padding: 4px 6px;
-
-    &:hover {
-        background-color: var(--plugin--background);
-    }
-}