@cartPrefixCls: cylon-cart-item;

.@{cartPrefixCls} {
  padding: @cart-item-padding;
  background-color: #fff;
  border-radius: @cart-item-border-radius;
  width: 100%;

  .storeWrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    .invalidPro {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        font-size: @cart-item-store-name-font-size;
        font-family: var(--light-font, SFProText-Medium, SFProText);
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }
    }
    .icon {
      display: inline-block;
      min-width: @cart-item-store-icon-size;
      height: @cart-item-store-icon-size;
      background: url('../../assets/shop.svg') no-repeat center center;
      background-size: 100%;
      margin: @cart-item-store-icon-margin;
    }
    .storeName {
      font-size: @cart-item-store-name-font-size;
      font-family: var(--light-font, SFProText-Medium, SFProText);
      width: @cart-item-store-name-with;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }
    .btnCoupons {
      min-width: @cart-item-btn-coupons-width;
      height: @cart-item-btn-coupons-height;
      outline: none;
      border: none;
      background-color: #FDE8E8;
      border-radius: @cart-item-btn-coupons-border-radius;
      font-family: var(--light-font, SFProText-Medium, SFProText);
      font-weight: 400;
      font-size: @cart-item-btn-coupons-font-size;
      color: var(--theme-color, #FF1659);
      padding: 0 10px;
    }
    .btnEmpty {
      width: @cart-item-btn-coupons-width;
      height: @cart-item-btn-coupons-height;
      outline: none;
      border: none;
      border-radius: @cart-item-btn-coupons-border-radius;
      font-family: var(--light-font, SFProText-Medium, SFProText);
      font-weight: 400;
      font-size: @cart-item-btn-coupons-font-size;
      background: rgba(0, 0, 0, 0.04);
      color: rgba(0, 0, 0, 0.85);
    }
  }

  .saleWrap {
    margin-top: @cart-item-salewrap-mt;
    padding-left: @cart-item-salewrap-pl;
    padding-right: @cart-item-salewrap-pr;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .tag {
      display: inline-block;
      width: @cart-item-salewrap-tag-width;
      height: @cart-item-salewrap-tag-height;
      line-height: @cart-item-salewrap-tag-height;
      background: linear-gradient(90deg, #FF5252 0%, #FF3434 100%);
      font-family: var(--light-font, SFProText-Medium, SFProText);
      font-weight: 400;
      border-radius: @cart-item-salewrap-tag-border-radius;
      font-size: @cart-item-salewrap-tag-font-size;
      color: #FFFFFF;
      text-align: center;
    }
    .sale {
      font-size: @cart-item-salewrap-sale-font-size;
      font-family: var(--light-font, SFProText-Medium, SFProText);
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      margin-left: @cart-item-salewrap-sale-ml;
    }
    .btnSat {
      display: inline-block;
      font-size: @cart-item-salewrap-btn-sat-font-size;
      font-family: var(--light-font, SFProText-Medium, SFProText);
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      .arrowRight {
        display: inline-block;
        width: @cart-item-salewrap-btn-sat-icon-size;
        height: @cart-item-salewrap-btn-sat-icon-size;
        background: url('../../assets/arrow-right.svg') no-repeat center center;
        background-size: 100%;
        vertical-align: text-bottom;
      }
    }
  }

  .commodityItem {
    margin-top: @cart-item-commodity-mt;
    // .fxm-swipe {
    //   right: -13px;
    // }
    .fxm-swipe-actions {
      top: 1px;
      bottom: 2px;
    }
    .fxm-swipe-actions-right {
      right: 1px;
    }
    .fxm-swipe-btn-text {
      width: 82px;
      text-align: center;
      white-space: normal;
    }
  }

  .commodityWrap {
    display: flex;
    align-items: center;
    padding: 0 12px;
    .imgWrap {
      position: relative;
      width: @cart-item-commodity-img-size;
      height: @cart-item-commodity-img-size;
      margin-left: @cart-item-commodity-img-ml;
      .price-down{
        position: absolute;
        right: 4*  @favorite-item-basic;
        top: 4*  @favorite-item-basic;
        background: rgba(20, 201, 126, 0.12);
        display: flex;
        align-items: center;
        padding: 2 * @favorite-item-basic;
        border-radius: 100* @favorite-item-basic 2* @favorite-item-basic 2* @favorite-item-basic 100* @favorite-item-basic;
        font-size: 12* @favorite-item-basic;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #14C97E;
        line-height: 14* @favorite-item-basic;
        img{
          width: 16 * @favorite-item-basic;
          margin-right: 6 * @favorite-item-basic;
          height: auto !important;
        }
      }
      &.couponIcon {
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 4px;
        img {
          width: 48px;
          height: 48px;
          display: block;
          margin: 10px auto;
          background-color: transparent;
        }
      }
      img {
        width: @cart-item-commodity-img-size;
        height: @cart-item-commodity-img-size;
        border-radius: @cart-item-commodity-img-border-radius;
        background-color: rgba(0, 0, 0, 0.04);
      }
    }
    .info {
      height: 100%;
      margin-left: @cart-item-commodity-info-ml;
      .productName {
        font-size: @cart-item-commodity-info-name-font-size;
        font-family: var(--light-font, SFProText-Medium, SFProText);
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        width: @cart-item-commodity-info-name-width;
      }
      .attrSelect {
        width: @cart-item-commodity-info-select-width;
        height: @cart-item-commodity-info-select-height;
        line-height: @cart-item-commodity-info-select-height;
        background: rgba(0, 0, 0, 0.04);
        border-radius: @cart-item-commodity-info-select-border-radius;
        padding-left: @cart-item-commodity-info-select-pl;
        margin: @cart-item-commodity-info-select-margin;
        display: flex;
        align-items: center;
        .attr {
          display: inline-block;
          width: @cart-item-commodity-info-select-attr-width;
          font-size: @cart-item-commodity-info-select-attr-font-size!important;
          font-family: var(--light-font, SFProText-Medium, SFProText);
          font-weight: 400;
          color: rgba(0, 0, 0, 0.45);
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .arrowBottom {
          display: inline-block;
          width: @cart-item-commodity-info-select-icon-size;
          height: @cart-item-commodity-info-select-icon-size;
          background: url('../../assets/arrow-down.svg') no-repeat center center;
          background-size: 100%;
          margin-left: @cart-item-commodity-info-select-icon-ml;
        }
      }
      .data {
        width: @cart-item-commodity-info-name-width;
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;

        .number-step-wrap{
          margin-top: 8px;
          margin-left: auto;
        }

        .outStock {
          font-family: var(--light-font, SFProText-Medium, SFProText);
          font-weight: 400;
          font-size: @cart-item-commodity-info-outstock-font-size;
          color: rgba(0, 0, 0, 0.45);
        }
        .giftNum {
          font-size: @cart-item-commodity-info-outstock-font-size;
          font-family: var(--light-font, SFProText-Medium, SFProText);
          font-weight: 400;
          color: rgba(0, 0, 0, 0.85);
        }
        .fxm-price, .fxm-price-icon {
          margin: 0;
        }
      }
    }
    .null-check {
      display: inline-block;
      width: @cart-item-checkbox-size;
      height: @cart-item-checkbox-size;
    }
    &.disabled {
      .productName {
        color: rgba(0, 0, 0, 0.45);
      }
    }
    &.invalid {
      .productName {
        color: rgba(0, 0, 0, 0.45);
      }
      .attrSelect {
        .attr {
          color: rgba(0, 0, 0, 0.25);
        }
      }
    }
  }
  .giftWrap {
    margin-top: 25px;
    .flag {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 20px;
      line-height: 20px;
      background: linear-gradient(90deg, #FF5252 0%, #FF3434 100%);
      border-radius: 0px 0px 4px 4px;
      font-size: 12px;
      font-family: var(--regular-font, SFProText-Medium, SFProText);
      font-weight: 500;
      color: #FFFFFF;
      text-align: center;
    }
    .attrSelect {
      width: 155px!important;
    }
  }

  .promotionWrap {
    margin-top: @cart-item-promotion-mt;
    font-size: @cart-item-promotion-font-size;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: @cart-item-salewrap-pl;
    padding-right: 12px;
    .tip {
      width: @cart-item-promotion-tip-width;
      font-family: var(--light-font, SFProText-Medium, SFProText);
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      margin-left: @cart-item-promotion-tip-ml;
    }
    .btnChange {
      font-family: var(--light-font, SFProText-Medium, SFProText);
      font-weight: 400;
      color: var(--theme-color, #FF1659);
      height: 18px;
      line-height: 18px;
    }
  }

  .alignCenter {
    display: inline-flex;
    align-items: center;
  }

  .textOver {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }

  .fxm-checkbox {
    width: @cart-item-checkbox-size;
    height: @cart-item-checkbox-size;
    .fxm-checkbox-inner {
      width: @cart-item-checkbox-size;
      height: @cart-item-checkbox-size;
    }
    &.fxm-checkbox-disabled {
      .fxm-checkbox-inner {
        background: #F5F5F5;
        border: 1px solid rgba(0, 0, 0, 0.08);
      }
    }
  } 

}