/**
 * Copyright (c) 2012-2018 Red Hat, Inc.
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 *
 * Contributors:
 *   Red Hat, Inc. - initial API and implementation
 */
@external .blueColored, .greenColored, .redColored, .changeOnHover, .leftToolbarPart, .toolbarActionGroupPanel, .centerToolbarPart, .toolbarActionGroupPanel;
@eval greenIconColor org.eclipse.che.ide.api.theme.Style.getSuccessEventColor();

.toolbarPanel {
    width: 100%;
    height: 100%;
    cursor: default;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
    border-top: 1px solid tabBorderColor;
    border-bottom: 1px solid tabBorderColor;
    background-color: toolbarBackgroundColor;
    background-image: toolbarBackgroundImage;
}

.leftToolbarPart,
.centerToolbarPart,
.rightToolbarPart {
    height: inherit;
    font-size: fontSize;
    display: inline-flex;
}

.leftToolbarPart {
    float: left;
}

.rightToolbarPart {
    float: right;
}

.leftToolbarPart .toolbarActionGroupPanel,
.centerToolbarPart .toolbarActionGroupPanel {
    margin: auto 0 auto 14px;
}

.rightToolbarPart .toolbarActionGroupPanel {
    margin: auto 14px auto 0;
}

.toolbarPanel a {
    color: outputLinkColor;
}

.toolbarDelimiter {
    width: 0;
    margin: 2px;
    height: 18px;
    padding: 0 !important;
    border-left: 1px solid tabBorderColor;
    border-right: 1px solid tabBorderShadow;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.toolbarActionGroupPanel {
    background-color: toolbarActionGroupBackgroundColor;
    border: 1px solid toolbarActionGroupBorderColor;
    display: inherit;
    line-height: 22px;
    height: 22px;
}

.toolbarActionGroupPanel > div {
    margin: auto 4px auto 4px;
}

.toolbarActionGroupPanel > div:hover > svg {
    fill: toolbarHoverIconColor;
}

.toolbarActionGroupPanel > div:hover path {
    fill: toolbarHoverIconColor;
}

.toolbarActionGroupPanel svg.redColored,
.toolbarActionGroupPanel svg .redColored {
    fill: redIconColor;
}

.toolbarActionGroupPanel > div > svg .blueColored {
     fill: blueIconColor;
 }

.toolbarActionGroupPanel > div .blueColored path {
    fill: blueIconColor;
}

.toolbarActionGroupPanel > div:hover > svg .changeOnHover.greenColored {
    fill: greenIconColor;
}

.toolbarActionGroupPanel > div:hover .changeOnHover.greenColored path {
    fill: greenIconColor;
}

.toolbarPanel > div > div {
    display: inherit;
    height: inherit;
}

.toolbarPanel .iconButtonPanel,
.toolbarPanel .iconButtonPanelDown,
.toolbarPanel .iconButtonPanelSelected,
.toolbarPanel .iconButtonPanelSelectedDown {
    width: 18px;
    height: 18px;
    overflow: hidden;
    text-align: center;
}

.iconButtonPanel,
.iconButtonPanelDown,
.iconButtonPanelSelected,
.iconButtonPanelSelectedDown {
    width: 18px;
    height: 18px;
}

.iconButtonPanel {
    border: none;
}

.tooltip {
   display: none;
}

.iconButtonPanel:hover .tooltip,
.popupButtonPanel:hover .tooltip {
    position: fixed;
    top: initial !important;
    left: initial !important;
    display: inline-block;
    margin-top: 14px;
    margin-left: -8px;
}

.iconButtonPanel:hover .tooltipBody,
.popupButtonPanel:hover .tooltipBody {
    display: inline-block;
    position: relative;
    cursor: default;
    padding: 8px;
    font-size: 8pt;
    font-weight: normal;
    white-space: nowrap;
    background: tooltipBackgroundColor;
    font-family: mainFontFamily;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    margin: inherit;
    line-height: initial;
}

.iconButtonPanel:hover .tooltipArrow,
.popupButtonPanel:hover .tooltipArrow {
    display: inline-block;
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-width: 9px;
    border-style: solid;
    border-color: transparent transparent tooltipBackgroundColor transparent;
    top: -16px;
    float:left;
    margin: inherit;
}

.iconButtonPanelDown,
.iconButtonPanelSelected,
.iconButtonPanelSelectedDown {
}

.iconButtonPanelDown svg,
.iconButtonPanelSelected svg,
.iconButtonPanelSelectedDown svg {
    -moz-filter: toolbarSelectedIconFilter;
    -webkit-filter: toolbarSelectedIconFilter;
    filter: toolbarSelectedIconFilter;
}

.iconButtonIcon {
    width: toolbarIconSize;
    height: toolbarIconSize;
    margin: 3px;
}

svg.iconButtonIcon {
    width: toolbarIconSize;
    height: toolbarIconSize;
    fill: toolbarIconColor;
    margin-top: 1px;
    margin-left: auto;
    margin-right: auto;
}

.iconButtonIcon path {
    fill: toolbarIconColor;
}

.iconButtonIconInner,
.popupButtonIconInner {
    width: toolbarIconSize;
    height: toolbarIconSize;
    font-size: toolbarIconSize;
    line-height: toolbarIconSize;
    margin-right: auto;
    color: toolbarIconColor;
}

.iconButtonIconInner {
    margin-top: 1px;
    margin-left: auto;
}

.popupButtonIconInner {
    margin-top: 2px;
    margin-left: 3px;
}

.iconButtonIconInner:HOVER,
.popupButtonIconInner:HOVER {
    color: toolbarHoverIconColor;
}

.disabled {
}

.disabled .iconButtonIconInner {
    opacity: 0.6;
}

.disabled svg {
    opacity: 0.6;
    fill: toolbarIconColor !important;
}

.disabled path {
    opacity: 0.6;
    fill: toolbarIconColor;
}

.popupButtonPanel,
.popupButtonPanelDown {
    height: 22px;
    width: 30px;
    border: 1px solid transparent;
    position: relative;
}

.popupButtonPanel {
    background-position: 0 0;
}

.popupButtonPanelDown {
}

.popupButtonPanelDown svg {
    -moz-filter: toolbarSelectedIconFilter;
    -webkit-filter: toolbarSelectedIconFilter;
    filter: toolbarSelectedIconFilter;
}

.popupButtonIcon {
    width: toolbarIconSize;
    height: toolbarIconSize;
    padding-top: 3px;
    padding-left: 2px;
}

svg.popupButtonIcon {
    width: toolbarIconSize;
    height: toolbarIconSize;
    fill: toolbarIconColor;
    margin-right: 2px;
}

.popupButtonIcon path {
    fill: toolbarIconColor;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    right: 2px;
    float: right;
    border-top: 4px solid toolbarIconColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
    position: absolute;
    top: 50%;
}
