/********************************************************************************
 * Copyright (C) 2017, 2018 TypeFox and others.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * This Source Code may also be made available under the following Secondary
 * Licenses when the conditions for such availability set forth in the Eclipse
 * Public License v. 2.0 are satisfied: GNU General Public License, version 2
 * with the GNU Classpath Exception which is available at
 * https://www.gnu.org/software/classpath/license.html.
 *
 * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
 ********************************************************************************/

/*-----------------------------------------------------------------------------
| Variables
|----------------------------------------------------------------------------*/

:root {
    --g-private-sidebar-tab-width: 50px;
    --g-private-sidebar-tab-height: 32px;
    --g-private-sidebar-scrollbar-rail-width: 7px;
    --g-private-sidebar-scrollbar-width: 5px;
    --g-private-sidebar-icon-size: 28px;
}


/*-----------------------------------------------------------------------------
| SideBars (left and right)
|----------------------------------------------------------------------------*/

.p-TabBar.theia-app-sides {
    display: block;
    color: var(--g-activityBar-inactiveForeground);
    background: var(--g-activityBar-background);
    font-size: var(--g-ui-font-size1);
    min-width: var(--g-private-sidebar-tab-width);
    max-width: var(--g-private-sidebar-tab-width);

}

.p-TabBar.theia-app-sides .p-TabBar-content {
    z-index: 1;
}

.p-TabBar.theia-app-sides .p-TabBar-tab {
    position: relative;
    margin: 11px 8px;
    background: var(--g-activityBar-background);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: var(--g-private-sidebar-tab-height);
    cursor: pointer;
}

.p-TabBar.theia-app-left .p-TabBar-tab {
    border-left: var(--g-panel-border-width) solid transparent;
    transition: background .45s ease-in-out, color .45s ease-in-out;
    overflow: hidden;
    border-radius: 10px;
}

.p-TabBar.theia-app-left.theia-app-sides {
    /* border-right: var(--g-panel-border-width) solid var(--g-activityBar-border); */
    border-right: var(--g-border-width) solid var(--g-editor-lineColor);
}

.p-TabBar.theia-app-right .p-TabBar-tab {
    border-right: var(--g-panel-border-width) solid transparent;
}

.p-Widget.p-TabBar.theia-app-right.theia-app-sides {
    border-left: var(--g-panel-border-width) solid var(--g-activityBar-border);
}

.p-TabBar.theia-app-sides .p-TabBar-tab.p-mod-current,
.p-TabBar.theia-app-sides .p-TabBar-tab:hover {
    color: var(--g-activityBar-foreground);
    background-color: var(--g-activityBar-activeBackground);
    min-height: var(--g-private-sidebar-tab-height);
    height: var(--g-private-sidebar-tab-height);
    border-top: none;
}

.p-TabBar.theia-app-left .p-TabBar-tab.p-mod-current {
    /* border-left: var(--g-panel-border-width) solid var(--g-activityBar-activeBorder);
    border-top-color: transparent; */
    background-color: var(--g-selection-background);

}

.p-TabBar.theia-app-left .p-TabBar-tab.p-mod-current.theia-mod-active {
   /*  border-left: var(--g-panel-border-width) solid var(--g-focusBorder); */
}

.p-TabBar.theia-app-right .p-TabBar-tab.p-mod-current {
    border-right: var(--g-panel-border-width) solid var(--g-activityBar-activeBorder);
    border-top-color: transparent;
}

.p-TabBar.theia-app-right .p-TabBar-tab.p-mod-current.theia-mod-active {
    border-right: var(--g-panel-border-width) solid var(--g-focusBorder);
}

.p-TabBar.theia-app-sides .p-TabBar-tabLabel,
.p-TabBar.theia-app-sides .p-TabBar-tabCloseIcon {
    display: none;
}

/* inactive common icons */
.p-TabBar.theia-app-sides .p-TabBar-tabIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    text-align: center;
    color: inherit;
    background-color: var(--g-activityBar-inactiveForeground);

    /* svg */
    width: var(--g-private-sidebar-icon-size);
    height: var(--g-private-sidebar-icon-size);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: var(--g-private-sidebar-icon-size);
    -webkit-mask-size: var(--g-private-sidebar-icon-size);
    transition: background .45s ease-in-out, color .45s ease-in-out;
}

/* inactive file icons */
.p-TabBar.theia-app-sides .file-icon.p-TabBar-tabIcon {
    background: inherit !important;
}

/* inactive font-awesome icons */
.p-TabBar.theia-app-sides .fa.p-TabBar-tabIcon {
    background: none !important;
}

/* active icons */
.p-TabBar.theia-app-sides .p-TabBar-tab:hover .p-TabBar-tabIcon,
.p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon {
    color: var(--g-activityBar-foreground);
    background-color: var(--g-activityBar-foreground);
}

.p-TabBar.theia-app-left .p-TabBar-tabLabel {
    transform-origin: top left 0;
    transform: rotate(-90deg) translateX(-100%);
}

.p-TabBar.theia-app-right .p-TabBar-tabLabel {
    transform-origin: top left 0;
    transform: rotate(90deg) translateY(-50%);
}

#theia-left-content-panel, #theia-right-content-panel {
    border-radius: var(--g-panel-radius);
    overflow: hidden;
    border: var(--g-border-width) solid var(--g-editor-lineColor);
}

#theia-left-content-panel .p-DockPanel .p-DockPanel-widget,
#theia-right-content-panel .p-DockPanel .p-DockPanel-widget {
    border: none;
}

#theia-left-content-panel.theia-mod-collapsed,
#theia-right-content-panel.theia-mod-collapsed {
    max-width: var(--g-private-sidebar-tab-width);
}

.theia-side-panel {
    background-color: var(--g-sideBar-background);
}

.p-Widget.theia-side-panel .p-Widget,
.p-Widget .theia-sidepanel-toolbar {
    color: var(--g-sideBar-foreground);
}


/*-----------------------------------------------------------------------------
| Perfect scrollbar
|----------------------------------------------------------------------------*/

.p-TabBar.theia-app-sides > .ps__rail-y {
    width: var(--g-private-sidebar-scrollbar-rail-width);
    z-index: 1000;
}

#theia-app-shell .p-TabBar.theia-app-sides > .ps__rail-y > .ps__thumb-y {
    width: var(--g-private-sidebar-scrollbar-width);
    right: calc((var(--g-private-sidebar-scrollbar-rail-width) - var(--g-private-sidebar-scrollbar-width)) / 2);
}

.p-TabBar.theia-app-sides > .ps__rail-y:hover,
.p-TabBar.theia-app-sides > .ps__rail-y:focus {
    width: var(--g-private-sidebar-scrollbar-rail-width);
}

.p-TabBar.theia-app-sides > .ps__rail-y:hover > .ps__thumb-y,
.p-TabBar.theia-app-sides > .ps__rail-y:focus > .ps__thumb-y {
    width: var(--g-private-sidebar-scrollbar-width);
    right: calc((var(--g-private-sidebar-scrollbar-rail-width) - var(--g-private-sidebar-scrollbar-width)) / 2);
}


/*-----------------------------------------------------------------------------
| Bottom content panel
|----------------------------------------------------------------------------*/

/* #theia-bottom-content-panel {
    border-radius: var(--g-panel-radius);
    overflow: hidden;
    border: var(--g-border-width) solid var(--g-editor-lineColor);
} */

.p-DockPanel .p-DockPanel-widget {
    border-radius: 0 0 var(--g-panel-radius) var(--g-panel-radius);
    border: var(--g-border-width) solid var(--g-editor-lineColor);
    background-color: var(--g-sideBar-background);
}

#theia-left-side-panel.p-DockPanel .p-DockPanel-widget {
    border: none;
    border-radius: 0;
    background-color: inherit;
}

#theia-bottom-content-panel .theia-input {
    border-color: var(--g-panelInput-border);
}

#theia-bottom-content-panel .p-DockPanel-handle[data-orientation='horizontal'] {
    border-left: var(--g-border-width) solid var(--g-panel-border);
}

/*-----------------------------------------------------------------------------
| Hidden tab bars used for rendering vertical side bars
|----------------------------------------------------------------------------*/

.theia-TabBar-hidden-content {
    display: flex;
    position: absolute;
    visibility: hidden;
}

.p-TabBar.theia-app-sides > .theia-TabBar-hidden-content .p-TabBar-tab {
    line-height: var(--g-private-sidebar-tab-width);
}

.p-TabBar.theia-app-left > .theia-TabBar-hidden-content .p-TabBar-tabLabel {
    transform: none;
}

.p-TabBar.theia-app-right > .theia-TabBar-hidden-content .p-TabBar-tabLabel {
    transform: none;
}

/*-----------------------------------------------------------------------------
| Sidepanel Toolbar
|----------------------------------------------------------------------------*/

.theia-sidepanel-toolbar {
    min-height: calc(var(--g-private-horizontal-tab-height) + var(--g-private-horizontal-tab-scrollbar-rail-height) / 2);
    display: flex;
    padding-left: 5px;
    align-items: center;
    background-color: var(--g-sideBarTitle-foreground);
    border-top: solid var(--g-border-width) var(--g-editor-lineColor) !important;
    border-bottom: solid var(--g-border-width) var(--g-editor-lineColor) !important;
}

.theia-sidepanel-toolbar .theia-sidepanel-title {
    color: var(--g-settings-headerForeground);
    flex: 1;
    margin-left: 14px;
    text-transform: uppercase;
    font-size: var(--g-ui-font-size0);
}

.theia-sidepanel-toolbar .p-TabBar-toolbar .item {
    color: var(--g-icon-foreground);
}

.theia-sidepanel-toolbar .p-TabBar-toolbar .item > div {
    height: 18px;
    width: 18px;
    background-repeat: no-repeat;
}

.noWrapInfo {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}