text: import { AnimationClassNames, getGlobalClassNames } from '../../Styling';
  import { getWindow } from '../../Utilities';
  var GlobalClassNames = {
      root: 'ms-Image',
      rootMaximizeFrame: 'ms-Image--maximizeFrame',
      image: 'ms-Image-image',
      imageCenter: 'ms-Image-image--center',
      imageContain: 'ms-Image-image--contain',
      imageCover: 'ms-Image-image--cover',
      imageCenterContain: 'ms-Image-image--centerContain',
      imageCenterCover: 'ms-Image-image--centerCover',
      imageNone: 'ms-Image-image--none',
      imageLandscape: 'ms-Image-image--landscape',
      imagePortrait: 'ms-Image-image--portrait'
  };
  export var getStyles = function (props) {
      var className = props.className, width = props.width, height = props.height, maximizeFrame = props.maximizeFrame, isLoaded = props.isLoaded, shouldFadeIn = props.shouldFadeIn, shouldStartVisible = props.shouldStartVisible, isLandscape = props.isLandscape, isCenter = props.isCenter, isContain = props.isContain, isCover = props.isCover, isCenterContain = props.isCenterContain, isCenterCover = props.isCenterCover, isNone = props.isNone, isError = props.isError, isNotImageFit = props.isNotImageFit, theme = props.theme;
      var classNames = getGlobalClassNames(GlobalClassNames, theme);
      var ImageFitStyles = {
          position: 'absolute',
          left: '50% /* @noflip */',
          top: '50%',
          transform: 'translate(-50%,-50%)' // @todo test RTL renders transform: translate(50%,-50%);
      };
      // Cut the mustard using msMaxTouchPoints to detect IE11 which does not support CSS object-fit
      var window = getWindow();
      var supportsObjectFit = window !== undefined && window.navigator.msMaxTouchPoints === undefined;
      var fallbackObjectFitStyles = (isContain && isLandscape) || (isCover && !isLandscape) ? { width: '100%', height: 'auto' } : { width: 'auto', height: '100%' };
      return {
          root: [
              classNames.root,
              theme.fonts.medium,
              {
                  overflow: 'hidden'
              },
              maximizeFrame && [
                  classNames.rootMaximizeFrame,
                  {
                      height: '100%',
                      width: '100%'
                  }
              ],
              isLoaded && shouldFadeIn && !shouldStartVisible && AnimationClassNames.fadeIn400,
              (isCenter || isContain || isCover || isCenterContain || isCenterCover) && {
                  position: 'relative'
              },
              className
          ],
          image: [
              classNames.image,
              {
                  display: 'block',
                  opacity: 0
              },
              isLoaded && [
                  'is-loaded',
                  {
                      opacity: 1
                  }
              ],
              isCenter && [classNames.imageCenter, ImageFitStyles],
              isContain && [
                  classNames.imageContain,
                  supportsObjectFit && {
                      width: '100%',
                      height: '100%',
                      objectFit: 'contain'
                  },
                  !supportsObjectFit && fallbackObjectFitStyles,
                  ImageFitStyles
              ],
              isCover && [
                  classNames.imageCover,
                  supportsObjectFit && {
                      width: '100%',
                      height: '100%',
                      objectFit: 'cover'
                  },
                  !supportsObjectFit && fallbackObjectFitStyles,
                  ImageFitStyles
              ],
              isCenterContain && [
                  classNames.imageCenterContain,
                  isLandscape && {
                      maxWidth: '100%'
                  },
                  !isLandscape && {
                      maxHeight: '100%'
                  },
                  ImageFitStyles
              ],
              isCenterCover && [
                  classNames.imageCenterCover,
                  isLandscape && {
                      maxHeight: '100%'
                  },
                  !isLandscape && {
                      maxWidth: '100%'
                  },
                  ImageFitStyles
              ],
              isNone && [
                  classNames.imageNone,
                  {
                      width: 'auto',
                      height: 'auto'
                  }
              ],
              isNotImageFit && [
                  !!width &&
                      !height && {
                      height: 'auto',
                      width: '100%'
                  },
                  !width &&
                      !!height && {
                      height: '100%',
                      width: 'auto'
                  },
                  !!width &&
                      !!height && {
                      height: '100%',
                      width: '100%'
                  }
              ],
              isLandscape && classNames.imageLandscape,
              !isLandscape && classNames.imagePortrait,
              !isLoaded && 'is-notLoaded',
              shouldFadeIn && 'is-fadeIn',
              isError && 'is-error'
          ]
      };
  };
  //# sourceMappingURL=Image.styles.js.map