.Ol {
  &__item {
    .text-12();
    background-color: @white;
    border-radius: @border-radius-md;
    margin-bottom: @padding-sm;
  }
  &__head {
    height: 44px;
    padding: 0 @padding-xs;
    border-bottom: 1px solid @grey-border;
    display: flex;
    justify-content: space-between;
    &-left,
    &-right {
      display: flex;
      align-items: center;
    }
    &-image {
      position: relative;
      width: 25px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin-right: 4px;
      background: url(~@/assets/images/leaderBorder.png) no-repeat center;
      background-size: 100%;
    }
    &-crown,
    &-leader {
      position: absolute;
    }
    &-crown {
      width: 10px;
      height: 10px;
      background: url(~@/assets/images/leaderIcon.png) no-repeat center;
      background-size: 100%;
      top: -2px;
      right: -1px;
    }
    &-leader {
      width: 100%;
      height: 8px;
      background: url(~@/assets/images/leader-name.png) no-repeat center;
      bottom: 0px;
      background-size: auto 100%;
    }
    &-red {
      color: @red;
    }
    &-fail {
      color: @text-grey;
    }
    &-success {
      color: @green;
    }
    &-count {
      padding-right: @padding-unit;
    }
    &-avator {
      // margin-left: @padding-unit - 2;
      // margin-top: @padding-unit - 2;
      border-radius: 50%;
      overflow: hidden;
    }
    &-group {
      position: absolute;
      left: 2px;
      top: -2px;
    }
    &-name {
      color: @text-grey;
    }
    &-state {
      color: @red;
    }
  }
  &__foot {
    border-top: 1px solid @grey-border;
    padding: @padding-sm - 2 @padding-xs;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-text {
      color: @text-grey;
    }
    &-btns {
      text-align: right;
      .cr-button {
        margin-left: @padding-unit;
        min-width: 86px;
      }
    }
  }
  &__noData {
    .cr-button {
      background: transparent;
    }
  }
}
.Ol {
  &__body {
    &-item {
      padding: @padding-sm - 2 @padding-xs;
      display: flex;
      border-bottom: 1px solid @grey-border;
      &:last-child {
        border-bottom: 0;
      }
    }
    &-image {
      position: relative;
    }
    &-img {
      width: 85px;
      height: 85px;
      border-radius: 8px;
      overflow: hidden;
    }
    &-tag {
      position: absolute;
      top: 0;
      left: 0;
      font-size: @font-size-12;
      color: @white;
      width: 45px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
      border-radius: 6px 0 6px 0;
    }
    &-content {
      margin-left: @padding-sm - 2;
      flex: 1;
    }
    &-row {
      display: flex;
      justify-content: space-between;
    }
    &-title {
      .text-13();
      color: @text-color;
      flex: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    &-salePrice {
      .text-13();
      color: @text-color;
      width: 78px;
      text-align: right;
      .Ol__body-skus {
        display: block;
      }
    }
    &-count {
      .text-12();
      display: block;
      margin-left: auto;
      color: @text-grey;
    }
    &-sku {
      &s {
        min-height: 12px;
        margin-bottom: @padding-unit;
        .cr-button {
          margin-left: auto;
          .text-12();
          min-width: 68px;
        }
      }
      .text-12();
      display: flex;
      align-items: center;
      color: @text-grey;
      a {
        .text-12();
        margin-left: auto;
        color: @red;
      }
    }
    &-val {
      color: @gray-5 !important;
    }
  }
}
