@prefix: img-uploader;

.@{prefix} {
  &- {
    &root {
      position: relative;
    }

    &textContainer {
      display: flex;
      align-items: center;
    }

    &label {
      white-space: nowrap;
    }

    &imgContainer {
      margin-top: 6px;
      position: relative;
      height: 150px;
      border: 1px solid #DDDDDD;
      background-color: #f6f6f6;

      .ant-spin-nested-loading,
      .ant-spin-container {
        height: 100%;
      }
    }

    &img {
      height: 100%;
    }

    &uploadButtonContainer {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 300ms;
      background-color: rgba(50, 50, 50, 0.6);

      &:hover {
        opacity: 1;
      }
    }

    &linkbutton {
      cursor: pointer;
      color: #FFFFFF;
      user-select: none;

      &:hover {
        color: #6cbdff;
      }
    }

  }
}