@import "~scss/_mixins";

.header { 
	position: sticky; top: 0px; right: 0px; width: 100%; z-index: 20; user-select: none; display: flex; flex-direction: row; align-items: center; 
	justify-content: stretch;
}

.header {
	.sides { height: 100%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: stretch; }
	.side {	height: 100%; display: flex; align-items: center; flex-direction: row; }
	.side.left { padding: 0px 16px; width: 20%; flex-shrink: 0; gap: 0px 8px; }
	.side.center { width: 60%; flex-grow: 1; justify-content: center; }
	.side.right { padding: 0px 12px; width: 20%; flex-shrink: 0; justify-content: end; gap: 0px 8px; }
	.side.right {
		.button.blank { font-weight: 500; border: 0px; padding: 0px 6px; color: var(--color-text-secondary); flex-shrink: 0; }
	}

	.path { 
		width: 66%; display: inline-block; border-radius: 6px; height: 28px; line-height: 26px; transition: $transitionAllCommon;
		@include text-overflow-nw; padding: 0px 6px; -webkit-app-region: no-drag;
	}
	.path {
		.lock { @include text-small; color: var(--color-text-secondary); padding: 3px 6px 3px 20px; border-radius: 4px; background: var(--color-shape-tertiary) url('~img/icon/lock.svg') 6px 6px no-repeat;  }
	}

	.tabs { @include text-paragraph; display: inline-flex; flex-direction: row; align-items: center; height: 100%; -webkit-app-region: no-drag; }
	.tabs {
		.tab { 
			font-weight: 700; color: var(--color-control-active); transition: $transitionAllCommon; text-align: center;
			vertical-align: top; padding: 0px 16px; display: flex; align-items: center; height: 100%; border-bottom: 1px solid rgba(0,0,0,0);
		}
		.tab:hover { color: var(--color-text-primary); }
		.tab.active { color: var(--color-text-primary); border-color: var(--color-text-primary); }
	}

	.headerBanner {
		position: relative; display: flex; align-items: center; gap: 0px 16px; height: 32px; padding: 6px 10px; @include text-small; border-radius: 6px; background: var(--color-shape-tertiary);
		-webkit-app-region: no-drag; 
	}
	.headerBanner {
		.label { @include text-overflow-nw; }

		.content { display: flex; gap: 0px 4px; align-items: center; }
		.content {
			.typeName { display: flex; gap: 0px 4px; flex-wrap: nowrap; }
			.typeName {
				.name { font-weight: 600; }
			}
		}
		.action { font-weight: 500; }
	}
	.headerBanner.withMenu { padding-right: 24px; }
	.headerBanner.withMenu:after { content: ''; position: absolute; right: 10px; top: 12px; width: 8px; height: 8px; background-image: url('~img/arrow/button/black.svg'); }
	.headerBanner.withMenu.active:after { transform: rotateZ(180deg); }

	.icon { -webkit-app-region: no-drag; flex-shrink: 0; }
	.icon.more { background-image: url('~img/icon/header/more.svg'); }
	.icon.settings { background-image: url('~img/icon/header/settings.svg'); }
	.icon.expand { display: none; background-image: url('~img/icon/header/expand.svg'); }
	.icon.relation { background-image: url('~img/icon/header/relation.svg'); }
	.icon.graph { background-image: url('~img/icon/menu/action/graph0.svg'); }
}

.header.sidebarAnimation {
	.side.left { transition: padding-left $transitionSidebarTime linear; }
}

.header:not(.withSidebarLeft) {
	.side.left { padding-left: 156px; }
}

html:not(.platformMac) {
	.header:not(.withSidebarLeft) {
		.side.left { padding-left: 88px; }
	}
}

body.isFullScreen {
	.header:not(.withSidebarLeft) {
		.side.left { padding-left: 88px; }
	}
}

.header.authIndex { height: 52px; width: 100% !important; }

html:not(.bodyIndexIndex):not(.bodyAuthSelect) {
	.header.authIndex {
		.icon.settings { display: none; }
	}
}

.header.mainHistory { height: 52px; width: calc(100% - $sidebarRightWidth); right: $sidebarRightWidth; background: var(--color-bg-primary); }
.header.mainHistory {
	.side.center { overflow: hidden; }
	.side.center {
		.txt { @include text-overflow-nw; }
	}
}

.header.isCommon { background: var(--color-bg-primary); height: 52px; }
.header.isCommon {
	.path { border: 1px solid rgba(0,0,0,0); padding: 0px 10px; }
	.path {
		.inner { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 0px 6px; }
		.name { @include text-overflow-nw; }
		.iconObject { flex-shrink: 0; }
	}
	.path:hover { border-color: var(--color-shape-secondary); }
}

.header.mainGraph {
	.side.right { gap: 0px 12px; }

	.filterWrap { width: 0px; overflow: hidden; transition: $transitionAllCommon; display: none; }
	.filterWrap {
		.filter { width: 100%; padding: 0px; }
		.inner { height: 28px; }
		.line { display: none; }
	}
	.filterWrap.active { width: 200px; }

	.icon.btn-search { background-image: url('~img/icon/header/search.svg'); }
	.icon.btn-filter { background-image: url('~img/icon/dataview/button/filter0.svg'); }
	.icon.btn-settings { background-image: url('~img/icon/dataview/button/settings.svg'); }
}

.header.mainSettings { background: none; }

.popup {
	.header { position: sticky; padding: 0px; top: 0px !important; }
	.header {
		.side.left { padding-left: 14px !important; }
		.side.left {
			.icon.sidebar { display: none; }
			.icon.expand { display: inline-block; }
		}
	}
}
