/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
 * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
 * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
 * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
 * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
 * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
 * ┃ 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";

:host {
    .lm-Menu {
        font-size: 12px;
        padding: 8px;
        background-color: var(--psp--background-color);
        color: var(--psp--color);
        border: 1px solid var(--psp-inactive--color);
        border-radius: 3px;
        max-width: 350px;
        top: 0;
        left: 0;
    }

    .lm-Menu.perspective-workspace-menu {
        .lm-Menu-item {
            padding-left: 37px !important;
        }
    }

    .lm-Menu-item.lm-mod-active {
        background-color: var(--psp--color);
        color: var(--psp--background-color);
    }

    .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;
    }
}
