import { Box, styled } from '@mui/material';

import imageClasses from './classes';

const ImageWrapper = styled(Box)({
	overflow: 'hidden',
	position: 'relative',
	verticalAlign: 'bottom',
	display: 'inline-block',
	[`& .${imageClasses.wrapper}`]: {
		width: '100%',
		height: '100%',
		verticalAlign: 'bottom',
		backgroundSize: 'cover !important'
	},
	'& .lazy-load-image-background.black-and-white': {
		filter: 'grayscale(1)'
	},

	'& .lazy-load-image-background.black-and-white.lazy-load-image-loaded': {
		filter: 'grayscale(0)',
		transition: 'filter .3s'
	},

	'& .lazy-load-image-background.black-and-white > img': {
		opacity: 0
	},

	'& .lazy-load-image-background.black-and-white.lazy-load-image-loaded > img': {
		opacity: 1,
		transition: 'opacity .3s'
	},

	'& .lazy-load-image-background.blur': {
		filter: 'blur(15px)'
	},

	'& .lazy-load-image-background.blur.lazy-load-image-loaded': {
		filter: 'blur(0)',
		transition: 'filter .3s'
	},

	'& .lazy-load-image-background.blur > img': {
		opacity: 0
	},

	'& .lazy-load-image-background.blur.lazy-load-image-loaded > img': {
		opacity: 1,
		transition: 'opacity .3s'
	},

	'& .lazy-load-image-background.opacity': {
		opacity: 0
	},

	'& .lazy-load-image-background.opacity.lazy-load-image-loaded': {
		opacity: 1,
		transition: 'opacity .3s'
	}
});

export default ImageWrapper;