@require 'nib'
@require '~modul-markup-common/markup/stylus/variables'

$prefix-tabs = ant-tabs

// Общая обретка
.{$prefix-tabs}
	position relative

	&._wide
		.{$prefix-tabs}-tab
			padding 0 16px 8px

			&:not(:last-child)
				margin-right 0

// Панелька с названиями табов
.{$prefix-tabs}-bar
	display flex
	flex-wrap nowrap
	margin-bottom 32px

	&::after
		content ''
		position absolute
		right 0
		bottom 0
		left 0
		height 2px
		background-color $cl-graphite-6

.{$prefix-tabs}-nav-wrap
	overflow hidden

.{$prefix-tabs}-nav-scroll
	overflow hidden
	white-space nowrap

.{$prefix-tabs}-nav
	display inline-block

// Таб
.{$prefix-tabs}-tab
	display inline-block
	padding-bottom 8px
	user-select none
	cursor pointer

	&:not(:last-child)
		margin-right 32px

// Активный таб
.{$prefix-tabs}-tab-active
	position relative
	color $cl-blue-1

// Стрелки переключения между табами
.{$prefix-tabs}-tab-prev
.{$prefix-tabs}-tab-next
	display none

// Обертка всех табов
.{$prefix-tabs}-content
	display flex
	margin-left 0 !important // fix стандартного поведения ant-tabs - табы уезжают влево через margin-left: -100%
	width 100%

// Контент табов
.{$prefix-tabs}-tabpane
	flex-shrink 0
	width 100%

// Подчеркивание активного таба
.{$prefix-tabs}-ink-bar
	height 3px
	background-color $cl-blue-1
	transition transform .2s
	z-index 1

// Скрытие неактивного таба
.{$prefix-tabs}-tabpane-inactive
	display none

// Заготовка для анимаций
// .{$prefix-tabs}-tabpane-active
// 	animation-name anim-tab-active
// 	animation-duration 1s

// .{$prefix-tabs}-tabpane-inactive
// 	animation-name anim-tab-inactive
// 	animation-duration 1s