"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Actions = exports.StyledFileInfo = exports.Details = exports.setDefaultImageStyles = exports.Image = exports.Wrapper = void 0;
const styled_1 = require("../../../styled");
const constants_1 = require("../../constants");
const FileInfo_1 = require("../../FileInfo");
exports.Wrapper = styled_1.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 {
    .${constants_1.previewFileUploaderClassnames.details} {
      visibility: visible;
      opacity: 1;
    }
  }
`;
exports.Image = styled_1.styled.img `
  display: block;

  width: 120px;
  height: 120px;

  object-fit: contain;
`;
exports.setDefaultImageStyles = exports.Image.withComponent;
exports.Details = styled_1.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,
    });
}};
`;
exports.StyledFileInfo = (0, styled_1.styled)(FileInfo_1.FileInfo) `
  justify-content: center;

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