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 Details = styled.div `
  position: absolute;
  inset: 0;

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

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

  visibility: ${({ $isOtherFile }) => ($isOtherFile ? 'visible' : 'hidden')};
  opacity: ${({ $isOtherFile }) => ($isOtherFile ? 1 : 0)};
  background-color: ${({ theme, $isOtherFile }) => !$isOtherFile ? theme.palette.background.modalShadow : 'none'};

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

  margin: ${({ theme, $isOtherFile }) => $isOtherFile ? theme.spacing(6, 0, 11) : 0};

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