@import "../Theme/Theme.scss";

$container-header-tab-bar-height: 32px;

div.app-container {
	width: 100%;
	height: 100%;
	display: flex;
	overflow: hidden;
	box-sizing: border-box;

	div.drag-bar {
		width: 0;
		height: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		div {
			position: relative;
			z-index: 10;
			width: 100%;
			height: 100%;
			border: 2px solid rgba($color: #000000, $alpha: 0);
			transition: all 300ms ease-in-out;
		}

		div:hover {
			background-color: blue;
		}
	}

	div.app-tab-header {
		height: $container-header-tab-bar-height;
		min-height: $container-header-tab-bar-height;
		flex-shrink: 1;
		width: 100%;
		display: flex;
		user-select: none;
		
		div.app-tab-header-item {
			height: 100%;
			box-sizing: border-box;
			display: flex;
			border: .8px solid rgba($color: #000000, $alpha: 0);
			// transition: all 300ms ease-in-out;
			justify-content: space-between;
			align-items: stretch;
			flex-direction: column;
			cursor: pointer;

			div.border-view {
				position: relative;
				display: flex;
				justify-content: center;
				flex-direction: row;
				max-height: 0;
				height: 0;
			}

			div.border-view::after {
				content: "";
				width: 100%;
				box-sizing: border-box;
				height: 32.8px;
				border: .8px solid rgba($color: #000000, $alpha: 0);
				// transition: all 300ms ease-in-out;
			}

			div.title-view {
				padding: 0 10px;
				display: inline-block;
				vertical-align: middle;
				position: relative;
				transition: all 300ms ease-in-out;
				word-break: keep-all;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				z-index: 1;
			}
		}

		div.app-tab-header-item.active {
			border: .8px solid blue;
			transition: none;
		}

		div.app-tab-header-item::after {
			content: "";
			width: 0;
			height: 0;
			display: block;
		}
	}

	div.app-panel.has-padding {
		padding: 10px;
	}

	div.app-panel {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		overflow: scroll;
		-ms-overflow-style: none;
		border: .8px solid rgba($color: #000000, $alpha: 0);
	}

	div.app-panel.hide-scrollbar::-webkit-scrollbar {
		width : 0;  /*高宽分别对应横竖滚动条的尺寸*/
		height: 0;
	}
	
	div.app-panel::-webkit-scrollbar {
		width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
  		height: 0;
	}

	div.app-panel::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 8px;
	}

	div.app-panel::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		border-radius: 8px;
		background-color: rgba($color: #000000, $alpha: 0);
	}

	div.app-panel.active {
		border: .8px solid blue !important;
	}
}

div.dark.app-container.end-containe {
	border: .8px solid $lt-bg-color-lvl3-dark;

	div.app-tab-header-item.tab,
	div.app-tab-header-item.active,
	div.app-tab-header-item:hover {
		transition: none;
		background-color: $lt-bg-color-lvl4-dark;
		color: rgba($color: #FFFFFF, $alpha: .85);
	}
	
	div.app-tab-header-item.active {
		div.border-view::after {
			background-color: $lt-bg-color-lvl4-dark;
			transition: none;
		}
	}

	div.app-panel::-webkit-scrollbar-thumb {
		background-color: $lt-bg-color-lvl1-dark;
	}
}

div.light.app-container.end-containe {
	border: .8px solid $lt-bg-color-lvl3-light;

	div.app-tab-header-item.tab,
	div.app-tab-header-item.active,
	div.app-tab-header-item:hover {
		transition: none;
		color: rgba($color: #000000, $alpha: .85);
	}

	div.app-tab-header-item.active {
		div.border-view::after {
			background-color: $lt-bg-color-lvl4-light;
			transition: none;
		}
	}

	div.app-panel::-webkit-scrollbar-thumb {
		background-color: $lt-bg-color-lvl1-light;
	}
}