@import "../../settings/variables";
@import "./file_explorer";

$uploader-height: 411px;
$content-height: $uploader-height + 2 * spacing(xl);
$dropzone-height: 96px;
$dropzone-height-with-icon: 176px;
$error-banner-margin-top: spacing(lg);
$error-banner-margin-bottom: 3px;
$list-margin-top: spacing(sm);
$list-border-width: 1px;

:export {
  uploaderHeight: $uploader-height;
  errorBannerMarginTop: $error-banner-margin-top;
  errorBannerMarginBottom: $error-banner-margin-bottom;
  listMarginTop: $list-margin-top;
  listBorderWidth: $list-border-width;
  dropzoneHeight: $dropzone-height;
}

.uploader {
  $root: #{&};

  height: $content-height;
  max-height: $content-height;
  padding: spacing(xl) spacing(xl) + spacing(lg) spacing(xl) spacing(xl);
  overflow-y: hidden;

  // Preserve element's shadows
  &__error-banner {
    margin-top: $error-banner-margin-top;
    margin-bottom: $error-banner-margin-bottom;
    margin-right: 2px;
  }

  // Safari adjustment.
  &__dropzone-wrapper {
    #{$root} &,
    #{$root} & > div:first-child {
      display: flex;
      height: auto;
    }

    > div:last-child {
      display: none;
    }

    #{$root} & {
      min-height: $dropzone-height;

      &--with-icon {
        min-height: $dropzone-height-with-icon;
      }
    }
  }

  &__dropzone {
    #{$root} & {
      height: auto;
      transition: none;
    }
  }

  &__list {
    margin-top: $list-margin-top;
    border: $list-border-width solid $thumbnail-list-border-color;
  }
}

// IE adjustment.
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .uploader {
    $root: #{&};

    &__dropzone-wrapper {
      #{$root} & {
        width: $source-width;

        > div:first-child {
          height: 100%;
        }
      }
    }
  }
}