const tab-padding-x = 1rem

.tab
	horizontal
	align-items center
	color text-color
	padding 0.5rem tab-padding-x
	background-color tab-background
	border ui-border
	border-left none
	white-space nowrap

	:hover
		color text-color
		background-color tab-hover-background
		cursor pointer

	:active
		transform none

	&.active
		background-color tab-active-background
		color tab-active-color

	:first-child
		border-left ui-border
		border-top-left-radius ui-element-border-radius
		border-bottom-left-radius ui-element-border-radius

	:last-child
		border-top-right-radius ui-element-border-radius
		border-bottom-right-radius ui-element-border-radius

< 920px
	.tab
		padding 0.75rem tab-padding-x

		.padded-icon
			margin-right 0

	.tab-text
		display none

.tabs
	horizontal
	justify-content center
	margin content-padding calc(content-padding / 4)
	margin-top 0

.tab-groups
	horizontal
	justify-content center