$icon-color:                        color('neutral-2');
$inactive-color:                    color('neutral-4');
$icon-size:                         rem-calc(20);
$item-size:                         rem-calc(40);
$item-border-width:                 rem-calc(2);
$item-border-color:                 color('neutral-4');
$item-background-color:             color('neutral-8');
$active-item-border-color:          color('secondary-1');
$inactive-item-border-color:        color('neutral-4');

$mobile-color:                      color('neutral-8');
$mobile-item-background-color:      color('primary-2');
$mobile-item-border-color:          color('secondary-1');
$mobile-active-item-border-color:   color('secondary-1');
$mobile-inactive-color:             color('primary-3');
$mobile-inactive-item-border-color: color('neutral-4');

.step-progress {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: none;
  list-style: none;

  &:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: $item-size / 2;
    height: $item-border-width;
    left: $item-size / 2;
    right: $item-size / 2;

    background-color: $item-border-color;
    pointer-events: none;
  }
}

.check ellipse {
  fill: #00aeff;
}

.step {
  position: relative;
  display: flex;
  flex: 1 0 auto;

  text-align: center;
  color: $icon-color;

  &:first-child {
    .wrapper:before {
      display: none;
    }
  }

  &:last-child {
    position: static;
    flex: 0 1 auto;

    .wrapper:before {
      z-index: -2;
      width: calc(100% - #{rem-calc(92)});
    }
  }

  .icon-wrapper {
    border-color: $active-item-border-color;
  }

  // State
  &-current {
    pointer-events: none;

    .icon-wrapper {
      border-color: color('primary-1');
    }

    &.clickable {
      pointer-events: initial;
    }
  }

  &-inactive {
    color: $inactive-color;
    pointer-events: none;

    .wrapper:before {
      background-color: $inactive-item-border-color;
    }

    .icon-wrapper {
      border-color: $inactive-item-border-color;
    }

    /* stylelint-disable declaration-no-important */
    path { fill: color('neutral-4') !important; }
    /* stylelint-enable */
  }
}

.wrapper {
  width: ru(3);
  text-decoration: none;
  color: inherit;

  &:active {
    .icon { top: 1px; }
  }
}

.icon-wrapper {
  display: block;
  position: relative;
  width: $item-size;
  height: $item-size;
  margin: 0 auto;

  background-color: transparent;
  border: $item-border-width solid $item-border-color;
  border-radius: 50%;
  background-color: $item-background-color;
  text-align: center;
  line-height: $item-size - 2 * $item-border-width;
}

.icon {
  $icon-size: $item-size * 0.52;

  position: relative;
  width: $icon-size;
  height: $icon-size;
  margin: 50% auto 0 auto;
  transform: translateY(-50%);
}

.check {
  position: absolute;
  top: 0;
  right: rem-calc(-4px);
  width: rem-calc(14px);
  height: rem-calc(14px);
}

.label {
  @include typography-7(false);
  @include typography-semibold;

  display: block;
  color: inherit;
}

@media #{$small-only} {
  .stepProgress {
    background-color: transparent;
  }

  .step {
    color: $mobile-color;

    &-inactive {
      color: $mobile-inactive-color;

      .wrapper:before {
        /* stylelint-disable declaration-no-important */
        background-color: $mobile-inactive-item-border-color !important;
        /* stylelint-enable */
      }

      .icon-wrapper { border-color: $mobile-inactive-item-border-color; }
    }
  }

  .wrapper {
    width: auto;

    &:before { background-color: $mobile-item-background-color; }
  }

  .icon-wrapper {
    background-color: $mobile-item-background-color;
    border-color: $mobile-active-item-border-color;
  }

  .icon path { fill: color('primary-3'); }

  .label { display: none; }
}