var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import styled from 'styled-components';
import { FV, PC, PSH } from '@filerobot/common';
import { IconButton } from '@scaleflex/ui/core';
import truncateMixin from '@filerobot/utils/lib/styledComponentsMixins/truncate.mixin';
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
var Header = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: sticky;\n  top: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: baseline;\n  gap: 16px;\n  background: ", ";\n  padding: 32px 24px 16px;\n  z-index: 1;\n\n  // TODO: Remove this hotfix when UI lib fixed Search fullWidth prop\n  .SfxSearch-root {\n    width: 100%;\n  }\n"])), function (_ref) {
  var palette = _ref.theme.palette;
  return palette[PC.BackgroundStateless];
});
var AddCollectionBtnWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: 10px;\n  padding: 0 24px 10px 24px;\n"])));
var SettingsWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 0;\n  gap: 10px;\n  padding: 0 24px 10px 24px;\n  width: 100%;\n"])));
var NameLabel = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n"])), function (_ref2) {
  var font = _ref2.theme.typography.font;
  return font[FV.LabelMedium];
}, function (_ref3) {
  var palette = _ref3.theme.palette;
  return palette[PC.LinkStateless];
});
var SortingWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  gap: 4px;\n  height: 32px;\n"])));
var SettingsBtnWrapper = styled(IconButton)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  padding: 1px 6px;\n  border: 1px solid ", ";\n  box-shadow: ", ";\n  background: ", ";\n"])), function (_ref4) {
  var palette = _ref4.theme.palette;
  return palette[PC.IconsPrimary];
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.shadows[PSH.ShadowMd];
}, function (_ref6) {
  var palette = _ref6.theme.palette;
  return palette[PC.BackgroundStateless];
});
var Content = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0 24px 16px;\n  overflow-y: auto;\n"])));
var Title = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  color: ", ";\n  max-width: 90%;\n"])), truncateMixin(), function (_ref7) {
  var font = _ref7.theme.typography.font;
  return font[FV.TitleH4];
}, function (_ref8) {
  var palette = _ref8.theme.palette;
  return palette[PC.TextPrimary];
});
var ItemIcon = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n\n  svg {\n    color: ", ";\n  }\n"])), function (_ref9) {
  var palette = _ref9.theme.palette;
  return palette[PC.IconsPrimary];
});
var ItemLabel = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  color: ", ";\n"])), truncateMixin(), function (_ref10) {
  var font = _ref10.theme.typography.font;
  return font[FV.LabelMedium];
}, function (_ref11) {
  var palette = _ref11.theme.palette;
  return palette[PC.TextPrimary];
});
var Item = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 36px;\n  gap: 6px;\n  cursor: pointer;\n  border-radius: 4px;\n  padding: 0 12px;\n\n  :hover {\n    background: ", ";\n  }\n\n  ", "\n"])), function (_ref12) {
  var palette = _ref12.theme.palette;
  return palette[PC.BackgroundHover];
}, function (_ref13) {
  var $active = _ref13.$active,
    palette = _ref13.theme.palette;
  return $active ? "\n    background: ".concat(palette[PC.BackgroundActive], " !important;\n\n    ").concat(ItemLabel, " {\n      color: ").concat(palette[PC.AccentStateless], ";\n    }\n\n    ").concat(ItemIcon, " {\n      svg {\n        color: ").concat(palette[PC.AccentStateless], ";\n      }\n    }\n  ") : '';
});
var Styled = {
  Container: Container,
  Header: Header,
  AddCollectionBtnWrapper: AddCollectionBtnWrapper,
  SettingsWrapper: SettingsWrapper,
  SortingWrapper: SortingWrapper,
  NameLabel: NameLabel,
  SettingsBtnWrapper: SettingsBtnWrapper,
  Content: Content,
  Title: Title,
  Item: Item,
  ItemIcon: ItemIcon,
  ItemLabel: ItemLabel
};
export default Styled;