@import '../../../../styles/abstracts/variables';

.sb-217-fix-custom-image-uploader {
  .profile-custom-image__wrapper {
    height: unset;
  }

  .ant-upload-drag-container {
    > .ant-row {
      padding-top: 22px;
      padding-bottom: 22px;
    }
  }
}

.profile-custom-image {
  width: 100%;
  height: 100%;
  display: flex;
  justify-items: center;
  align-items: center;
  cursor: pointer;

  .img-wrapper {
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  .overlay-update {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1;

    .opacity {
      opacity: 0.9;
      z-index: -1;
      position: absolute;
      width: 100%;
      height: 100%;
      background: white;
    }
  }

  &:hover .overlay-update {
    display: flex;
  }

  .btn-delete {
    position: absolute;
    top: -12px;
    right: -12px;
    z-index: 99;
    width: 24px;
    height: 24px;
    border: none;
    background-color: $white;
    padding: 0;

    svg {
      width: 24px;
      height: 24px;
    }
  }

  &__wrapper {
    width: 100%;
    height: 198px;
    position: relative;

    .ant-upload-drag-container {
      background-color: $white;
      border-radius: 8px;
    }

    .ant-upload-drag {
      border-radius: 8px;
      .ant-upload {
        padding: 0;
      }
    }

    .ant-upload--has-data {
      .ant-upload {
        border: none;
      }
    }

    .ant-upload-picture-card-wrapper {
      width: 100%;
      height: 100%;
    }

    .ant-upload.ant-upload-select-picture-card {
      display: block;
      width: 100%;
      height: 100%;
      position: relative;
      margin: 0;
      background-color: $white;

      .ant-upload {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0;
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%;
      }
    }
  }

  &__preview-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
      height: auto;
      object-fit: contain;
      border-radius: 8px;
      max-width: 231px;
      max-height: 102px;
    }
  }
}