@import (less) '../../utils/underline-utils.less';
:global {
  .nbugs-component-example {
    .item-wrap {
      padding: 14px 0 13px 15px;
      margin-top: 8px;
      background: #fff;
      &.bottom-line {
        .line-bottom;
      }

      .content {
        padding-bottom: 12px;
        display: flex;
        flex-direction: column;
        &.list-wrap {
          .line-bottom;
        }

        .title {
          font-size: 18px;
          font-weight: 500;
          color: #000;
          word-wrap: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          line-clamp: 1;

          /*! autoprefixer: off */
          -webkit-box-orient: vertical;

          /* autoprefixer: on */
        }

        .title-wrap {
          display: flex;
          align-items: center;
          font-size: 18px;
          color: #000;
          .left {
            .title;
            flex: 1;
          }
          .right {
            width: 100px;
            text-align: right;
            font-size: 14px;
            &.status {
              font-size: 14px;
              &.success {
                color: #1aad19;
              }
              &.progress {
                color: #1786ec;
              }
              &.pending {
                color: #1786ec;
              }
              &.refused {
                color: #e64340;
              }
              &.canceled {
                color: #888;
              }
              &.done {
                color: #888;
              }
            }
            > div {
              margin-right: 15px;
            }
          }
        }

        .desc {
          font-size: 12px;
          line-height: 1.4;
          color: #777;
          padding-top: 6px;
          max-height: 3em;
        }

        .ellipsis {
          display: -webkit-box;
          -webkit-line-clamp: 2;

          /*! autoprefixer: off */
          -webkit-box-orient: vertical;

          /*! autoprefixer: on */

          overflow: hidden;
        }
      }

      .footer {
        display: flex;
        justify-content: space-between;
        padding: 12px 0 0;
        padding-right: 15px;
        font-size: 12px;
        color: #777;
      }
    }
  }
}