.navigationbar-tabs {
	flex: 1 1 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: stretch;

	.tab {
		font: bold 15px/var(--navigationbar-height) Alegreya SC;
		// font: bold 18px/#{$titlebar-height} Alegreya SC;
		flex: 0 1 auto;
		letter-spacing: 0.1em;
		margin: 0 20px;
		text-transform: uppercase;
		color: var(--accent-color);
		min-width: 0;
		// padding: 0 10px;
		position: relative;

		&:first-child {
			margin-left: 0;
		}

		&:hover {
			color: var(--headings-color);
			cursor: pointer;
		}

		&:active, &:focus {
			color: var(--accent-color-intense);
			cursor: pointer;
		}

		&.active {
			pointer-events: none;
			color: var(--headings-color);

			&::after {
				position: absolute;
				content: "";
				width: auto;
				height: 3px;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 auto;
				background: var(--accent-color);
			}
		}

		&.disabled {
			pointer-events: none;
			color: var(--separator-color-halftransparent);
		}

		div {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}
}
