tabs()
	.bunt-tabs
		width 100%
		margin-bottom 24px

	.bunt-tabs-header
		position: relative
		width: 100%

		.bunt-tab-header-item .bunt-ripple-ink .ripple.held
				opacity: 0.7

	.bunt-tabs-header-items
		position: relative
		display: flex
		list-style: none
		margin: 0
		padding: 0

	.bunt-tab-header-item
		font-family: $font-stack
		position: relative

		display: flex
		height: 48px
		padding: 0 12px
		text-transform: uppercase

		align-items: center
		justify-content: center

		cursor: pointer
		min-width: 80px
		outline: none
		&.type-icon-and-text
			display: flex
			flex-direction: column
			height: 72px

			.bunt-tab-header-item-icon
				margin-bottom: 4px
				margin-bottom: 4px

		&.disabled
			opacity: 0.4
			cursor: default

	.bunt-tabs-indicator
		position: absolute
		height: 2px
		bottom: 0
		left: 0
		right: 0

		transform: scale(0)
		transform-origin: left center
		transition: transform

		&.align-bottom
			top: 0
			bottom: auto

		&.expand
			transition-duration: 0.075s
			transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1)

		&.contract
			transition-duration: 0.09s
			transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1)

// styling/theming mixin
tabs-style(background-color = $clr-grey-200, color = $clr-secondary-text-light, active-color = $clr-primary, indicator-color = $clr-primary)
	.bunt-tabs-header
		background-color: background-color
		.bunt-tabs-header-items
			color: color
			.bunt-tab-header-item-icon
				color: color
		.bunt-tab-header-item
			body[modality="keyboard"] &:focus
				outline: 1px solid active-color
		.bunt-tab-header-item.active
			color: active-color
			.bunt-tab-header-item-icon
				color: active-color
	.bunt-tabs-indicator
		background-color: indicator-color