// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
// ┃ 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 {
    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 21.5px;
    background-repeat: no-repeat;
    background-color: var(--inactive--color, red);
    content: "";
    display: inline-block;
    -webkit-mask-size: cover;
    mask-size: cover;
}

.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: 40px !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;
    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: 6px 6px 0 0;
    background-color: var(--workspace-tabbar--background-color, white);
    height: 40px !important;
    max-height: 40px !important;
}

.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;
    border-radius: 3px;
    height: 22px;

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

.bookmarks {
    cursor: pointer;
    @include icon;
    width: 26px;
    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: 5px;

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