.s-upload {
  ::v-deep {
    .s-grid-item {
      &__wrap {
        height: $upload-height;
        background: none;
      }

      &__content {
        display: block;
        flex: none;
        width: 100%;
        height: 100%;
        padding: 0;
      }
    }
  }

  &__slot {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }

  &__upload {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: $upload-upload-background-color;

    &:active {
      background-color: $upload-upload-active-color;
    }

    ::v-deep &-icon {
      font-size: $upload-icon-size;
      color: $upload-icon-color;
    }

    &-text {
      font-size: $upload-text-font-size;
      margin-top: $padding-xs;
      color: $upload-text-color;
    }

    &--disabled {
      opacity: $upload-disabled-opacity;
    }
  }

  &__preview {
    position: relative;
    height: 100%;
    background-color: $upload-upload-background-color;

    ::v-deep &-image,
    &-video {
      display: block;
      width: 100%;
      height: 100%;
    }

    ::v-deep .s-image {

      &__loading,
      &__error {
        background: none;
      }
    }

    &-delete {
      font-size: $upload-delete-icon-size;
      position: absolute;
      top: 12rpx;
      right: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.5em;
      height: 1.5em;
      color: $white;
      border-radius: 50%;
      background-color: rgba($black, .75);
    }
  }

  &__file {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    background-color: $upload-file-background-color;

    ::v-deep &-icon {
      font-size: $upload-file-icon-size;
      color: $upload-file-icon-color;
    }

    &-name {
      font-size: $upload-file-name-font-size;
      box-sizing: border-box;
      width: 100%;
      margin-top: $upload-file-name-margin-top;
      padding: $upload-file-name-padding;
      text-align: center;
      color: $upload-file-name-text-color;
    }
  }

  &__play {
    font-size: 64rpx;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: .8;
    color: white;
  }

  &__mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: $white;
    background-color: $upload-mask-background-color;

    & ::v-deep &-icon {
      font-size: $upload-mask-icon-size;
      color: $white;
    }

    &-message {
      font-size: $upload-mask-message-font-size;
      line-height: $upload-mask-message-line-height;
      margin-top: 12rpx;
      padding: 0 $padding-base;
    }
  }
}