.tab {
	@include type-style-body-sm-em;
	display: inline-flex;
	flex-flow: column;
	align-items: center;
	flex: 0 0 auto;

	+ .tab {
		padding-left: spacing('base');
	}

	.tab-group--is-padded & {
		padding: 0 spacing('base');

		+ .tab {
			padding-left: 0;
		}
	}
}

.tab__inner {
	position: relative;
	padding: spacing('tight') 0;
	color: $c-text-light;
	text-decoration: none;

	&:after {
		content: '';
		display: none;
		position: absolute;
		bottom: -1px;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: $c-primary;
	}

	&.tab--is-current {
		color: $c-text;

		&:after {
			display: block;
		}
	}
}

.tab .tab__inner {
	height: auto;

	&.btn:hover {
		background-color: transparent;
	}
}

.tab-group {
	display: flex;
	width: 100%;
	border-bottom: 1px solid $c-border;

	.btn {
		min-width: 0;
	}

	&.tab-group--spacing-even {
		.tab {
			flex: 1 0 auto;

			&:first-of-type {
				flex: 0;
			}
		}
	}
}

.context-tab {
	display: none;

	&.context-tab--is-visible {
		display: inline;
	}

	.context-menu {
		height: 100%;
	}

	.context-menu__item-btn {
		height: rem(34);
		color: inherit;
	}
}

.tab-group .tab.context-tab {
	.btn {
		border-radius: 0;
	}
	.context-menu__button {
		height: 100%;
	}
}