@import 'src/_theme.scss';

.root {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: $ms-color-neutralDark;
  flex-wrap: wrap;
}

.image_container {
  height: 40vh;
  min-width: 40vh;

  &:not([disabled]) {
  cursor: pointer;
  }
  
  &__error {
    @extend .image_container;
    @extend .image_dropzone__reject;
  }

  &__loading {
    @extend .image_container;
  }

  .image {
    max-height: 100%;
    max-width: 100%;
  }

  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px;
  background-color: $ms-color-neutralTertiary;
  border: 1px solid $ms-color-neutralSecondaryAlt;
  color: $ms-color-neutralDark;
  transition-property: color, border-color, background-color;
  transition-duration: 0.3s;

  &:hover:not([disabled]), &:focus:not([disabled]) {
    border-color: $ms-color-themeDark;
    color: $ms-color-themeDark;
    background-color: $ms-color-themeLight;
  }
}

.image_dropzone {
  @extend .image_container;
  border-style: dashed;
  background-color: $ms-color-neutralPrimary;
  border: 1px solid $ms-color-neutralSecondaryAlt;
  color: $ms-color-neutralSecondaryAlt;

  &_icon {
    font-size: 15vh;
  }

  &:hover:not([disabled]), &:focus:not([disabled]) {
    border-color: $ms-color-neutralLight;
    color: $ms-color-neutralLight;
    background-color: $ms-color-neutralPrimaryAlt;
  }

  &__active {
    background: $ms-color-successBackground;
    border-color: $ms-color-success;
    color: $ms-color-success;
  }


  &__reject {
    background: $ms-color-errorBackground;
    border-color: $ms-color-error;
    color: $ms-color-error;
  }
}

