/***********************************************
         Invenio app RDM Image Overrides
***********************************************/

.ui.placeholder.image {
  &.mini {
    height: @miniWidth;
    width: @miniWidth;
  }

  &.tiny {
    height: @tinyWidth;
    width: @tinyWidth;
  }

  &.small {
    height: @smallWidth;
    width: @smallWidth;
  }

  &.medium {
    height: @mediumWidth;
    width: @mediumWidth;
  }

  &.large {
    height: @largeWidth;
    width: @largeWidth;
  }

  &.big {
    height: @bigWidth;
    width: @bigWidth;
  }

  &.huge {
    height: @hugeWidth;
    width: @hugeWidth;
  }

  &.massive {
    height: @massiveWidth;
    width: @massiveWidth;
  }
}

.ui.image.community-image {

  &.mini {
    width: 45px;
    min-width: 45px;

    img {
      max-height: 45px;
      min-width: 45px;
      object-fit: contain;
    }
  }

  img {
    max-height: @tinyWidth;
    min-width: @tinyWidth;
    max-width: @mediumWidth;
    object-fit: contain;
  }
}

.ui.image.community-logo {

  img {
    height: @communityItemLogoWidth !important; // needs to override height set for images in items by SUI
    object-fit: contain;
  }

  &.settings {
    img {
      height: @mediumWidth !important;
    }
  }

}

.ui.items {

  &.unstackable > .item > .image {
    &.mini {
      width: @miniWidth !important;
      min-width: @miniWidth !important;

      img {
        max-height: @miniWidth;
        min-width: @miniWidth;
        object-fit: contain;
      }
    }
  }

  .ui.image.community-logo {
    img {
      height: @communityItemLogoWidth !important; // needs to override height set for images in items by SUI
      width: @communityItemLogoWidth !important; // needs to override height set for images in items by SUI
      object-fit: contain;
    }
  }
}


.ui.image.community-header-logo {
  height: inherit;
  max-width: @tinyWidth;
  object-fit: contain;
}

.image.avatar.tiny {
  height: @lineHeight;
}
