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

	> .tab {
		@include ease-in();
		display: inline-block;
		margin: 0;
		padding: 5px 15px;
		background-color: $color-white;
		color: $color-primary;
		border: 1px solid $color-border;
		font-weight: bold;
		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: $color-primary-light;
		}
	}

	> .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: $color-primary-light;
	}
}

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