// The below is pulled from Buefy


$steps-details-background-color: $body-background-color !default
$steps-maker-default-color: $grey-light !default
$steps-marker-default-border: .2em solid #fff !default
$steps-default-color: $grey-lighter !default
$steps-previous-color: $primary !default
$steps-active-color: $primary !default
$steps-divider-height: .2em !default
$steps-vertical-padding: 1em 0 !default
$steps-mobile-max-width: $tablet !default
$steps-colors: $colors !default

@mixin steps-size($size)
	.steps
		font-size: $size
		min-height: $size * 2

		.step-items
			.step-item
				.step-marker
					height: $size * 2
					width: $size * 2

					.icon
						*, *:before
							font-size: $size

				.step-details
					.step-title
						font-size: $size * 1.2
						font-weight: $weight-semibold
						line-height: $size

				&:not(:first-child), &:only-child
					&::before
						height: $steps-divider-height
						top: #{$size}

				&:only-child
					&::after
						top: #{$size}

				@include until($steps-mobile-max-width)
					&::before, &::after, &:not(:first-child)::before
						top: #{$size}

	&.is-vertical
		> .steps
			&.has-label-right
				.step-items
					.step-item
						&:not(:first-child), &:only-child
							&::before, &::after
								left: calc(#{$size} - #{$steps-divider-height / 2})

			&.has-label-left
				.step-items
					.step-item
						&:not(:first-child), &:only-child
							&::before, &::after
								left: auto
								right: calc(#{$size} - #{$steps-divider-height / 2})

		&.is-right
			> .steps
				&.has-label-right
					.step-items
						.step-item
							&:not(:first-child), &:only-child
								&::before, &::after
									left: calc(#{$size} - #{$steps-divider-height / 2})

				&.has-label-left
					.step-items
						.step-item
							&:not(:first-child), &:only-child
								&::before, &::after
									left: auto
									right: calc(#{$size} - #{$steps-divider-height / 2})

.b-steps
	.steps
		.step-items
			display: flex
			flex-wrap: wrap

			.step-item
				margin-top: 0
				position: relative
				flex-grow: 1
				flex-basis: 1em

				.step-link
					display: flex
					align-items: center
					justify-content: center
					flex-direction: column
					color: $body-color

					&:not(.is-clickable)
						cursor: not-allowed

				.step-marker
					align-items: center
					display: flex
					border-radius: $radius
					font-weight: $weight-bold
					justify-content: center
					background: $steps-maker-default-color
					color: $scheme-main
					border: $steps-marker-default-border
					z-index: 1
					overflow: hidden

				// Override marker color per step
				@each $name, $pair in $steps-colors
					$color: nth($pair, 1)
					$color-invert: nth($pair, 2)

					&.is-#{$name}
						&::before, &::after
							background: linear-gradient(to left, $steps-default-color 50%, $color 50%)
							background-size: 200% 100%
							background-position: right bottom

						&.is-active
							.step-marker
								background-color: $scheme-main
								border-color: $color
								color: $color

							&::before, &::after
								background-position: left bottom

						&.is-previous
							.step-marker
								color: $color-invert
								background-color: $color

							&::before, &::after
								background-position: left bottom

				.step-marker
					color: $scheme-main

				.step-details
					text-align: center
					z-index: 1


				&:not(:first-child), &:only-child
					flex-shrink: 1

					&::before
						// This will contain the divider
						content: " "
						display: block
						position: absolute
						width: 100%
						bottom: 0
						left: -50%

				&:only-child
					&::after
						// This will contain the divider
						content: " "
						display: block
						position: absolute
						height: $steps-divider-height
						bottom: 0

					&::before, &::after
						width: 25%
						left: 50%

					&::before
						right: 50%
						left: auto

				&::before, &::after
					background: linear-gradient(to left, $steps-default-color 50%, $steps-active-color 50%)
					background-size: 200% 100%
					background-position: right bottom

				&.is-active
					.step-link
						cursor: default

					.step-marker
						background-color: $scheme-main
						border-color: $steps-active-color
						color: $steps-active-color

					&::before, &::after
						background-position: left bottom
				&.is-previous
					.step-marker
						color: $scheme-main
						background-color: $steps-previous-color

					&::before, &::after
						background-position: left bottom

		+ .step-content
			position: relative
			overflow: visible
			display: flex
			flex-direction: column
			padding: 1rem
			.step-item
				flex-shrink: 0
				flex-basis: auto
			&.is-transitioning
				overflow: hidden

		&.is-rounded
			.step-item
				.step-marker
					border-radius: $radius-rounded

		&.is-animated
			.step-item
				&:not(:first-child), &:only-child
					&::before
						transition: background $speed-slow $easing

		&.has-label-right, &.has-label-left
			.step-items
				.step-item
					.step-link
						flex-direction: row

						> .step-details
							background-color: $steps-details-background-color
							padding: .2em

		&.has-label-left
			.step-items
				.step-item
					.step-link
						flex-direction: row-reverse

	@include steps-size($size-normal)
	&.is-small
		@include steps-size($size-small)

	&.is-medium
		@include steps-size($size-medium)

	&.is-large
		@include steps-size($size-large)

	&.is-vertical
		display: flex
		flex-direction: row
		flex-wrap: wrap

		> .steps
			.step-items
				height: 100%
				flex-direction: column
				border-bottom-color: transparent

				.step-item
					width: 100%
					display: flex
					align-items: center
					justify-content: center
					padding: $steps-vertical-padding

					&::before, &::after
						background: linear-gradient(to top, $steps-default-color 50%, $steps-active-color 50%)
						background-size: 100% 200%
						background-position: left bottom


					// Override marker connector color per step
					@each $name, $pair in $steps-colors
						$color: nth($pair, 1)

						&.is-#{$name}
							&::before, &::after
								background: linear-gradient(to top, $steps-default-color 50%, $color 50%)
								background-size: 100% 200%
								background-position: left bottom

					&:not(:first-child), &:only-child
						&::before
							height: 100%
							width: $steps-divider-height
							top: -50%
							left: calc(50% - #{$steps-divider-height / 2})

					&.is-active, &.is-previous
						&::before, &::after
							background-position: right top

					&:only-child
						&::before
							top: 50%

						&::after
							width: $steps-divider-height
							top: auto
							bottom: 50%
						&::before, &::after
							height: 25%

			&.has-label-right
				.step-items
					.step-item
						justify-content: flex-start

			&.has-label-left
				.step-items
					.step-item
						justify-content: flex-end

			&:not(.has-label-right):not(.has-label-left)
				.step-items
					.step-item
						.step-link
							> .step-details
								background-color: $steps-details-background-color

		> .step-content
			flex-grow: 1

		> .step-navigation
			flex-basis: 100%

		&.is-right
			flex-direction: row-reverse

	&:not(.is-vertical)
		.steps
			@include until($steps-mobile-max-width)
				&.mobile-minimalist
					.step-items
						.step-item
							&:not(.is-active)
								display: none

							&::before, &::after, &:not(:first-child)::before
								// This will contain the divider
								content: " "
								display: block
								position: absolute
								height: $steps-divider-height
								width: 25%
								bottom: 0
								left: 50%

							&::before, &:not(:first-child)::before
								right: 50%
								left: auto

				&.mobile-compact
					.step-items
						.step-item
							&:not(.is-active)
								.step-details
									display: none

