@use 'sass:math';
@use '../style/base' as *;

@include bem(upload) {
  @include e(preview) {
    @include universal;
    width: var(--sar-upload-preview-width);
    height: var(--sar-upload-preview-height);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--sar-upload-preview-border-radius);
    background-color: var(--sar-upload-preview-bg);

    @include m(is-video) {
      background-color: var(--sar-upload-preview-video-bg);
    }
  }

  @include e(image) {
    @include universal;
    width: 100%;
    height: 100%;
  }

  @include e(video-wrapper) {
    @include universal;
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  @include e(video) {
    @include universal;
    width: 100%;
    height: 100%;
    border-radius: inherit;

    /* #ifdef APP-PLUS */
    display: none;
    /* #endif */
  }

  @include e(video-play) {
    @include universal;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: var(--sar-upload-video-play-color);
    background-color: var(--sar-upload-video-play-bg);
    cursor: pointer;
  }

  @include e(video-play-icon) {
    width: 80rpx;
    height: 80rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  @include e(file) {
    @include universal;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--sar-upload-file-color);
  }

  @include e(file-icon) {
    font-size: var(--sar-upload-file-icon-font-size);
  }

  @include e(file-name) {
    @include universal;
    max-width: 100%;
    padding: 0 var(--sar-upload-file-name-padding-x);
    margin-top: var(--sar-upload-file-name-margin-top);
    font-size: var(--sar-upload-file-name-font-size);
  }

  @include e(status) {
    @include universal;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--sar-upload-status-color);
    background-color: var(--sar-upload-status-bg);
  }

  @include e(status-icon) {
    font-size: var(--sar-upload-status-icon-font-size);
  }

  @include e(status-message) {
    @include universal;
    max-width: 100%;
    padding: 0 var(--sar-upload-status-message-padding-x);
    margin-top: var(--sar-upload-status-message-margin-top);
    font-size: var(--sar-upload-status-message-font-size);
  }

  @include e(remove) {
    @include universal;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
    padding-right: var(--sar-upload-close-right);
    padding-top: var(--sar-upload-close-top);
  }

  @include e(close) {
    @include universal;
    align-items: center;
    justify-content: center;
    width: var(--sar-upload-close-size);
    height: var(--sar-upload-close-size);
    border-radius: var(--sar-rounded-full);
    font-size: var(--sar-upload-close-font-size);
    color: var(--sar-upload-close-color);
    background-color: var(--sar-upload-close-bg);
    cursor: pointer;
  }
}