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

$prefix-collapse = ant-collapse;

// Блок аккордеона
.{$prefix-collapse}-item
	background-color $cl-graphite-7
	border-radius 4px
	&:hover
		.{$prefix-collapse}-header
			background-color lighten($cl-graphite-6, 20%)

	& + .{$prefix-collapse}-item
		margin-top 12px

// Открытый аккордеон
.{$prefix-collapse}-item-active
	.{$prefix-collapse}-header
		&::after
			transform rotate(180deg)

// Отключенный аккордеон
.{$prefix-collapse}-item-disabled
	&:hover
		.{$prefix-collapse}-header
			background-color $cl-graphite-7

			&::after
				color $cl-text-light

	.{$prefix-collapse}-header
		color $cl-text-disabled
		cursor default
		&:hover
			&::after
				color $cl-text-light

		&::after
			color $cl-text-disabled

// Шапка аккордеона
.{$prefix-collapse}-header
	padding 12px 56px 12px 24px
	box-sizing border-box
	overflow hidden
	white-space nowrap
	text-overflow ellipsis
	font-weight $fw-medium
	transition .2s
	cursor pointer
	&:hover
		&::after
			color $cl-text

	// Стрелка
	&::after
		position absolute
		top 6px
		right 12px
		display flex
		justify-content center
		align-items center
		width 32px
		height @width
		font-icon 'down-big'
		font-size 12px
		color $cl-text-light
		transition transform .2s

	.anticon
		display none

// Обертка контента аккордеона
.{$prefix-collapse}-content
	border-top 1px solid $cl-graphite-6

// Контент аккордеона
.{$prefix-collapse}-content-box
	padding 24px 20px
	box-sizing border-box


// АНИМАЦИЯ
.ant-motion-collapse
	overflow hidden

.ant-motion-collapse-active
.{$prefix-collapse}-content-inactive
	transition height .25s cubic-bezier(.075, .82, .165, 1),
			   opacity .25s cubic-bezier(.075, .82, .165, 1) !important

.{$prefix-collapse}-content-inactive
	display none