var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
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/lib';
import truncateMixin from '@filerobot/utils/lib/styledComponentsMixins/truncate.mixin';
import styled from 'styled-components';
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // margin: 14px 0;\n"])));
var FolderContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
var FolderArrow = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 16px;\n\n  svg {\n    color: ", ";\n  }\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.palette[PC.IconsPrimary];
});
var FolderIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n\n  svg {\n    color: ", ";\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette[PC.IconsSecondary];
});
var FolderName = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n  color: ", ";\n"])), truncateMixin(), function (props) {
  return props.theme.typography.font[FV.LabelSmall];
}, function (_ref3) {
  var font = _ref3.theme.typography.font;
  return font[FV.LabelMedium];
}, function (_ref4) {
  var palette = _ref4.theme.palette;
  return palette[PC.TextPrimary];
});
var Folder = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 36px;\n  padding: 8px 12px;\n  cursor: pointer;\n  gap: 6px;\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  ", "\n\n  :hover {\n    background: ", ";\n  }\n\n  ", "\n"])), function (props) {
  return "margin-left: ".concat(props.$level * 12, "px;");
}, FolderArrow, function (props) {
  return props.$hasChildren ? '' : 'visibility: hidden;';
}, function (props) {
  return !props.$hasChildren ? "\n    ".concat(FolderArrow, " { visibility: hidden; }\n  ") : '';
}, function (_ref5) {
  var palette = _ref5.theme.palette;
  return palette[PC.BackgroundHover];
}, function (_ref6) {
  var $active = _ref6.$active,
    palette = _ref6.theme.palette;
  return $active ? "\n    background: ".concat(palette[PC.BackgroundActive], " !important;\n\n    ").concat(FolderIcon, " svg { color: ").concat(palette[PC.AccentStateless], "; }\n    ").concat(FolderName, " { color: ").concat(palette[PC.AccentStateless], "; }\n  ") : '';
});
var FolderChildren = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
var SkeletonItem = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 36px;\n  padding: 8px 12px;\n  column-gap: 6px;\n  transition: all 100ms ease-out;\n"])));
var SkeletonItemName = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
var Styled = {
  Container: Container,
  FolderContainer: FolderContainer,
  Folder: Folder,
  FolderArrow: FolderArrow,
  FolderIcon: FolderIcon,
  FolderName: FolderName,
  FolderChildren: FolderChildren,
  SkeletonItem: SkeletonItem,
  SkeletonItemName: SkeletonItemName
};
export default Styled;