nav {
	height: 27px;
	overflow: hidden;
	flex-shrink: 0;
	flex-grow: 0;
	position: relative;
}

.tabbar {
	margin: 0 10px 0 70px;
	padding-left: 16px;
	overflow-x: scroll;
	overflow-y: hidden;
	height: 50px;
	position: relative;
	top: 0;
	transition: top $nav-locked-transition-duration $nav-locked-transition-easing;
	
	body.locked & {
		top: 26px;
	}
	
	&::-webkit-scrollbar {
		display: none;
	}
}

.tabs {
	margin: 0;
	padding: 0;
	height: 100%;
	min-width: 100%;
	display: flex;
	-webkit-app-region: drag;
	
	&.shift-none {
		> .tab {
			left: 0 !important;
			transition: none !important;
			transform: translateX(0) !important;
		}
	}
	
	&.shift-reset {
		> .tab {
			left: 0 !important;
			transform: translateX(0) !important;
		}
	}
}

.tab {
	margin: 1px 20px 0 6px;
	float: left;
	height: 26px;
	min-width: 60px;
	max-width: 120px;
	outline: none;
	box-sizing: border-box;
	position: relative;
	box-shadow: inset -1px 1px 0 $tab-shadow-color-dark-mode;
	transition: transform 200ms ease, left 200ms ease;
	transform: translateX(0);
	left: 0;
	flex: 1;
	-webkit-app-region: no-drag;
	
	body.light-mode & {
		box-shadow: inset -1px 1px 0 $tab-shadow-color-light-mode;
	}

	> .label {
		position: relative;
		z-index: 1;
		font-size: 11px;
		line-height: 26px;
		color: $text-color-deselected-dark-mode;
		pointer-events: none;
		
		body.light-mode & {
			color: $text-color-deselected-light-mode;
		}
	}
	> .close {
		border: 0;
		background-color: transparent;
		color: $text-color-deselected-dark-mode;
		font-size: 14px;
		font-weight: bold;
		line-height: 14px;
		position: absolute;
		right: -5px;
		top: 2px;
		z-index: 1;
		padding: 5px;
		
		body.light-mode & {
			color: $text-color-deselected-light-mode;
		}

		&:hover {
			color: $text-color-selected-dark-mode;
			
			body.light-mode & {
				color: $text-color-selected-light-mode;
			}
		}
	}
	
	&:only-child {
		-webkit-app-region: drag;
	}
	&:before {
		left: -14px;
		border-top-left-radius: 3px;
		box-shadow: inset 1px 1px 0 $tab-shadow-color-dark-mode;
		transform: skewX(-30deg);
		
		body.light-mode & {
			box-shadow: inset 1px 1px 0 $tab-shadow-color-light-mode;
		}
	}
	&:after {
		right: -14px;
		border-top-right-radius: 3px;
		box-shadow: inset -1px 1px 0 $tab-shadow-color-dark-mode;
		transform: skewX(30deg);
		
		body.light-mode & {
			box-shadow: inset -1px 1px 0 $tab-shadow-color-light-mode;
		}
	}
	&:before, &:after {
		content: '';
		position: absolute;
		top: 0px;
		width: 25px;
		height: 26px;
	}
	&, &:before, &:after {
		background-color: $frame-color-blur-dark-mode;
		
		body.light-mode & {
			background-color: $frame-color-blur-light-mode;
		}
	}

	&.selected {
		background-color: $frame-color-focus-dark-mode;
		z-index: 9999;
		flex: 2;
		width: -webkit-fit-content;
		
		body.light-mode & {
			background-color: $frame-color-focus-light-mode;
		}

		&, &:before, &:after {
			background-color: $frame-color-focus-dark-mode;
			
			body.light-mode & {
				background-color: $frame-color-focus-light-mode;
			}
		}

		> .label {
			color: $text-color-selected-dark-mode;
			
			body.light-mode & {
				color: $text-color-selected-light-mode;
			}
		}
	}

	&.shift-right {
		transform: translateX(126px);
	}

	&.shift-left {
		transform: translateX(-126px);
	}
}

.locked-badge {
	position: absolute;
	top: 27px;
	left: 5px;
	font-size: 14px;
	transition: top $nav-locked-transition-duration $nav-locked-transition-easing;

	body.locked & {
		top: 1px;
	}
}
