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

$prefix-steps = ant-steps

// Общая обретка
.{$prefix-steps}
	display flex
	margin 0
	padding 0
	box-sizing border-box
	width 100%
	counter-reset steps

	.{$prefix-steps}-item-tail
		box-sizing border-box
		&::after
			content ''
			display inline-block
			background-color $cl-graphite-5
			transition background-color .3s
	
	.{$prefix-steps}-item
		&:last-child
			.{$prefix-steps}-item-tail
				display none

	&:not(.{$prefix-steps}-vertical)
		.{$prefix-steps}-item-title
		.{$prefix-steps}-item-content
			text-align center

		.{$prefix-steps}-item-content
			max-width 200px
			font-weight $fw-medium
			font-size $fz-xsmall
			color $cl-graphite-4
			margin auto

		.{$prefix-steps}-item-tail
			position absolute
			left 0
			padding 0
			width 100%
			margin 0 0 0 calc(100%/2 + 20px)

			&::after
				margin-left 12px
				width 100%
				width calc(100% - 65px)
				height 1px
				
		.{$prefix-steps}-item
			position relative
			display inline-block
			flex-grow 1
			flex-shrink 0
			vertical-align top
			min-width 0

	.{$prefix-steps}-item-icon
		display block
		margin 0 auto 8px
		box-sizing border-box

	&:not(.{$prefix-steps}-dot)
		.{$prefix-steps}-item-icon
			width 32px
			height 32px
			text-align center
			line-height @height
			font-weight $fw-medium
			color $cl-graphite-4
			border-radius @height
			border 1.5px solid $cl-graphite-4
			&::before
				counter-increment steps
				content counter(steps)

		// СОСТОЯНИЕ - ТЕКУЩИЙ ШАГ
		.{$prefix-steps}-item-process
			.{$prefix-steps}-item-icon
				border-color $cl-blue-2
				background-color $cl-blue-2
				&::before
					color $cl-white

				.{$prefix-steps}-item-title
					color $cl-text-primary
		
		.{$prefix-steps}-item-title
			line-height 32px

		// СОСТОЯНИЕ - ГОТОВО
		.{$prefix-steps}-item-finish
			.{$prefix-steps}-item-icon
				border 1.5px solid $cl-green-3
				&::before
					font-icon 'check'
					color $cl-text-success

			.{$prefix-steps}-item-title
				color $cl-text-success

		// СОСТОЯНИЕ - ОЖИДАНИЕ
		.{$prefix-steps}-item-wait
			.{$prefix-steps}-item-icon
				background-image url(../images/icons/loaders/loading-ring-grey.svg)
				background-position center
				background-repeat no-repeat
				background-size 34px
				border 0
				&::before
					content ''

		// СОСТОЯНИЕ - ОШИБКА
		.{$prefix-steps}-item-error
			.{$prefix-steps}-item-icon
				border 1.5px solid $cl-text-error
				&::before
					content '!'
					color $cl-text-error

			.{$prefix-steps}-item-title
				color $cl-text-error

			.{$prefix-steps}-item-tail
				position absolute
				left 0
				padding 0 10px
				box-sizing border-box
				width 100%

				&::after
					content ''
					display inline-block
					width 100%
					height 1px
					background-color $cl-graphite-5
					border-radius 1px
					transition background .3s

// ВЕРТИКАЛЬНОЕ РАСПОЛОЖЕНИЕ
.{$prefix-steps}-vertical
	display block

	.{$prefix-steps}-item
		display block
		overflow visible

	.{$prefix-steps}-item-icon
		float left
		margin-right 24px
	
	.{$prefix-steps}-item-content
		display block
		min-height 48px
		overflow hidden

	.{$prefix-steps}-item-description
		padding 12px 0

	.{$prefix-steps}-item
		.{$prefix-steps}-item-tail
			position absolute
			top 0
			left 16px
			padding 38px 0 6px
			width 1px
			height 100%
			&::after
				width 1px
				height 100%

	& > .{$prefix-steps}-item
		&:not(:last-child)
			& > .{$prefix-steps}-item-tail
				display block
				
		& > .{$prefix-steps}-item-content
			> .{$prefix-steps}-item-title
				&::after
					display none

.{$prefix-steps}-dot
	&.{$prefix-steps}-vertical
		.{$prefix-steps}-item-icon
			margin-top 3px
			margin-left 0

		.{$prefix-steps}-item-tail
			left -9px
			margin 0
			padding 24px 0 3px

		.{$prefix-steps}-item
			&:first-child
				.{$prefix-steps}-icon-dot
					left 0

	.{$prefix-steps}-item-tail
		margin 0 0 0 70px
		padding 0
		width 100%
		&::after
			margin-left 16px
			margin-bottom 7px
			width calc(100% - 26px)
			height 1px

	.{$prefix-steps}-item
		&:first-child
			.{$prefix-steps}-icon-dot
				left 2px

	.{$prefix-steps}-icon-dot
		box-sizing border-box
		border 1px solid $cl-graphite-6
	
	.{$prefix-steps}-item-icon
		padding-right 0
		width 15px
		height @width
		line-height @width
		background transparent
		border 0

		.{$prefix-steps}-icon-dot
			float left
			width 100%
			height 100%
			border-radius 100px
			transition all .3s
	
	//СОСТОЯНИЕ - ТЕКУЩИЙ ШАГ
	.{$prefix-steps}-item-process
		.{$prefix-steps}-item-icon
			.{$prefix-steps}-icon-dot
				top -1px
	
    //СОСТОЯНИЕ - ГОТОВО
	.{$prefix-steps}-item-finish
		.{$prefix-steps}-item-icon 
			border-color $cl-graphite-6

			.{$prefix-steps}-icon-dot
				background-color $cl-graphite-6
	
	// СОСТОЯНИЕ - ОШИБКА
	.{$prefix-steps}-item-error
		.{$prefix-steps}-item-icon
			border-color $cl-red-5

			.{$prefix-steps}-icon-dot
				border-color $cl-red-5

		.{$prefix-steps}-item-tail
			&::after
				background-color $cl-red-5