@progress-prefix-cls: ~'@{ant-prefix}-progress';
@collapse-prefix-cls: ~'@{ant-prefix}-collapse';

.@{steps-prefix-cls}-with-progress {
  .@{steps-prefix-cls}-item {
    padding-top: 4px;

    .@{steps-prefix-cls}-item-tail {
      top: 4px !important;
    }
  }

  &.@{steps-prefix-cls}-horizontal {
    .@{steps-prefix-cls}-item:first-child {
      padding-bottom: 4px;
      padding-left: 4px;
    }
  }

  &.@{steps-prefix-cls}-label-vertical {
    .@{steps-prefix-cls}-item .@{steps-prefix-cls}-item-tail {
      top: 10px !important;
    }
  }

  .@{steps-prefix-cls}-item-icon {
    position: relative;
    line-height: 16px;

    .@{progress-prefix-cls} {
      position: absolute;
      top: -5px;
      right: -5px;
      bottom: -5px;
      left: -5px;
      font-size: @steps-icon-font-size;
    }
  }
}

.@{steps-prefix-cls} {
  &-mobile-container {
    .@{steps-prefix-cls}-subTitle {
      color: @color-gray-500;
    }
    .@{collapse-prefix-cls} {
      border: none;
      border-radius: 0;

      &-header {
        padding: 8px 0 0 0 !important;
      }

      &-content,
      &-item {
        border: none;
      }

      &-content-active {
        #shadows(@shadows-bottom[1xl]);
      }
    }

    .@{progress-prefix-cls} {
      display: block;
      line-height: 0;

      &-inner {
        border-radius: 0;
      }

      &-bg {
        background-color: @primary-color !important;
        border-radius: 0;
      }
    }
  }
}