/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
 * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
 * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
 * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
 * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
 * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
 * ┃ 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 {
    .lm-TabBar-tabLabel {
        background-color: transparent;
        border: none;
        color: var(--psp--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(--psp--color);
            color: var(--psp--background-color);
        }
    }

    /* .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(--psp-workspace--tabbar--border-color);
        margin-bottom: 0px;
    }

    .lm-TabBar-tab .drag-handle {
        pointer-events: all;
        height: 12px;
        width: 14px;
        -webkit-mask-image: var(--psp-icon--column-drag-handle--mask-image);
        mask-image: var(--psp-icon--column-drag-handle--mask-image);
        padding: 12px 0 12px 12px;
        background-repeat: no-repeat;
        background-color: var(--psp--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;
    }

    .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(--psp-workspace--tabbar--border-color, #ddd);

        .lm-TabBar-tabToolbar {
            display: flex;
        }

        .divider {
            height: 1px;
            margin-bottom: 0px;
            background-color: var(--psp-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(--psp-workspace--tabbar--border, 1px solid #ddd); */
        /* border-width: var(--psp-workspace--tabbar-tab--border-width); */
        /* box-shadow: 0 13px 0 -12px var(--psp-inactive--border-color); */
        /* border-radius: var(--psp-workspace--tabbar--border-radius, 6px) */
        /*     var(--psp-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;
    }

    .bookmarks-button {
        margin-left: 11px;
        margin-right: -13px;
        height: 20px;
        border-radius: 3px;
        border: 1px solid var(--psp-inactive--color);
        background-color: var(--psp--background-color);

        &:hover {
            background-color: var(--psp--color);
            border-color: var(--psp--color);
        }
    }

    .bookmarks {
        background-repeat: no-repeat;
        background-color: var(--psp--color);
        content: "";
        display: inline-block;
        -webkit-mask-size: cover;
        mask-size: cover;
        cursor: pointer;
        width: 20px;
        height: 12px;
        -webkit-mask-image: var(--psp-icon--bookmarks--mask-image);
        mask-image: var(--psp-icon--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(--psp--background-color);
        }
    }
}
