@prefix: pisell-image-card;

// 默认尺寸
@default-width: 100%;
@default-height: 100%;

// 状态颜色
@active-border-color: #1890ff;
@disabled-opacity: 0.6;

// 文字降级样式
@text-fallback-bg: #f0f0f0;
@text-fallback-color: #999;
@text-fallback-font-size: 24px;

.@{prefix} {
  position: relative;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;

  // 图片元素
  &__image {
    width: 100%;
    height: 100%;
    display: block;
  }

  // 文字降级展示
  &__text-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: @text-fallback-bg;
    color: @text-fallback-color;
    font-size: @text-fallback-font-size;
    font-weight: 500;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  // 填充模式：cover
  &--cover &__image {
    object-fit: cover;
  }

  // 填充模式：contain
  &--contain &__image {
    object-fit: contain;
  }

  // 填充模式：fill
  &--fill &__image {
    object-fit: fill;
  }

  // 填充模式：none
  &--none &__image {
    object-fit: none;
  }

  // 激活状态
  &--active {
    border: 2px solid @active-border-color;
  }

  // 禁用状态
  &--disabled {
    opacity: @disabled-opacity;
    cursor: not-allowed;
    pointer-events: none;
  }

  // 加载状态
  &--loading {
    cursor: wait;
  }

  // 状态 extra 内容
  &__extra {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}