var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { FV, PC } from '@filerobot/common';
import { Info } from '@scaleflex/icons';
import styled, { css } from 'styled-components';
import { fileItemVariants } from './FileItem.mixin';
var FileItem = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  min-width: 214px;\n  max-height: 250px;\n\n  ", "\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_ref) {
  var palette = _ref.theme.palette;
  return palette[PC.BordersItem];
}, function (_ref2) {
  var palette = _ref2.theme.palette;
  return palette[PC.BackgroundHover];
}, function (_ref3) {
  var breakpoints = _ref3.theme.breakpoints;
  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", " {\n      min-width: 178px;\n      max-height: 230px;\n    }\n\n    ", " & {\n      min-width: 178px;\n      max-height: 230px;\n    }\n\n    ", " & {\n      min-width: 178px;\n      max-height: 230px;\n    }\n\n    ", " & {\n      min-width: 178px;\n      max-height: 230px;\n    }\n\n    ", " & {\n      min-width: 178px;\n      max-height: 230px;\n    }\n  "])), breakpoints.between('xs', 'lg'), breakpoints.classes.lg, breakpoints.classes.md, breakpoints.classes.sm, breakpoints.classes.xs);
}, function (_ref4) {
  var palette = _ref4.theme.palette;
  return palette[PC.BackgroundActive];
}, function (props) {
  return fileItemVariants(props);
});
var FileItemIconWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: calc(100% - 56px); // 56px is the height of file info block for > lg screens\n\n  ", " {\n    height: calc(100% - 52px); // 52px is the height of file info block for < lg screens\n  }\n\n  img {\n    z-index: 1;\n    max-width: 100%;\n    max-height: 100%;\n  }\n"])), function (_ref5) {
  var breakpoints = _ref5.theme.breakpoints;
  return breakpoints.down('lg');
});
var UploadInfoBar = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 22px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 3px 3px 0 0;\n  position: absolute;\n  color: ", ";\n  top: 0;\n  left: 0;\n  z-index: 2;\n  visibility: hidden;\n  opacity: 1;\n  transition: all 150ms ease-out;\n  ", "\n  ", ";\n"])), function (_ref6) {
  var palette = _ref6.theme.palette;
  return palette[PC.ButtonPrimaryText];
}, function (_ref7) {
  var palette = _ref7.theme.palette,
    error = _ref7.error;
  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    background-color: ", ";\n\n    ", "\n  "])), palette[PC.Error], error && "\n      opacity: 1;\n      visibility: visible;\n    ");
}, function (_ref8) {
  var typography = _ref8.theme.typography;
  return typography.font[FV.LabelSmall];
});
var InfoIcon = styled(Info)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: 4px;\n"])));
var Styled = {
  FileItem: FileItem,
  FileItemIconWrapper: FileItemIconWrapper,
  UploadInfoBar: UploadInfoBar,
  InfoIcon: InfoIcon
};
export default Styled;