/*-------------- steps-white -----------------*/
.steps-white{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background: #fff;
	border-bottom: 1px solid $color-light-grey;

	&__item{
		display: inline-flex;
		align-items: center;
		height: 30px;
		position: relative;
		padding: 0 30px 0 40px;
		transition: all 0.3s ease;
		cursor: pointer;
	}

	&__item:first-child{padding-left: 20px;}

	&__arr{
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
	}

	&__arr::before,
	&__arr::after{
		content: '';
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 15px 0 15px 9px;
		position: absolute;
		@include top-center;
		transition: all 0.3s ease;
	}

	&__arr::after{
		border-color: transparent transparent transparent #fff;
		right: -9px;
		z-index: 1;
	}

	&__arr::before{
		border-color: transparent transparent transparent $color-light-grey;
		right: -10px;
		z-index: 1;
	}

	&__num{
    display: inline-flex;
    align-items: center;
    justify-content: center;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 1px solid $color-dark-blue;
		@include font(normal, normal, rem(14px), 1, $color-dark-blue);
		text-align: center;
		margin-right: 8px;
		transition: all 0.3s ease 0s;
	}

	&__val{
		max-width: calc(100% - 30px);
		@include font(normal, normal, rem(14px), 1.2, $color-dark-blue);
		transition: all 0.3s ease 0s;
		white-space: nowrap;
	}

	&__opt{
		color: $color-grey;
		font-style: italic;
		margin-left: 8px;
	}

  &__item:hover{background: #f5f2f9;}
  &__item:hover &__arr::after{border-color: transparent transparent transparent #f5f2f9;}

  &__item.disable{
    cursor: auto;
  }

  &__item.disable &__num,
  &__item.disable &__val{
    opacity: 0.5;
  }

	&__item.disable:hover{background: transparent;}
	&__item.disable:hover &__arr::after{border-color: transparent transparent transparent #fff;}

	&__item.active{background: $color-dark-purple;}

	&__item.active &__num{
		border-color: #fff;
		color:#fff;
	}

	&__item.active &__val,
	&__item.active &__opt{
		color: #fff;
		font-weight: 600;
	}

  &__item.active &__opt{font-weight: normal;}

	&__item.active &__arr::after{border-color: transparent transparent transparent $color-dark-purple;}
	&__item.active &__arr::before{display: none;}

  &__item.active:hover{background: #3f0280;}
  &__item.active:hover &__arr::after{border-color: transparent transparent transparent #3f0280;}
	//&__item.active:hover &__num{
	//	border-color: #fff;
	//	color: #fff;
	//}
  //
	//&__item.active:hover &__val{
	//	color: #fff;
	//	font-weight: 600;
	//}
  &_no-border{border-bottom: 0;}

  &__icon-error{
    width: 18px;
    height: 16px;
    position: absolute;
    @include top-center;
    right: 5px;
    z-index: 2;

    .icon{
      max-width: 18px;
      max-height: 16px;
      vertical-align: top;
    }

    .tooltip{
      display: none;
      position: absolute;
      @include top-center;
      left: 100%;
      white-space: nowrap;
      margin-top: 0;
      margin-bottom: 0;
      z-index: 5;
    }
  }

  &__icon-error:hover .tooltip,
  &__icon-error.active .tooltip{
    display: inline-block;
  }
}