.#{$iot-prefix}--image-uploader {
  background: $ui-02;
  display: flex;
  height: calc(100% - 1rem);
  margin-top: $spacing-05;
  overflow: hidden;
  padding: 9rem $spacing-05 $spacing-05; /* stylelint-disable-line declaration-property-unit-blacklist */
  width: 100%;

  &-icon {
    display: inline-flex;
    justify-content: center;
    margin-right: $spacing-05;
    min-width: $spacing-07;
  }

  &-drop-label-text {
    color: $interactive-01;
    display: block;
    @include carbon--type-style('productive-heading-02');
    margin-bottom: $spacing-03;
  }

  &-drop-description-text {
    margin-bottom: $spacing-06;
  }

  &-content {
    max-width: 32rem;
  }

  .#{$prefix}--file {
    height: calc(100% - 2rem);
    left: $spacing-05;
    position: absolute;
    top: $spacing-05;
    width: calc(100% - 2rem);
  }

  .#{$prefix}--file-browse-btn {
    height: 100%;
    max-width: unset;
    width: 100%;
  }

  .#{$prefix}--file__drop-container {
    height: 100%;
    width: 100%;
  }

  &:not(.#{$iot-prefix}--image-uploader__medium) .#{$iot-prefix}--btn:not(:last-child) {
    margin-right: $spacing-05;
  }

  &-url-wrapper {
    align-items: center;
    display: flex;
    flex-direction: row;
    margin: auto;
    max-width: 38rem;
    width: 100%;

    input {
      margin-right: $spacing-05;
    }
  }

  &.#{$iot-prefix}--image-uploader__url {
    align-items: center;
    padding-top: 0;

    .#{$iot-prefix}--btn:not(:last-child) {
      margin-right: $spacing-02;
    }
  }

  .#{$prefix}--inline-notification {
    margin: auto;
    margin-top: 1rem;
  }
}

.#{$iot-prefix}--image-uploader.#{$iot-prefix}--image-uploader__medium {
  padding-top: $spacing-07;

  .#{$iot-prefix}--image-uploader-url-wrapper {
    flex-direction: column;

    .#{$prefix}--text-input-wrapper {
      width: 100%;
    }
    .#{$iot-prefix}--btn:not(:last-child) {
      margin-right: 0;
    }

    input {
      margin-bottom: $spacing-05;
      margin-right: 0;
    }
  }
  .#{$iot-prefix}--image-uploader-drop-description-text,
  .#{$iot-prefix}--image-uploader-icon {
    display: none;
  }

  .#{$iot-prefix}--image-uploader-drop-label-text {
    @include carbon--type-style('productive-heading-01');
    margin-bottom: $spacing-05;
  }

  .#{$iot-prefix}--btn {
    width: 100%;
  }

  .#{$iot-prefix}--btn:not(:last-child) {
    margin-bottom: $spacing-05;
  }

  .#{$prefix}--inline-notification {
    min-width: unset;
  }

  .#{$prefix}--inline-notification__details {
    margin: 0;
  }
  .#{$prefix}--inline-notification__icon {
    margin-left: $spacing-03;
    margin-right: $spacing-03;
  }

  .#{$prefix}--inline-notification__title {
    display: none;
  }
}

.#{$iot-prefix}--image-uploader.#{$iot-prefix}--image-uploader__mediumwide {
  padding-top: $spacing-07;

  .#{$iot-prefix}--image-uploader-drop-description-text {
    @include carbon--type-style('body-long-01');
  }

  .#{$iot-prefix}--image-uploader-url-wrapper {
    flex-direction: row;
  }
}

.#{$iot-prefix}--image-uploader.#{$iot-prefix}--image-uploader__largewide {
  .#{$iot-prefix}--image-uploader-icon {
    margin-left: $spacing-07;
    margin-right: $spacing-09;
  }
}