.wx-coolui-nav {
  border-bottom: 1px solid transparent;
  height       : 83rpx;

  &.border {
    border-bottom: 1px solid #eee;
  }

  .nav-inner {
    white-space: nowrap;

    .item {
      display    : inline-block;
      text-align : center;
      height     : 84rpx;
      font-size  : 0;
      line-height: 0;
      color      : #333;
      transition : color 0.4s;

      .text {
        position   : relative;
        display    : inline-block;
        line-height: 84rpx;
        font-size  : 28rpx;
        width      : 100%;

        &>view:first-child {
          position     : relative;
          z-index      : 1;
          overflow     : hidden;
          text-overflow: ellipsis;
          white-space  : nowrap;
        }
      }

      &.round {
        .text {
          padding: 0 20px;
          width  : calc(100% - 40px);
        }

        .line {
          display         : block;
          position        : absolute;
          left            : 50%;
          transform       : translateX(-50%) translateY(50%);
          bottom          : 50%;
          width           : 100%;
          height          : 60%;
          background-color: #ccc;
          transition      : width 0.4s;
          border-radius   : 50px;
          z-index         : 0;
        }
      }


      &.plain {
        .text {
          padding: 0 20px;
          width  : calc(100% - 40px);
        }

        .line {
          display         : block;
          position        : absolute;
          left            : 50%;
          transform       : translateX(-50%) translateY(50%);
          bottom          : 50%;
          width           : calc(100% - 2px);
          height          : 60%;
          background-color: transparent !important;
          border          : 1px solid #ccc;
          transition      : width 0.4s;
          border-radius   : 50px;
          z-index         : 0;
        }
      }

      &.line {
        .text {
          .line {
            display         : block;
            position        : absolute;
            left            : 50%;
            transform       : translateX(-50%);
            bottom          : 0;
            width           : 0;
            height          : 4rpx;
            background-color: transparent;
            transition      : width 0.4s;
          }
        }

        &.on {
          color: #0cba70;

          .text {
            .line {

              width        : 100%;
              // transition: width 0.4s;
            }
          }
        }
      }


    }
  }
}