/*
 * Copyright (C) 2015 denkbares GmbH, Germany
 *
 * This is free software; you can redistribute it and/or modify it under the
 * terms of the GNU Lesser General Public License as published by the Free
 * Software Foundation; either version 3 of the License, or (at your option) any
 * later version.
 *
 * This software is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this software; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA, or see the FSF
 * site: http://www.fsf.org.
 */

#rightPanel {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--border-color-light);
	background-color: var(--bg-color-default-Markup);
	padding-left: 4px;
	color: var(--text-color-default-head);
	z-index: 500;
}

.dark-mode #rightPanel {
	background-color: var(--bg-color-primary-shade) !important;
}

#rightPanel .right-panel-resize-handle {
	position: absolute;
	top: 0;
	left: 0;
	width: 8px;
	height: 100%;
	cursor: col-resize;
	z-index: 501;
	background: transparent;
}

#rightPanel .right-panel-resize-handle:hover {
	background-color: rgba(0, 0, 0, 0.08);
}

#rightPanel.right-panel-bottom .right-panel-resize-handle {
	display: none;
}

body.right-panel-resizing {
	user-select: none;
	cursor: col-resize;
}

#rightPanel[hidden] {
	display: none;
}

#rightPanel .right-panel-tablist {
	display: flex;
	flex: 0 0 auto;
	overflow-x: auto;
	scrollbar-width: thin;
	background-color: transparent;
	margin-bottom: 0.5rem;
}

#rightPanel .right-panel-tablist:not(:has(button ~ button)) {
	display: none;
}

#rightPanel .right-panel-tablist button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1 0 auto;
	padding: 5px 9px;
	cursor: pointer;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--text-color-secondary);
	font-weight: normal;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}

#rightPanel .right-panel-tablist button:hover {
	color: var(--text-color-default-head);
	background-color: var(--hover-bg-color-btn-default);
}

#rightPanel .right-panel-tablist button[data-active] {
	/* distinguish by accent color + underline only; deliberately no font-weight change, which would
	   alter the label's intrinsic width and shift the tabs when switching */
	color: var(--text-color-default-head);
	border-bottom-color: var(--text-color-default-head);
}

#rightPanel .right-panel-tab {
	flex: 1 1 auto;
	min-height: 0;
	padding: 2px 4px;
	overflow-y: auto;
	scrollbar-width: thin;
}

/* only one tab body is shown at a time; !important so a tab's own content CSS (e.g. a client-rendered
   tab that sets display:flex on its body) cannot override the panel's hide of inactive tabs */
#rightPanel .right-panel-tab[hidden] {
	display: none !important;
}

#rightPanel .right-panel-tablist.icons-only .right-panel-tab-label {
	display: none;
}

#rightPanel .rightpanelhide {
	position: absolute;
	top: -18px;
	right: 2px;
	cursor: pointer;
	z-index: 500;
}

#rightPanel .rightpanelhide span {
	top: 1px;
}

#rightPanel .rightpanelhide:hover > span {
	color: var(--hover-text-color-header-icons) !important;
}

#rightPanel .rightpanelhide img {
	position: relative;
	top: 3px;
}

#rightPanel .topbar {
	position: relative;
	padding-top: 3px;
	padding-bottom: 3px;
	cursor: pointer;
	background: var(--bg-color-secondary);
	background-image: -webkit-gradient(linear, left top, left bottom, from(var(--bg-color-default-Markup)), to(var(--bg-color-secondary))); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, var(--bg-color-default-Markup), var(--bg-color-secondary)); /* Chrome 10+, Saf5.1+ */
	background-image: -moz-linear-gradient(top, var(--bg-color-default-Markup), var(--bg-color-secondary)); /* FF3.6+ */
	background-image: -ms-linear-gradient(top, var(--bg-color-default-Markup), var(--bg-color-secondary)); /* IE10 */
	background-image: -o-linear-gradient(top, var(--bg-color-default-Markup), var(--bg-color-secondary)); /* Opera 11.10+ */
	background-image: linear-gradient(to bottom, var(--bg-color-default-Markup), var(--bg-color-secondary)); /* W3C */
	background-position: 100% 0%;
	background-size: cover;
	border-top: 1px solid var(--border-color-light);
	background-color: var(--bg-color-default-Markup);
}

#rightPanel .topbar .title {
	color: var(--text-color-primary);
	font-weight: bold;
	margin-left: 4px;
}

#rightPanel .topbar .title i {
	color: var(--text-color-primary);
	font-weight: bold;
	margin-right: 0px;
}

#rightPanel .topbar .title i:before {
	position: relative;
	bottom: 1px;
}

#rightPanel .collapseicon {
	position: relative;
	top: 2px;
	padding-right: 2px
}

#rightPanel .tool {
	position: relative;
	left: -4px;
	width: 103%;
	background-color: var(--bg-color-base);
}

#rightPanel .right-panel-content {
	position: relative;
	padding-right: 2px;
	height: 100%;
}