@use "./mixins/mixins.scss" as *;

%size {
  width: 100%;
  height: 100%;
}

@include b(image){
  position: relative;
  display: inline-block;
  overflow: hidden;
  
  @include e(inner) {
    @extend %size;
    vertical-align: top;
  }

  @include e(placeholder) {
    @extend %size;
    background: var(--color-bg-1);
  }

  @include e(error) {
    @extend %size;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    background: var(--color-bg-1);
    color: var(--el-text-color-placeholder);
    vertical-align: middle;
  }
  >.icon{
    width: inherit;
    height: inherit;
  }
  .error-image{
    @extend %size;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    background: var(--color-bg-1);
    color: var(--el-text-color-placeholder);
    vertical-align: middle;
  }
}
// TODO 加载中和加载失败的样式待定