.tab-item {
	--font-size: 1.4rem; // review : roll these font styles into a mixin for button and tab elements?
	--font-weight: bold;
	--line-height: 2.4rem;
	--baseline-adjust: 0;
	--space-after: 0;

	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	min-height: 4.8rem;
	max-height: 7.2rem;
	min-width: 4.8rem;
	max-width: 36rem;
	margin: 0;
	padding: 1.2rem 1.2rem 1.2rem 1.2rem;

	color: RGBA(var(--color), var(--color-alpha, 1));

	text-transform: uppercase;
	transition: padding var(--quick) var(--ease-move), font-size var(--quick) var(--ease-move), line-height var(--quick) var(--ease-move);

	cursor: pointer;

	&.both {
		padding: 0.4rem 1.2rem 0.8rem 1.2rem;
	}

	&.both-when-active {
		--zero-px: 0px; // hack : CSSNano minification converts this to 0 if set directly on line-height which breaks the animation
		font-size: 0rem;
		line-height: var(--zero-px);

		&.active {
			padding: 0.4rem 1.2rem 0.8rem 1.2rem;
			font-size: var(--font-size, 0px);
			line-height: var(--line-height, 0px);
		}
	}

	&:global(.dense),
	:global(.dense) & {
		--font-size: 1.2rem;
		--font-weight: normal;
		--line-height: 1.2rem;
	}
}