var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import styled, { css } from 'styled-components';
import { IconButton, Button, Input, Skeleton as SfxSkeleton } from '@scaleflex/ui/core';
import { ArrowBottom, NoImages } from '@scaleflex/icons';
import { FV, PC } from '@filerobot/common';
import { FILE_TYPES_AND_ICONS } from '@filerobot/utils/lib/constants';
var Container = styled.div(function (_ref) {
  var theme = _ref.theme;
  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  height: 100%;\n  flex-direction: column;\n  width: 60%;\n\n  ", " {\n    width: 100%;\n    height: 50%;\n\n    :has([data-expand-height=\"true\"]) {\n      height: calc(50% + 140px);\n    }\n  }\n\n  ", " & {\n    width: 100%;\n    height: 50%;\n\n    :has([data-expand-height=\"true\"]) {\n      height: calc(50% + 140px);\n    }\n  }\n\n  ", " & {\n    width: 100%;\n    height: 50%;\n\n    :has([data-expand-height=\"true\"]) {\n      height: calc(50% + 140px);\n    }\n  }\n"])), theme.breakpoints.down('lg'), theme.breakpoints.classes.md, theme.breakpoints.classes.sm);
});
var Header = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 56px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 24px;\n  justify-content: space-between;\n"])));
var HeaderInfo = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n\n  span:not(:last-child):after {\n    content: '\u2022';\n    margin: 0 8px;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.typography.font[FV.LabelMedium];
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette[PC.TextSecondary];
});
var FilePaginationButtons = styled(IconButton)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n  padding: 10px;\n  background-color: ", ";\n\n  ", "\n"])), function (_ref4) {
  var palette = _ref4.theme.palette;
  return palette[PC.Accent_1_8_Opacity];
}, function (_ref5) {
  var left = _ref5.left;
  return left ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    left: 12px;\n  "]))) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    right: 12px;\n  "])));
});
var Body = styled.div(function (_ref6) {
  var theme = _ref6.theme,
    $hidePagination = _ref6.$hidePagination,
    $fullWidth = _ref6.$fullWidth,
    isFileLoading = _ref6.isFileLoading;
  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n  flex-grow: 1;\n  height: 250px;\n  width: ", " ;\n  margin: auto;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n  -webkit-user-drag: none;\n  background-color: ", ";\n\n  &:hover {\n    ", " {\n      display: ", ";\n    }\n  }\n\n  ", " {\n    width: 100%;\n  }\n\n  ", " & {\n    width: 100%;\n  }\n\n  ", " & {\n    width: 100%;\n  }\n"])), $fullWidth ? '100%' : 'calc(100% - (24px * 2))', !isFileLoading && !$fullWidth ? theme.palette[PC.BackgroundActive] : 'none', FilePaginationButtons, $hidePagination ? 'none' : 'inline-flex', theme.breakpoints.down('lg'), theme.breakpoints.classes.md, theme.breakpoints.classes.sm);
});
var Skeleton = styled(SfxSkeleton)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  position: ", ";\n  visibility: visible;\n  opacity: 1;\n  transition: all 150ms ease-out;\n  z-index: 1000;\n\n  ", "\n"])), function (_ref7) {
  var absolutePosition = _ref7.absolutePosition;
  return absolutePosition ? 'absolute' : 'relative';
}, function (_ref8) {
  var hidden = _ref8.hidden;
  return hidden && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    visibility: hidden;\n    opacity: 0;\n  "])));
});

// TODO: Remove Navigation Side and Center Icons when UI implement button
var NavigationSideIcon = styled.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  width: 6px;\n  height: 10px;\n  background-color: ", ";\n  border-radius: 1.33333px;\n"])), function (_ref9) {
  var theme = _ref9.theme;
  return theme.palette[PC.IconsPrimaryHover];
});
var NavigationCenterIcon = styled.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 16px;\n  background: ", ";\n  margin: 0px 2px;\n  border-radius: 2.66667px;\n"])), function (_ref10) {
  var theme = _ref10.theme;
  return theme.palette[PC.IconsPrimary];
});
var IconWrap = styled.div(function (_ref11) {
  var palette = _ref11.theme.palette;
  return "\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    align-self: center;\n    justify-content: center;\n    background: ".concat(palette[PC.Extra_0_7_Overlay], ";\n    width: 80px;\n    height: 80px;\n    border-radius: 50px;\n    color:").concat(palette[PC.ButtonPrimaryText], ";\n    position: absolute;\n    left: calc(50% - 80px/2);\n    top: calc(50% - 80px/2);\n\n    &:hover {\n      cursor: pointer;\n    }\n  ");
});
var BodyFile = styled.img.attrs(function (_ref12) {
  var _ref12$$zoomRatio = _ref12.$zoomRatio,
    $zoomRatio = _ref12$$zoomRatio === void 0 ? 1 : _ref12$$zoomRatio,
    $pan = _ref12.$pan,
    $isPanEnabled = _ref12.$isPanEnabled,
    $isTransparencySupported = _ref12.$isTransparencySupported;
  return {
    style: {
      transform: "scale(".concat($zoomRatio, ") translate(").concat($pan.x, "px, ").concat($pan.y, "px)"),
      transition: $isPanEnabled ? 'none' : 'transform 150ms',
      backgroundImage: $isTransparencySupported ? "url(".concat(FILE_TYPES_AND_ICONS.chess_bg, ")") : ''
    }
  };
})(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\n  max-width: 100%;\n  max-height: 100%;\n  user-select: none;\n  touch-action: none;\n  opacity: 1;\n  visibility: visible;\n  transition: all 150ms ease-out;\n  -webkit-user-drag: none;\n\n  ", ";\n"])), function (_ref13) {
  var hidden = _ref13.hidden;
  return hidden && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    visibility: hidden;\n    opacity: 0;\n  "])));
});
var BodyFavBtn = styled(IconButton)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 30px;\n  right: 24px;\n  border: none;\n  padding: 8px;\n  border-radius: 50%;\n  background: ", ";\n  color: ", ";\n\n  :hover {\n    background: ", ";\n  }\n"])), function (_ref14) {
  var theme = _ref14.theme,
    $isActive = _ref14.$isActive;
  return theme.palette[PC[$isActive ? 'ButtonPrimaryText' : 'Extra_0_7_Overlay']];
}, function (_ref15) {
  var theme = _ref15.theme,
    $isActive = _ref15.$isActive;
  return theme.palette[PC[$isActive ? 'LinkPressed' : 'ButtonPrimaryText']];
}, function (_ref16) {
  var theme = _ref16.theme;
  return theme.palette[PC.Extra_0_9_Overlay];
});
var Footer = styled.div(function (_ref17) {
  var theme = _ref17.theme,
    $hideBottomBorder = _ref17.$hideBottomBorder,
    $isPdfPreview = _ref17.$isPdfPreview;
  return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  bottom: 0;\n  height: 62px;\n  width: 100%;\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 24px;\n  justify-content: ", ";\n  padding: ", ";\n\n  ", " {\n    height: 52px;\n    ", ";\n  }\n\n  ", " & {\n    height: 52px;\n    ", ";\n  }\n\n  ", " & {\n    height: 52px;\n    ", ";\n  }\n"])), $isPdfPreview ? 'none' : 'flex', function (_ref18) {
    var $centered = _ref18.$centered;
    return $centered ? 'center' : 'space-between';
  }, function (_ref19) {
    var $isPdfPreview = _ref19.$isPdfPreview;
    return $isPdfPreview ? '0 calc(24px - 10px)' : '0 24px';
  }, theme.breakpoints.down('lg'), !$hideBottomBorder && "border-bottom: 1px solid ".concat(theme.palette[PC.BordersSecondary]), theme.breakpoints.classes.md, !$hideBottomBorder && "border-bottom: 1px solid ".concat(theme.palette[PC.BordersSecondary]), theme.breakpoints.classes.sm, !$hideBottomBorder && "border-bottom: 1px solid ".concat(theme.palette[PC.BordersSecondary]));
});
var VariantsButton = styled(Button)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  visibility: ", ";\n  display: ", ";\n\n  .SfxButton-Label {\n    max-width: 100px;\n    display: inline-block;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n"])), function (_ref20) {
  var isVisible = _ref20.isVisible;
  return isVisible ? 'visible' : 'hidden';
}, function (_ref21) {
  var isPdfPreviewSupported = _ref21.isPdfPreviewSupported;
  return isPdfPreviewSupported ? 'none' : 'flex';
});
var VariantsButtonArrowBottom = styled(ArrowBottom)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  transition: 0.2s all ease-in-out;\n  ", "\n"])), function (_ref22) {
  var $isRotated = _ref22.$isRotated;
  return $isRotated ? 'transform: rotate(-180deg);' : '';
});
var AssetsActionBtns = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: ", ";\n  align-items: center;\n  overflow-x: auto;\n"])), function (_ref23) {
  var isVisible = _ref23.isVisible;
  return isVisible ? '223px' : '80px';
});
var FooterZoomBtns = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  padding: 8px;\n  border-radius: 4px;\n  height: 32px;\n\n  span {\n    ", ";\n    color: ", ";\n    padding: 0 8px;\n    cursor: pointer;\n  }\n"])), function (_ref24) {
  var isVisible = _ref24.isVisible;
  return isVisible ? 'flex' : 'none';
}, function (_ref25) {
  var theme = _ref25.theme;
  return theme.typography.font[FV.LabelMedium];
}, function (_ref26) {
  var theme = _ref26.theme;
  return theme.palette[PC.TextSecondary];
});
var FooterActionBtns = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 12px;\n  align-items: center;\n"])));
var FooterActionBtn = styled(IconButton)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: ", ";\n"])), function (_ref27) {
  var isVisible = _ref27.isVisible;
  return isVisible ? 'inline-flex' : 'none';
});
var CapitalizedTxt = styled.span(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  text-transform: uppercase;\n"])));
var PdfControlsWrapper = styled.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  column-gap: 8px;\n"])));
var PagesInput = styled(Input)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  width: 48px;\n"])));
var NumPagesLabel = styled.p(function (_ref28) {
  var _ref28$theme = _ref28.theme,
    typography = _ref28$theme.typography,
    palette = _ref28$theme.palette;
  return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  ", ";\n  margin: 0;\n  white-space: nowrap;\n  color: ", ";\n"])), typography.font[FV.LabelMedium], palette[PC.TextSecondary]);
});
var AnnotatingFieldWrapper = styled.div(function (_ref29) {
  var _ref29$theme = _ref29.theme,
    typography = _ref29$theme.typography,
    palette = _ref29$theme.palette;
  return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  height: 95px;\n  width: 100%;\n  margin-bottom: 7px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  position: sticky;\n\n  >:first-child {\n    :focus-within {\n      height: fit-content;\n    }\n\n    max-width: 750px;\n    position: absolute;\n    bottom: 0;\n    z-index: 2;\n    max-height: 192px;\n    background-color: ", ";\n  }\n"])), palette[PC.BackgroundStateless]);
});
var FilesNavigationButton = styled(IconButton)(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  margin: auto;\n"])));
var VideoWrapper = styled.div(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n"])));
var VideoActions = styled.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n"])));
var CanvasWrapper = styled.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  > div {\n    justify-content: center;\n  }\n"])));
var PlaceholderWrapper = styled.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n"])));
var PlaceholderTitle = styled.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  margin: 8px 0;\n  ", ";\n  color: ", ";\n"])), function (_ref30) {
  var theme = _ref30.theme;
  return theme.typography.font[FV.LabelExtraLarge];
}, function (_ref31) {
  var theme = _ref31.theme;
  return theme.palette[PC.TextSecondary];
});
var PlaceholderHint = styled.p(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n  margin: 0;\n"])), function (_ref32) {
  var theme = _ref32.theme;
  return theme.typography.font[FV.TextLarge];
}, function (_ref33) {
  var theme = _ref33.theme;
  return theme.palette[PC.TextSecondary];
});
var PlaceholderIcon = styled(NoImages)(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref34) {
  var theme = _ref34.theme;
  return theme.palette[PC.IconsPlaceholder];
});
var RetryButton = styled.button(function (_ref35) {
  var palette = _ref35.theme.palette;
  return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n    font-size: 16px;\n    border: 0;\n    cursor: pointer;\n    background: none;\n    color: ", ";\n  "])), palette[PC.AccentStateless]);
});
var Styled = {
  Container: Container,
  Header: Header,
  HeaderInfo: HeaderInfo,
  Body: Body,
  Skeleton: Skeleton,
  BodyFile: BodyFile,
  IconWrap: IconWrap,
  BodyFavBtn: BodyFavBtn,
  Footer: Footer,
  AssetsActionBtns: AssetsActionBtns,
  FooterZoomBtns: FooterZoomBtns,
  FooterActionBtns: FooterActionBtns,
  FooterActionBtn: FooterActionBtn,
  CapitalizedTxt: CapitalizedTxt,
  VariantsButton: VariantsButton,
  VariantsButtonArrowBottom: VariantsButtonArrowBottom,
  PdfControlsWrapper: PdfControlsWrapper,
  PagesInput: PagesInput,
  NumPagesLabel: NumPagesLabel,
  NavigationCenterIcon: NavigationCenterIcon,
  NavigationSideIcon: NavigationSideIcon,
  AnnotatingFieldWrapper: AnnotatingFieldWrapper,
  FilesNavigationButton: FilesNavigationButton,
  FilePaginationButtons: FilePaginationButtons,
  VideoActions: VideoActions,
  VideoWrapper: VideoWrapper,
  CanvasWrapper: CanvasWrapper,
  PlaceholderWrapper: PlaceholderWrapper,
  PlaceholderTitle: PlaceholderTitle,
  PlaceholderHint: PlaceholderHint,
  PlaceholderIcon: PlaceholderIcon,
  RetryButton: RetryButton
};
export default Styled;