@stepActiveBgColor: rgba(var(--kw-primary-color-rgb), 0.06);
.kw-steps.ant-steps {
  justify-content: center;
  background-color: #fff;

  &.ant-steps-navigation {
    height: 48px;
    padding: 0;

    .ant-steps-item.kw-steps-item {
      padding: 0;
      flex: unset;
      display: flex;
      align-items: center;
      background-color: #fff;

      &.ant-steps-item-finish {
        .ant-steps-item-icon {
          background-color: @stepActiveBgColor;
          border-color: @stepActiveBgColor;
        }
      }

      &.ant-steps-item-wait {
        .ant-steps-item-icon {
          background-color: rgba(0, 0, 0, 0.06);
          border-color: transparent;

          .ant-steps-icon {
            color: var(--kw-text-color);
          }
        }
      }

      &.kw-steps-item-noTab {
        &:before {
          display: none;
        }
      }

      .ant-steps-item-container {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 72px;

        .ant-steps-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          position: unset;
        }

        .ant-steps-item-content {
          display: flex;
          align-items: center;
        }
      }

      &:after {
        z-index: 10;
        margin: 0;
        transform: translate(-1px, -50%) rotate(45deg);
        left: unset;
        right: 0;
      }
    }

    &.kw-steps-navigation {
      .ant-steps-item.kw-steps-item {
        &.kw-steps-item-noArrow {
          &:after {
            opacity: 0;
          }
        }

        &.ant-steps-item-wait {
          .ant-steps-item-icon {
            background-color: transparent;
            border-color: var(--kw-primary-color);

            .ant-steps-icon {
              color: var(--kw-primary-color);
            }
          }

          .ant-steps-item-content {
            .ant-steps-item-title {
              color: var(--kw-primary-color);
            }
          }

          &.ant-steps-item-disabled {
            .ant-steps-item-icon {
              border-color: var(--kw-text-color-secondary) !important;
            }

            .ant-steps-icon,
            .ant-steps-item-title {
              color: var(--kw-text-color-secondary) !important;
            }
          }
        }

        &.ant-steps-item-active {
          background-color: @stepActiveBgColor;

          .ant-steps-item-content {
            .ant-steps-item-title {
              color: var(--kw-primary-color);
            }
          }

          &:before {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 24px 0 24px 24px;
            border-color: transparent transparent transparent #fff;
            background: transparent;
            transition: unset;
          }

          &:after {
            display: inline-block;
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 24px 0 24px 24px;
            border-color: #fff transparent #fff transparent;
            transform: translateX(0);
          }
        }

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