@use 'sass:map';
@use 'mixins/mixins' as *;
@use 'mixins/function' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

.smart-design-component-warp {
  // display: inline-block;

  display: inline-flex;
  padding: 0;
  margin: 0;
  vertical-align: middle;

  .smart-design-image-warp {
    cursor: context-menu;

    .small {
      width: 28px;
      height: 28px;
      font-size: 12px;
      line-height: 28px;
    }

    .middle {
      width: 42px;
      height: 42px;
      font-size: 18px;
      line-height: 42px;
    }

    .large {
      width: 64px;
      height: 64px;
      font-size: 28px;
      line-height: 64px;
    }

    .image-small {
      width: 180px;
      height: 100px;
    }

    .image-middle {
      width: 160px;
      height: 160px;
      margin: 0 24px 24px 0;
      border: 1px solid #ecedf1;
      border-radius: 3.55px;
    }

    .is-round {
      border-radius: 50%;
    }

    .smart-design-name {
      font-weight: bold;
      color: #fff;
      text-align: center;
      background-color: orange;
    }

    .img-table-list {
      padding-left: 4px;
      font-family: PingFangSC-Regular, sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: #333746;
    }

    .img-num {
      color: #3058ee;
    }

    .scale-down {
      object-fit: scale-down;
    }

    .show-pointer {
      cursor: pointer;
    }
  }

  .smart-design-text-warp {
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;

    .small {
      font-size: 12px;
    }
  }

  .smart-design-text-warp::after {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    content: '';
  }

  .smart-design-text-warp > span {
    word-break: keep-all;
    vertical-align: middle;
  }
}