#tab-bar-container {
	// These variables can be overridden in platform styles to set platform-specific safe areas
	--safe-area-start: 0;
	--safe-area-end: 0;
	--tab-border: .5px solid var(--tab-border);

	background: var(--material-tabbar);
	-moz-window-dragging: drag;
	min-height: var(--tab-min-height);
	flex: 1;

	@include macOS-inactive-opacity;
	
	&:not([hidden]) {
		// display: flex overrides the hidden attribute
		display: flex;
	}

	&::before {
		content: '';
		min-width: var(--safe-area-start);
		// Add bottom border to safe area space
		border-bottom: var(--tab-border);
	}

	&::after {
		content: '';
		min-width: var(--safe-area-end);
		// Add bottom border to safe area space
		border-bottom: var(--tab-border);
	}
	
	& > div {
		flex-grow: 1;
	}
}

#zotero-tabs-toolbar {
	background: var(--material-tabbar);
}

.tab-bar-inner-container {
	display: flex;

	.tabs-wrapper {
		position: relative;
		flex-grow: 1;
	}

	.scroll-start-arrow, .scroll-end-arrow {
		padding: 0 4px;
		align-items: center;
		color: var(--fill-secondary);
		display: none;
		box-shadow: none;
		z-index: 1;

		> button {
			width: auto;
			padding: 0;
			border: 0;
			height: 28px;
			border-radius: 5px;
			background: transparent;
		}

		.icon {
			display: flex;
			fill: var(--fill-tertiary);
		}

		&.active {
			button {
				&:hover {
					background-color: var(--fill-quinary);
				}
			
				&:active {
					background-color: var(--fill-quarternary);
				}
			}

			.icon {
				fill: var(--fill-secondary);
			}
		}
	}

	.scroll-start-arrow {
		border-right: var(--material-border-transparent);
		border-left: var(--material-border-quarternary);

		&.active {
			border-right: var(--material-panedivider);
			box-shadow: 0.5px 0.5px 0px -0.5px rgba(0, 0, 0, 0.05), 3px 0px 3px -3px rgba(0, 0, 0, .3)
		}
	}

	.scroll-end-arrow {
		border-left: var(--material-border-transparent);

		&.active {
			border-left: var(--material-panedivider);
			box-shadow: -0.5px 0.5px 0px -0.5px rgba(0, 0, 0, 0.05), -3px 0 3px -3px rgba(0, 0, 0, .3)
		}

		.icon {
			transform: rotate(180deg);
		}
	}

	.pinned-tabs {
		display: none;
		padding-right: 8px;
		
		.tabs {
			overflow: unset;
		}
		
		.tab {
			max-width: 100px;
		}
	}

	&.scrollable {
		.tabs-wrapper > .tabs > :first-child {
			display: none;
		}

		.scroll-start-arrow, .scroll-end-arrow {
			display: flex;
		}

		.pinned-tabs {
			display: block;
		}
	}
}

.tabs {
	display: flex;
	position: absolute;
	overflow: hidden;
	left: 0;
	right: 0;
	padding: 4px 1px;
	column-gap: 4px;
	-moz-window-dragging: drag;

	.pinned-tabs & {
		padding: 4px 0;
	}
}

.tab {
	box-sizing: border-box;
	max-width: 200px;
	flex: 1 1 200px;
	position: relative;
	color: var(--fill-primary);
	text-align: center;
	min-width: 100px;
	height: 28px;
	line-height: 16px;
	padding-inline-end: 22px;
	padding-inline-start: 6px;
	display: flex;
	align-items: center;
	border-radius: 5px;
	transition: background-color 0.1s ease-out;
	-moz-window-dragging: no-drag;

	@include macOS-inactive-opacity;

	&.selected {
		background: var(--material-button);
		box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.05), 0px 0.5px 2.5px 0px rgba(0, 0, 0, 0.30);
	}

	&.dragging {
		z-index: 1;
	}
	
	&:not(:last-child) {
		border-inline-end: var(--tab-border);
	}

	&:not(.selected):hover {
		background-color: var(--fill-quinary);
	}

	&:first-child {
		padding: 6px; // no 22px padding for X button because pinned tab cannot be closed

		.tab-close {
			display: none;
		}
	}
	
	.tab-name {
		flex: 1 1 100%;
		line-height: 1.38461538em;
		margin-inline-start: 4px;
		overflow: hidden;
		text-align: start;
		white-space: nowrap;

		&:dir(ltr) {
			mask-image: linear-gradient(to left, transparent 0px, var(--fill-primary) 20px);
		}

		&:dir(rtl) {
			mask-image: linear-gradient(to right, transparent 0px, var(--fill-primary) 20px);
		}
	}

	.tab-icon {
		flex: 0 0 16px;
		height: 16px;
	}

	.tab-close {
		position: absolute;
		transition: background-color 0.1s ease-out;

		&:dir(ltr) {
			right: 6px;
		}

		&:dir(rtl) {
			left: 6px;
		}

		width: 16px;
		height: 16px;
		text-align: center;
		line-height: 16px;
		border-radius: 3px;

		.icon {
			display: flex;
		}
		
		&:hover {
			background-color: var(--fill-quinary);
		}
		
		&:active {
			background-color: var(--fill-quarternary);
		}
	}

	&:not(.selected) {
		border-bottom: var(--tab-border);
	}
}