// .#{bem('app-image-upload')} {
//   @include set-component-css-var('app-image-upload', $app-image-upload);
// }

@include b('app-image-upload') {
  display: flex;
  align-items: center;

  .ivu-upload {
    display: inline-block;
    height: getCssVar('app-image-upload', 'box-height');
  }

  @include e('btn') {
    width: getCssVar('app-image-upload', 'box-width');
    height: getCssVar('app-image-upload', 'box-height');
    line-height: getCssVar('app-image-upload', 'box-height');
  }

  @include e('list-item') {
    position: relative;
    display: inline-block;
    width: getCssVar('app-image-upload', 'box-width');
    height: getCssVar('app-image-upload', 'box-height');
    margin-right: getCssVar('app-image-upload', 'list-item-margin');
    line-height: getCssVar('app-image-upload', 'box-height');
    text-align: center;
    background: getCssVar('app-image-upload', 'list-item-bg-color');
    border: getCssVar('app-image-upload', 'list-item-border');
    border-radius: getCssVar('app-image-upload', 'list-item-border-radius');
    box-shadow: getCssVar('app-image-upload', 'list-item-box-shadow');

    img {
      width: 100%;
      height: 100%;
      vertical-align: top;
    }

    &:hover {
      @include e('list-item-cover') {
        display: block;
      }
    }
  }

  @include e('list-item-cover') {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    background: getCssVar('app-image-upload', 'list-item-cover-bg-color');

    i {
      margin: getCssVar('app-image-upload', 'list-item-cover-i-margin');
      font-size: getCssVar('app-image-upload', 'list-item-cover-i-size');
      color: getCssVar('app-image-upload', 'list-item-cover-i-color');
      cursor: pointer;
    }

    img {
      width: 100%;
      height: 100%;
      vertical-align: top;
    }
  }
}

@include b('app-image-upload-upload-model') {
  @include e('model-img') {
    width: 100%;
  }
}
