@import '../../../assets/scss/mixin.scss';



.view {
  width: 100%;
  margin-top: 15px;
  background: white;
  border-radius: 16px;
  padding: 15px 10px;
  @include flexMixer(start);

  .checkbox2 {
    width: 19px;
    height: 19px;
    background: #ffffff;
    border-radius: 50%;
    border: 1px solid #cbcbcb;
    margin-right: 10px;
  }

  .checkbox-img {
    width: 19px;
    height: 19px;
    background: #ffffff;
    border-radius: 50%;
    margin-right: 10px;
  }

  .checkbox {
    border-radius: 100%;

    .ant-checkbox-inner {
      border-radius: 100% ;
    }

    .ant-checkbox-checked:after {
      border-radius: 100%;
      border-color: #EC5C29;
    }

    .ant-checkbox-input:focus+.ant-checkbox-inner, .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-checked .ant-checkbox-inner {
      border-color: #EC5C29;
    }
    .ant-checkbox-checked .ant-checkbox-inner  {
      background: #EC5C29;
    }

    .ant-checkbox-input:focus + .ant-checkbox-inner, .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner {
      border-color: #d9d9d9;
    }
  }


  .left {
    margin-right: 11px;
    @include flexMixer(start);

    .cover-box {
      width: 75px;
      height: 75px;
      min-width: 75px;
      overflow: hidden;
      border-radius: 6px;
      position: relative;

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.34);
        z-index: 9;
        font-weight: 500;
        font-size: 12px;
        color: #ffffff;
        @include flexMixer(center, end);

        span {
          height: 30px;
          width: 100%;
          background: rgba(0, 0, 0, 0.73);
          @include flexMixer();
        }
      }

      .cover {
        width: 75px;
        height: 75px;
        overflow: hidden;
      }
    }
  }

  .info {
    width: 100%;

    .title {
      font-weight: bold;
      font-size: 15px;
      color: #333333;
      @include pointMixer(2);
    }

    .good-item-footer {
      width: 100%;
      @include flexMixer(space-between);
      margin-top: 15px;

      .price {
        font-weight: bold;
        font-size: 14px;
        color: #ec5c29;

        span {
          font-size: 18px;
        }

        .line-through {
          text-decoration: line-through;
          color: #999999;
          font-size: 13px;
          margin-left: 5px;
        }
      }

      .actions {
        @include flexMixer(start);

        .subtract,
        .add {
          width: 22px;
          height: 22px;
          background: #f7f7f7;
          border-radius: 4px;
          @include flexMixer();

          .icon {
            width: 12px;
            height: 12px;
          }
        }

        .subtract {
          .icon {
            width: 12px;
            height: 3px;
          }
        }

        .text {
          font-weight: bold;
          font-size: 16px;
          color: #000000;
          margin: 0 13px;
        }
      }
    }
  }
}
