.tabnav-control {
	padding: 0 !important;
	margin: 0 !important;
	font-size: 0;

	> .tab {
		@include ease-in();
		@extend .text-truncate;
		display: inline-block;
		margin: 0;
		padding: 5px 15px;
		background-color: $color-white;
		color: $theme-500;
		border: 1px solid map-get($gray-shades, 300);
		font-weight: 500;
		font-size: 1.1rem;
		text-align: center;
		cursor: pointer;
		line-height: 26px;
		list-style-type: none;
		margin-left: -4px;				// remove whitespace inline block
		margin-top: -1px;				// ensure no double-border when tabs are stacked vertically on mobile device

		&:first-of-type {
			@include border-radius-left(3px);
		}

		&:last-of-type {
			@include border-radius-right(3px);
		}

		&:hover {
			background-color: $theme-100;
		}
	}

	> .tab-vertical {
		display: block;
		margin-left: 0;

		&:first-of-type {
			@include border-radius-top(3px);
		}

		&:last-of-type {
			@include border-radius-bottom(3px);
		}
	}

	> .selected {
		background-color: $theme-100;
		font-weight: 700;
	}
}

.tabnav-control-centered {
	margin: 0 auto !important;
}