@activeColor: #ed2121;
@disactiveColor: #bfbfbf;
.csWraper {
  display: flex;
  .csNodeOut {
    position: relative;
    padding-right: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .csNodeIn {
      background: @disactiveColor;
      height: 40px;
      display: flex;
      align-items: center;
      flex: 1 1 auto;
      padding-left: 15px;
      .csIndex {
        width: 21px;
        height: 21px;
        border-radius: 50%;
        background: #fff;
        display: inline-block;
        text-align: center;
        color: @disactiveColor;
      }
      .csName {
        color: #fff;
        margin-left: 8px;
        font-size: 14px;
      }
    }
    .csTriangle {
      z-index: 1;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-left: 18px solid @disactiveColor;
      border-bottom: 20px solid transparent;
    }
    .csTriangleBack {
      position: absolute;
      left: -18px;
      background: @disactiveColor;
      .csWhiteTriagle {
        width: 0;
        height: 0;
        border-top: 20px solid @disactiveColor;
        border-left: 18px solid #fff;
        border-bottom: 20px solid @disactiveColor;
      }
    }
    &:last-child {
      padding-right: 0;
      .csTriangle {
        display: none;
      }
    }
    &:first-child {
      .csTriangleBack {
        display: none;
      }
    }
  }
  .beforeCurrent {
    .csNodeIn {
      background: @activeColor;
      .csIndex {
        color: @activeColor;
      }
    }
    .csTriangle {
      border-left: 18px solid @activeColor;
    }
    .csTriangleBack {
      .csWhiteTriagle {
        border-top: 20px solid @activeColor;
        border-left: 18px solid #fff;
        border-bottom: 20px solid @activeColor;
      }
    }
  }
}
