import { styled } from '../../../styled';
import { previewFileUploaderClassnames } from '../../constants';
import { FileInfo } from '../../FileInfo';
export const Wrapper = styled.div `
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  justify-content: center;

  width: 100%;
  padding: ${({ theme }) => theme.spacing(4)};

  &:hover {
    .${previewFileUploaderClassnames.details} {
      visibility: visible;
      opacity: 1;
    }
  }
`;
export const Image = styled.img `
  display: block;

  width: 120px;
  height: 120px;

  object-fit: contain;
`;
export const setDefaultImageStyles = Image.withComponent;
export const Details = styled.div `
  position: absolute;
  inset: 0;

  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing(4)};
  align-items: center;
  justify-content: center;

  padding: ${({ theme }) => theme.spacing(4)};

  visibility: hidden;
  opacity: 0;
  background-color: ${({ theme }) => theme.palette.background.modalShadow};

  transition: ${({ theme }) => {
    return theme.transitions.create(['opacity', 'visibility'], {
        duration: theme.transitions.duration.standard,
    });
}};
`;
export const StyledFileInfo = styled(FileInfo) `
  justify-content: center;

  color: ${({ theme }) => theme.palette.primary.contrastText};
`;
export const Actions = styled.div `
  display: flex;
  gap: ${({ theme }) => theme.spacing(2)};
  justify-content: center;
`;
