.navigationbar-subtabs {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 32px;
	flex: none;

	&::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 1px;
		background: var(--separator-color-transparent);
		bottom: 0;
		z-index: 1;
	}

	> .tab {
		font: bold 13px/32px Alegreya SC;
		flex: 0 1 auto;
		letter-spacing: 0.1em;
		margin: 0 20px;
		text-transform: uppercase;
		position: relative;
		color: var(--accent-color);
		min-width: 0;
		z-index: 2;

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

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

		&:last-child {
			margin-right: 20px;
		}

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

			&:after {
				position: absolute;
				content: "";
				width: auto;
				height: 2px;
				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;
		}
	}
}
