/*!
 * windowTitleBar.css
 * Copyright 2017 - 2020 by ChartIQ, Inc.
 * All rights reserved.
 */
@import url("./linkerWindow.css");
@import url("./defaultTheme.css");
@import url("./core/icons.css");
@import url("./font-finance.css");
@import url("./fonts/Open_Sans/OpenSans-Definition.css");

/* .fsbl-app-region is only used by e2e tests */

/* This gets added to draggable areas if useDOMBasedMovement is turned off in config */
.fsbl-no-dom-movement {
	-webkit-app-region: drag;
}

/* 100px minimum. flex-grow will fill up available space to the right */
.fsbl-guaranteed-drag-area {
	min-width: 100px;

	/* if, for whatever reason, no tabs appear then this will ensure that the drag region has height to grab */
	min-height: 20px;
	flex-grow: 1;
}

.fsbl-tab-region {
	width: 100%;
	display: inline-block;
}

.fsbl-tab-region-tabbing-disabled {
	text-align: center;
}

.fsbl-tab-region-tabbing-enabled {
	text-align: left;
	display: flex;
}

#FSBLHeader {
	color: white;
}

.fsbl-header {
	font-family: var(--font-family);
	font-size: var(--titleBar-font-size);
	font-weight: var(--titleBar-font-weight);
	text-align: center;
	display: flex;
	height: var(--titleBar-height);
	position: fixed;
	align-items: flex-end;
	flex-direction: row;
	justify-content: space-between;
	background: var(--titleBar-background-inactive-color);
	width: 100%;
	left: 0;

	/* This ensures that the window title bar is always the top DOM element on a page. This can be important when the 
	title bar is injected. While we have code to shift app content downward, that code is not 100% reliable. This z-index
	then ensures that the window is at least always operable even if the content isn't properly shifted */
	z-index: 2147483639;
	top: 0;
	color: var(--titleBar-inactive-font-color);
}

.fsbl-header div {
	flex-direction: row;
	flex-shrink: unset;
}

.fsbl-header-left {
	height: calc(100% - 5px); /* leave some space for the resize cursor */
	margin-left: 2px;
	left: 0;
	align-content: center;
	align-items: center;
	justify-content: flex-start;
	display: flex;
	color: aqua;
}

.fsbl-header-center {
	overflow: hidden;
	height: 100%;
	align-content: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	user-select: none;
	position: relative;
}

.fsbl-tabs-enabled .fsbl-header-center {
	height: 100%;
	width: 100%;
	padding-bottom: 0;
}

.fsbl-tab-region-control {
	display: flex;
	cursor: pointer;
	align-items: center;
	padding: 0 5px;
	margin: 0 5px;
}

.fsbl-header-right {
	margin-right: 2px;
	height: calc(100% - 5px); /* leave some space for the resize cursor */
	align-content: center;
	display: flex;
	justify-content: flex-end;
	z-index: 5;
}

/* Offset the contents back up, to make up for half the resize cursor offset */
.fsbl-header-right > * {
	margin-top: -2px;
}

.fsbl-icon {
	position: relative;
	color: var(--titleBar-inactive-font-color);
	font-size: var(--titleBar-icon-font-size);
	width: 10px;
	padding: 0 6px;
	height: calc(100% + 1px);
	margin-top: -3px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
	cursor: pointer;
	/* stylelint-disable-next-line declaration-no-important */
	box-sizing: content-box !important;
}

.fsbl-icon svg path {
	fill: var(--titlebar-icon-color);
}

.fsbl-icon:hover {
	color: var(--titlebar-icon-hover-color);
}

/* So it sits over the border */
.fsbl-icon.fsbl-close {
	margin-right: -1px;
}

.fsbl-icon.fsbl-close:hover {
	color: var(--titleBar-button-hover-negative-color);
}

.fsbl-icon-highlighted {
	transition: background-color 300ms ease-in-out;
	background-color: var(--titleBar-button-highlight-inactive-color);
	border-radius: 25px;
	color: var(--titlebar-icon-hover-color);
}

.fsbl-minimize {
	align-items: center;
	margin-top: -2px;
	transition: 0.2s all;
}

.linkerSection {
	display: flex;
	height: 100%;
	cursor: pointer;
}

.linker-groups {
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	margin-top: -2px;
}

.linker-group {
	width: 3px;
	height: 13px;
	margin-left: 3px;
	border-radius: 4px;
	border: 1px solid transparent;
	box-sizing: content-box; /* otherwise any box-sizing on the page can override how our linker appears */
}

.linker-group-accessible {
	/* stylelint-disable-next-line declaration-no-important */
	width: 1em !important;
	padding-bottom: 4px;
	margin-bottom: 4px;
	color: var(--titleBar-linker-font-color);
	display: block;
}

.linkerContainer {
	justify-content: center;
	align-items: flex-start;
}

.linker-group:hover {
	cursor: pointer;
	border: 1px solid var(--content-button-neutral-hover-color);
}

.linker-group:nth-last-child(1) {
	margin-right: 5px;
}

.fsbl-linker {
	cursor: pointer;
	display: flex;

	/* So it sits over the border */
	align-items: center;
	justify-content: center;
	align-content: center;
	transition: background 0.3s ease;
	position: relative;
	width: 12px;
	border-radius: 20px;
	margin-right: 2px;
}

.fsbl-share {
	cursor: pointer;
	display: flex;

	/* So it sits over the border */
	align-items: center;
	justify-content: center;
	align-content: center;
	transition: background 0.3s ease;
	position: relative;
	width: 14px;
	border-radius: 20px;
	margin-right: 2px;
}

.fsbl-share > svg {
	margin-top: 1px;
}

.fsbl-linker svg #prefix__a {
	fill: var(--titleBar-linker-font-color);
}

.fsbl-linker svg #prefix__b {
	fill: var(--titleBar-linker-font-color-blur);
}

.fsbl-linker:hover, /* deprecated */
.fsbl-share:hover {
	background-color: var(--titleBar-button-hover-active-color);
}

.ff-minimize {
	padding-bottom: 3px;
}

.ff-linker::before {
	padding-top: 3px;
}

.ff-share::before {
	padding-top: 3px;
}

.ff-maximize,
.ff-close,
.ff-detached,
.ff-attached {
	padding-top: 2px;
	transition: 0.2s all;
}

.ff-always-on-top {
	padding-top: 3px;
	font-size: 11px;
}

.ff-restore {
	padding-top: 4px;
}

.fsbl-tab {
	height: 100%;
	padding-left: 8px;
	position: relative;
	display: inline-flex;
	align-content: center;
	align-items: center;
	vertical-align: top;
	background-color: var(--titlebar-tab-inactive-background-color);
	color: var(--titlebar-tab-inactive-font-color);
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	user-select: none;
	box-sizing: border-box;
	justify-content: flex-start;
	transition: color 0.2s ease;
	transition: transform 0.2s ease-in-out;
	max-width: max-content;
	min-width: 72px;

	/* This is important, otherwise flex box expands the final tab, causing scroll buttons to appear when they aren't necessary */
	overflow: hidden;
}

/* The gap that appears in the final, right-most, position in the tab region when dragging. */
.fsbl-tab-gap[data-display="true"] {
	background-color: var(--titlebar-tab-active-background-color);
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	height: 23px;
}

.fsbl-active-tab {
	background-color: var(--titlebar-tab-active-background-color);
	color: var(--titlebar-tab-active-font-color);
}

.fsbl-tab-title {
	text-align: left;
	padding-left: 1px;
	padding-right: 4px;
	display: inline-flex;
	align-items: center;

	/*	min-width: 20px; */
	color: var(--titlebar-tab-inactive-font-color);
}

.fsbl-open-tab {
	width: 100px;
}

.fsbl-tab-title-text {
	margin-right: 5px;
}

/* The block below allows for a flex-child to have text truncated with an ellipsis. */
.fsbl-tab-title .fsbl-tab-title-text {
	flex: 1;
	font-weight: 600;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	/* Explaining the use of the weird looking
	transition: 0s all;
	transition-delay: 0.2s;

	A slightly differently approach to "transition: 2s all;" on .ff-close which has the effect of keeping the close
	button around for a split second after mouse out. Not exactly the same but a close approx (there is slight almost
	unnoticeable delay in showing the close button) Change done to address
	https://cosaic.kanbanize.com/ctrl_board/106/cards/48113/details/ (The ellipsis for long tab titles goes under the
	close button). Syncing the animation timing on the close button (visibility, a discrete value) and the title width
	(via padding, a continuous value) looked bad the other way
	 */
	transition: 0s all;
	transition-delay: 0.2s;
}

div.fsbl-tab-close .ff-close {
	transition: all 0.2s ease-in;
}

div.fsbl-tab-close {
	font-size: 8px;
	padding: 0 7px;
	visibility: hidden;
	cursor: pointer;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	right: 0;

	/** This transition is critical. Without it, a user can click on a tab and accidentally close it. This happens if you click in the vicinity
	of the close button when a different window currently has focus. This transition ensures that the close button isn't visible at the time
	that such a click occurs. */
	transition: visibility 0s ease 0.5s;

	/* z-index: 30001; */
	background-color: var(--titlebar-tab-hover-background-color);
}

.fsbl-tab-close:hover {
	-webkit-text-stroke: 1px;
}

.fsbl-tab:hover > .fsbl-tab-close {
	visibility: visible;
}

/* Hovering will be disabled by the react component if the element is too thin and not the promoted tab */
.fsbl-tab:hover[data-show-close-button="false"] > .fsbl-tab-close {
	visibility: hidden;
}

/* Styles the zoom pop up */
.fsbl-zoom-popup {
	display: none;
	position: absolute;
	top: -15px;
	right: 10px;
	background-color: var(--tertiary-background-color);
	padding: 5px;
	color: var(--font-color);
	opacity: 0.8;
	font-size: 0.9em;
}

.fsbl-zoom-popup button {
	width: unset;
	font-size: unset;
	padding: 1px 5px;
	margin: 0 2px;
}

.fsbl-zoom-popup-text {
	margin-left: 3px;
}

.fsbl-zoom-popup-title {
	margin-left: 0;
}

.fsbl-zoom-popup-heading {
	margin-left: 4px;
	margin-bottom: 4px;
}

/* Responsive Sizing */

/* At 345px, the Drag-to-Share icon will be removed. */
@media screen and (width >= 0) and (width <= 345px) {
	.fsbl-icon.ff-share {
		/* stylelint-disable-next-line declaration-no-important */
		display: none !important;
	}
}

/* At 310px, the left section of the header will be removed. */
@media screen and (width <= 310px) {
	.fsbl-header-left {
		/* stylelint-disable-next-line declaration-no-important */
		display: none !important;
	}
}

/* At 280px, the docking icon will be removed. */
@media screen and (width <= 280px) {
	.fsbl-icon.ff-detached,
	.fsbl-icon.ff-attached {
		/* stylelint-disable-next-line declaration-no-important */
		display: none !important;
	}
}

/* At 245px, the maximize icon will be removed. */
@media screen and (width <= 245px) {
	.fsbl-icon.fsbl-maximize {
		/* stylelint-disable-next-line declaration-no-important */
		display: none !important;
	}
}

/* At 210px, all other icons icon will be removed. */
@media screen and (width <= 210px) {
	.fsbl-icon.fsbl-minimize {
		/* stylelint-disable-next-line declaration-no-important */
		display: none !important;
	}

	.fsbl-icon.fsbl-always-on-top {
		/* stylelint-disable-next-line declaration-no-important */
		display: none !important;
	}

	.fsbl-icon.fsbl-clone {
		/* stylelint-disable-next-line declaration-no-important */
		display: none !important;
	}

	.icon-avatar-wrapper {
		/* stylelint-disable-next-line declaration-no-important */
		display: none !important;
	}
}

.finsemble-toolbar .icon-avatar {
	padding: 3px;
	font-size: 7px;
	position: relative;
}

.finsemble-toolbar .icon-avatar > i {
	position: relative;
	top: 1px;
}

.finsemble-toolbar .icon-avatar-wrapper {
	align-items: normal;
}

/* Do not attempt to animate the input's width. Doing so can cause the input tag to disappear due to stray clicks
that blur the input while animating */
input.fsbl-tab-input {
	font-size: 12px;
	margin-top: 1px;
	width: 100%;
	border-right: 2px solid gray;
	border-bottom: 2px solid #73c3ff;
	color: white;
	transition: none;
	background-color: #353434;
}

input.fsbl-tab-input:focus {
	outline: none;
}

.fsbl-tabs-container {
	display: flex;
	align-items: center;
}

.fsbl-tabs-scroll-surround {
	--webkit-app-region: no-drag;

	overflow: hidden;
}

.fsbl-tab-region-tabbing-enabled .fsbl-tab {
	display: flex;
	white-space: nowrap;
}

.fsbl-tab-scroll-button {
	--webkit-app-region: no-drag;

	background-color: transparent;
	color: var(--titleBar-active-font-color);
}

.fsbl-tab-scroll-button:disabled {
	color: var(--titleBar-inactive-font-color);
}
