@import '../../../styles/_partials/index'

.Stepper
	position: relative
	margin-top: auto
	width: 100%
	display: flex
	height: 65px
	line-height: 65px
	flex-shrink: 0
	@include theme-border-top

	&:before
		content: ""
		position: absolute
		top: 0
		left: 0
		width: 100%
		height: 100%
		@include theme-stripes-white-else-graydark

	.Step
		flex-grow: 1
		position: relative
		height: 100%
		padding: 0 20px 0 40px
		color: $gray25
		clip-path: polygon(20px 50%,0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%)
		margin-left: -20px

		&:first-child
			clip-path: polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%)
			margin-left: 0
			padding-left: 20px

		&:last-child
			clip-path: polygon(20px 50%,0 0,100% 0,100% 100%,0 100%)

		span, svg
			margin: 0 10px 0 0
			vertical-align: middle
			width: 32px
			height: 32px


		span
			color: $gray25
			border-radius: 100%
			line-height: 30px
			text-align: center
			border: 2px solid $gray25
			display: inline-block

		&:not(:last-child)::after
			content: ""
			position: absolute
			right: 0
			top: 0
			flex: 0 0 calc(100% + 40px)
			clip-path: polygon(20px 50%,0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%)
			box-shadow: 0 0 48px 0 $white
			@include theme-background-gray15-else-graydark50
			width: 21px
			height: 100%

		&.Step__Active
			@include theme-background-white-else-graydark
			@include theme-color-graydark-else-white

			span
				color: $green
				border-color: $green

		&.Step__Done
			color: $green

			svg
				background: white
				border-radius: 20px

				path
					fill: $green

		&.Step__Disabled
			@include theme-background-gray1-else-none-disabled
			@include theme-color-gray15-else-gray-dark50-disabled
			opacity: 1

			span
				@include theme-border-color
				@include theme-color-gray15-else-gray-dark50-disabled