var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { Arrow, Folder } from '@scaleflex/icons';
import { Menu as SfxMenu, MenuItem as SfxMenuItem, IconButton as SfxIconButton } from '@scaleflex/ui/core';
import styled, { keyframes, css } from 'styled-components';
import { PC, FV } from '@filerobot/common';
var popupKeyframes = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { opacity: 0; transform: scale(0) }\n  to { opacity: 1; transform: scale(1) }\n"])));
var fadeInAnimation = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  animation: ", " 300ms ease;\n"])), popupKeyframes);
var BreadcrumbsWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  column-gap: 6px;\n"])));
var Breadcrumb = styled.div.attrs(function (_ref) {
  var title = _ref.title;
  return {
    title: title
  };
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n  cursor: pointer;\n  transition: all 100ms ease-out;\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_ref2) {
  var palette = _ref2.theme.palette,
    isLast = _ref2.isLast;
  return palette[isLast ? PC.TextPrimary : PC.TextSecondary];
}, function (_ref3) {
  var typography = _ref3.theme.typography;
  return typography.font[FV.LabelLarge];
}, function (_ref4) {
  var palette = _ref4.theme.palette;
  return palette[PC.LinkHover];
});
var ArrowIcon = styled(Arrow)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref5) {
  var palette = _ref5.theme.palette;
  return palette[PC.IconsSecondary];
});
var IconButton = styled(SfxIconButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  border: 0;\n  background-color: transparent;\n  color: ", ";\n  transition: all 100ms ease-out;\n\n  ", "\n\n  &:focus-visible,\n  &:focus,\n  &:hover {\n    outline: none;\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (_ref6) {
  var palette = _ref6.theme.palette;
  return palette[PC.IconsPrimary];
}, function (_ref7) {
  var active = _ref7.active,
    palette = _ref7.theme.palette;
  return active && "\n    background-color: ".concat(palette[PC.BackgroundActive], ";\n    color: ").concat(palette[PC.LinkActive], ";\n  ");
}, function (_ref8) {
  var palette = _ref8.theme.palette;
  return palette[PC.BackgroundActive];
}, function (_ref9) {
  var palette = _ref9.theme.palette;
  return palette[PC.LinkActive];
});
var BreadCrumbTitle = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  max-width: ", ";\n  margin: 0;\n  font-weight: 400;\n"])), function (_ref10) {
  var isLast = _ref10.isLast;
  return isLast ? '300px' : '130px';
});
var Menu = styled(SfxMenu)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: 240px;\n  max-width: 600px;\n  width: 100%;\n  transform-origin: top left;\n  margin-top: 8px;\n  ", "\n"])), fadeInAnimation);
var FolderIcon = styled(Folder)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref11) {
  var palette = _ref11.theme.palette;
  return palette[PC.IconsPrimary];
});
var MenuItem = styled(SfxMenuItem)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 9px 12px;\n  justify-content: flex-start;\n  column-gap: 10px;\n  padding-left: ", "; // 22px is the summation of folder icon width and half the space between it and label\n\n  svg {\n    flex-shrink: 0;\n  }\n"])), function (_ref12) {
  var paddingIndex = _ref12.paddingIndex;
  return "".concat(12 + 22 * paddingIndex, "px}");
});
var MenuItemLabel = styled.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
var Styled = {
  BreadcrumbsWrapper: BreadcrumbsWrapper,
  Breadcrumb: Breadcrumb,
  ArrowIcon: ArrowIcon,
  IconButton: IconButton,
  BreadCrumbTitle: BreadCrumbTitle,
  Menu: Menu,
  MenuItem: MenuItem,
  FolderIcon: FolderIcon,
  MenuItemLabel: MenuItemLabel
};
export default Styled;