@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';

.#{$hashClassName}.cn-ui-m-oss-image-upload-box {
  .cn-ui-m-oss-image-upload {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * #{$m-s-12});
    margin-left: calc(-1 * #{$m-s-12});

    &-item {
      margin-left: $m-s-12;
      margin-top: $m-s-12;
      position: relative;
      border-radius: $m-s-8;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      &-error {
        width: 100%;
        height: 100%;
        border-radius: $m-s-8;
        background-color: $m-color-bg-toast;
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        top: 0;
        right: 0;
        font-size: $m-font-size-caption;
        color: $m-color-bg-white;
        line-height: $m-font-lineheight-1;

        &-text {
          padding-top: 8px;
        }
      }

      &-remove {
        position: absolute;
        top: 0;
        right: 0;
        color: #fff;
        cursor: pointer;
        width: $m-s-24;
        height: $m-s-24;

        &-inner {
          float: right;
          display: flex;
          align-items: center;
          justify-content: center;
          width: $m-s-16;
          height: $m-s-16;
          background-color: $m-color-bg-toast;
          border-radius: 0 0 0 $m-s-4;
        }
      }

      &-uploading {
        width: 100%;
        height: 100%;
        border-radius: $m-s-8;
        background-color: $m-color-bg-toast;
        position: absolute;
        top: 0;
        right: 0;
        color: $m-color-bg-white;
        display: flex;
        align-items: center;
        justify-content: center;

        &-text {
          font-size: $m-font-size-caption;
          line-height: $m-font-lineheight-1;
          font-weight: $m-font-weight-medium;
        }
      }

      &-img {
        width: 100%;
        height: 100%;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
      }
    }

    &-add {
      border: $m-s-1 solid #d5d8dd;
      color: #d5d8dd;
      cursor: pointer;
      position: relative;

      .cn-ui-m-oss-upload-confirm {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      &-inner {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      input {
        border: 0;
        outline: 0;

        &:focus {
          outline: none;
        }
      }
    }

    &-single {
      width: 100%;
      height: $m-s-176;
      margin: 0;

      .cn-ui-m-oss-image-upload-item {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    }

    &--empty {
      height: auto;
      margin: 0;
    }
  }
}