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;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import styled, { css, keyframes } from 'styled-components';
import { CheckBox, Input, Label as SfxLabel, Skeleton, Accordion as SfxAccordion, IconButton } from '@scaleflex/ui/core';
import { FolderIcon } from '@filerobot/icons';
import { PC, FV, PSH } from '@filerobot/common';
var opacityAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { opacity: 0.25; }\n  to { opacity: 0.6; }\n"])));
// Since it is not possible to mix both pointer-events: none with cursor: default, so we are using this wrapper for assigning the cursor style.
export var loadingItemMixin = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: default !important;\n  animation: ", " 1s infinite alternate-reverse;\n  user-select: none;\n\n  /*\n    Avoid pointer-events for table's (th & td) only for showing the cursor: default style in list layout\n    as it doesn't work with tr directly while having td/th pointer-events: none\n    We should consider disabling the possibility to do any operation over those th/td elements from their components ex. clicking...etc.\n  */\n  *:not(th, td) {\n    pointer-events: none !important;\n  }\n"])), opacityAnimation);
var FolderSectionItem = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  margin: 0;\n  outline: none;\n  cursor: pointer;\n  ", "\n\n  ", "\n"])), function (_ref) {
  var $loading = _ref.$loading;
  return $loading && loadingItemMixin;
}, function (props) {
  return !props.$loading && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    &:hover {\n      & > svg > path {\n        fill: ", ";\n      }\n\n      [data-img-placeholder=\"true\"] {\n        background: ", ";\n        img {\n          filter: brightness(0.9);\n        }\n      }\n    }\n\n  ", "\n   "])), function (props) {
    return props.theme.palette[PC.BackgroundActive];
  }, function (_ref2) {
    var theme = _ref2.theme;
    return theme.palette[PC.Extra_0_3_Overlay];
  }, function (props) {
    return props.selected && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n       &:hover {\n        & > svg > path {\n          fill: ", ";\n        }\n      }\n\n      & > svg {\n        path {\n         fill: ", ";\n        }\n        .folder-assets-icon {\n          stroke: ", ";\n         }\n      }\n\n      [data-img-placeholder=\"true\"] {\n        background: ", ";\n\n        img {\n          filter: brightness(0.9);\n        }\n      }\n    "])), function (props) {
      return props.theme.palette[PC.BackgroundGrey];
    }, function (props) {
      return props.theme.palette[PC.BackgroundGrey];
    }, function (props) {
      return props.theme.palette[PC.AccentPrimary];
    }, function (_ref3) {
      var theme = _ref3.theme;
      return theme.palette[PC.Extra_0_3_Overlay];
    });
  });
});
var StyledFolderIcon = styled(FolderIcon)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n"])));
var FileSectionItem = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  outline: none;\n  position: relative;\n  margin: 0;\n  ", "\n\n  ", "\n\n\n  ", "\n\n  &::before {\n    content: \"\";\n    padding-top: 88%;\n    display: block;\n  }\n"])), function (_ref4) {
  var $loading = _ref4.$loading;
  return $loading && loadingItemMixin;
}, function (props) {
  return !props.selected && !props.$loading && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      &:hover {\n        & > button {\n        background-color: ", " ;\n        border: 1px solid ", ";\n\n        .filerobot-Explorer-Item-fileInfo {\n          background-color: ", " ;\n        }\n      }\n\n      ", " {\n        visibility: hidden;\n      }\n    }\n  "])), function (props) {
    return props.theme.palette[PC.Extra_0_3_Overlay];
  }, function (props) {
    return props.theme.palette[PC.BackgroundGrey];
  }, function (props) {
    return props.theme.palette[PC.BackgroundActive];
  }, FileRelevanceBadge);
}, function (props) {
  return props.selected && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    & > button {\n      border: 1px solid ", ";\n      background-color: ", ";\n\n      .filerobot-Explorer-Item-fileInfo {\n        background-color: ", " ;\n      }\n    }\n  "])), function (props) {
    return props.theme.palette[PC.AccentStateless];
  }, function (props) {
    return props.theme.palette[PC.Extra_0_3_Overlay];
  }, function (props) {
    return props.theme.palette[PC.BordersItem];
  });
});
var FolderContent = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  position: absolute;\n  outline: none;\n  top: 18px; // 18px is average = 14px height of folder flag + 4px as average height (difference of bigger folder cell as the flag gets bigger on increasing the folder's icon)\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n\n  & > svg {\n     path {\n      transition: all 100ms ease-in-out;\n     }\n  }\n"])));
var FolderPreviewGrid = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  flex-grow: 1;\n  padding: 8px 8px 0;\n  max-height: calc(100% - 54px); // 54px = Folder info height\n\n  ", " {\n    max-height: calc(100% - 50px); // 50px = Folder info height\n  }\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.down('lg');
});
var PreviewGridLeftColumn = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  width: 66%;\n  height: 100%;\n\n  > div {\n    height: 100%;\n  }\n"])));
var PreviewGridRightColumn = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 34%;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0px;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n\n  > div {\n    height: 50%;\n  }\n"])));
var PreviewGridImgWrapper = styled.div.attrs(function () {
  return {
    'data-img-placeholder': true
  };
})(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 100%;\n  border-radius: 4px;\n  overflow: hidden;\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette[PC.BackgroundActive];
});
var PreviewGridImg = styled.img(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 100%;\n  object-fit: ", ";\n"])), function (_ref7) {
  var isContainedFit = _ref7.isContainedFit;
  return isContainedFit ? 'contain' : 'cover';
});
var FolderInfo = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  height: 54px;\n  padding: 8px 12px 12px;\n  margin-top: auto;\n\n  ", " {\n    height: 50px;\n    padding: 8px;\n  }\n"])), function (_ref8) {
  var theme = _ref8.theme;
  return theme.breakpoints.down('lg');
});
var FolderTitle = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])), function (_ref9) {
  var theme = _ref9.theme;
  return theme.typography.font[FV.LabelMedium];
}, function (props) {
  return props.theme.palette[PC.TextPrimary];
});
var FolderSubTitle = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n"])));
var FolderSubTitleText = styled(SfxLabel)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  max-width: 50%;\n"])));
var FolderSectionItemCheckbox = styled(CheckBox)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  top: 18%;\n  left: 6%;\n  position: absolute;\n  visibility: ", ";\n  z-index: 1;\n  ", ":hover & {\n     visibility: visible;\n  }\n  transition: all 100ms ease-in-out;\n"])), function (props) {
  return props.checked ? 'visible' : 'hidden';
}, FolderSectionItem);
var FolderInputRename = styled(Input)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 16px;\n  padding: 0.5px 4px;\n\n  ::selection {\n    background: yellow;\n  }\n\n  input {\n    height: 14px;\n  }\n"])));
var FileSectionItemCheckbox = styled(CheckBox)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  top: 6%;\n  left: 6%;\n  position: absolute;\n  visibility: ", ";\n  z-index: 3;\n  ", ":hover & {\n    visibility: visible;\n   };\n  border: 1px solid ", ";\n  transition: all 100ms ease-in-out;\n"])), function (props) {
  return props.checked ? 'visible' : 'hidden';
}, FileSectionItem, function (props) {
  return props.theme.palette[PC.BorderPrimaryStateless];
});
var FileSectionItemButton = styled.button(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    position: absolute;\n    text-align: center;\n    border-radius: 4px;\n    border: 1px solid ", ";\n    transition: all 100ms ease-in-out;\n    cursor: pointer;\n\n    &:focus {\n      outline: none;\n    }\n\n    &.with-meta {\n      display: flex;\n      flex-direction: column-reverse;\n      align-items: center;\n      justify-content: flex-end;\n\n      &:focus {\n        box-shadow: none;\n      }\n    }\n"])), function (props) {
  return props.theme.palette[PC.BordersItem];
});
var FileSkeleton = styled(Skeleton)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: ", ";\n  margin-left: 12px;\n"])), function (props) {
  return props.bottom;
});
var FileVideoDurationWrapper = styled.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 33%;\n  left: 6%;\n  z-index: 2;\n  border-radius: 2px;\n  padding: 2px 4px;\n  text-align: center;\n  ", ";\n  background-color: ", ";\n  color: ", ";\n"])), function (props) {
  return props.theme.typography.font[FV.LabelExtraSmallUp];
}, function (props) {
  return props.theme.palette[PC.Extra_0_7_Overlay];
}, function (props) {
  return props.theme.palette[PC.IconsInvert];
});
var FileListVideoDurationWrapper = styled(FileVideoDurationWrapper)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  bottom: 17%;\n  left: 7%;\n  padding: 1px 2px;\n  font-size: 9px;\n  line-height: 9px;\n"])));
var FileVideoOptions = styled.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  *:hover > & {\n    .filerobot-common-ItemHoverTopOptions{\n      visibility: hidden;\n    }\n  }\n  & > .filerobot-common-ItemHoverTopOptions{\n   .filerobot-common-BaseButton {\n     width: 44px;\n     height: 44px;\n     margin: 0;\n\n     & > span {\n      margin-left: 3px;\n     }\n\n     svg {\n       width: 22px;\n       height: 22px;\n     }\n    // <= 1084px\n    // media query\n    ", " {\n      width: 36px;\n      height: 36px;\n      svg {\n       width: 18px;\n       height: 18px;\n     }\n    }\n\n   // <= 1084px\n   // container\n   ", " & {\n     width: 36px;\n     height: 36px;\n     svg {\n       width: 18px;\n       height: 18px;\n     }\n   }\n\n   ", " & {\n     width: 36px;\n     height: 36px;\n     svg {\n       width: 18px;\n       height: 18px;\n     }\n   }\n  }\n  }\n"])), function (props) {
  return props.theme.breakpoints.down('lg');
}, function (props) {
  return props.theme.breakpoints.classes.md;
}, function (props) {
  return props.theme.breakpoints.classes.sm;
});
var Accordion = styled(SfxAccordion)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  margin-bottom: 12px;\n  margin-top: ", ";\n\n  ", "\n\n  .SfxAccordionHeader-root {\n    padding: 0 24px;\n    display: ", "\n  }\n\n  .SfxAccordionHeader-label {\n    ", ";\n    color: ", "\n  }\n"])), function (_ref10) {
  var hideHeader = _ref10.hideHeader;
  return !hideHeader ? '12px' : 0;
}, function (_ref11) {
  var isListView = _ref11.isListView;
  return isListView && "\n     max-width: 2200px;\n     margin: auto;\n  ";
}, function (_ref12) {
  var hideHeader = _ref12.hideHeader;
  return hideHeader ? 'none' : 'inline-flex';
}, function (props) {
  return props.theme.typography.font[FV.LabelMediumEmphasis];
}, function (props) {
  return props.theme.palette[PC.TextSecondary];
});
var RelevanceScore = styled.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  text-align: center;\n  margin: 6px 0px;\n  font-size: 20px;\n"])));
var FileRelevanceBadge = styled.div(function (_ref13) {
  var $isListView = _ref13.$isListView,
    $relevance = _ref13.$relevance,
    isFileChecked = _ref13.isFileChecked,
    _ref13$theme = _ref13.theme,
    palette = _ref13$theme.palette,
    typography = _ref13$theme.typography;
  return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  ", ";\n  ", "\n  background-color: ", ";\n  color: ", ";\n  width: 47px;\n  height: 22px;\n  display: ", ";\n  justify-content: center;\n  align-items: center;\n  z-index: 2;\n  visibility: visible;\n  border-radius: 4px;\n"])), typography.font[FV.LabelMediumEmphasis], !$isListView && css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n    top: 0%;\n    margin: 12px;\n    position: absolute;\n  "]))), palette[$relevance >= 90 ? PC.Success : PC.BordersPrimaryHover], palette[PC.ButtonPrimaryText], isFileChecked && !$isListView ? 'none' : 'flex');
});
var getScrollTopButtonPosition = function getScrollTopButtonPosition(isProgressPanelMinimized) {
  if (isProgressPanelMinimized) {
    return '92px';
  }
  return '36px';
};
var ScrollToTopButton = styled(IconButton)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: ", ";\n  right:", " ; ;\n  z-index: 1000;\n  max-height: 48px;\n  padding: 15px;\n  background-color: ", ";\n  color: ", ";\n  box-shadow:  ", ";\n\n  &:hover {\n    background-color: ", ";\n    & > svg {\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n  &:focus,\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (_ref14) {
  var isProgressPanelMinimized = _ref14.isProgressPanelMinimized;
  return getScrollTopButtonPosition(isProgressPanelMinimized);
}, function (_ref15) {
  var showDetailsView = _ref15.showDetailsView;
  return showDetailsView ? '300px' : '24px';
}, function (_ref16) {
  var palette = _ref16.theme.palette;
  return palette[PC.BackgroundStateless];
}, function (_ref17) {
  var palette = _ref17.theme.palette;
  return palette[PC.IconsSecondary];
}, function (_ref18) {
  var shadows = _ref18.theme.shadows;
  return shadows[PSH.ShadowXl];
}, function (_ref19) {
  var palette = _ref19.theme.palette;
  return palette[PC.BackgroundStateless];
}, function (_ref20) {
  var palette = _ref20.theme.palette;
  return palette[PC.AccentPrimary];
}, function (_ref21) {
  var palette = _ref21.theme.palette;
  return palette[PC.BackgroundStateless];
}, function (_ref22) {
  var palette = _ref22.theme.palette;
  return palette[PC.IconsSecondary];
});
var Styled = {
  FolderSectionItem: FolderSectionItem,
  FileSectionItem: FileSectionItem,
  FolderSectionItemCheckbox: FolderSectionItemCheckbox,
  FileSectionItemCheckbox: FileSectionItemCheckbox,
  FolderContent: FolderContent,
  FolderPreviewGrid: FolderPreviewGrid,
  PreviewGridLeftColumn: PreviewGridLeftColumn,
  PreviewGridRightColumn: PreviewGridRightColumn,
  PreviewGridImgWrapper: PreviewGridImgWrapper,
  PreviewGridImg: PreviewGridImg,
  FolderInfo: FolderInfo,
  FileRelevanceBadge: FileRelevanceBadge,
  FolderIcon: StyledFolderIcon,
  FolderTitle: FolderTitle,
  FolderSubTitle: FolderSubTitle,
  FolderSubTitleText: FolderSubTitleText,
  FolderInputRename: FolderInputRename,
  FileSectionItemButton: FileSectionItemButton,
  FileSkeleton: FileSkeleton,
  FileVideoDurationWrapper: FileVideoDurationWrapper,
  FileListVideoDurationWrapper: FileListVideoDurationWrapper,
  FileVideoOptions: FileVideoOptions,
  Accordion: Accordion,
  RelevanceScore: RelevanceScore,
  ScrollToTopButton: ScrollToTopButton
};
export default Styled;