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 styled, { css } from 'styled-components';
import { PC } from '@filerobot/common';
import { CrossButton as SfxCrossButton } from '@scaleflex/ui/core';
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n"])));
var TopBar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 64px;\n  width: 100%;\n  padding: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n\n  ", "\n"])), function (_ref) {
  var palette = _ref.theme.palette;
  return palette[PC.BordersSecondary];
}, function (_ref2) {
  var palette = _ref2.theme.palette;
  return palette[PC.BackgroundSecondary];
}, function (_ref3) {
  var breakpoints = _ref3.theme.breakpoints;
  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", " {\n      height: 48px;\n      padding: 16px;\n    }\n\n    ", " & {\n      height: 48px;\n      padding: 16px;\n    }\n\n    ", " & {\n      height: 48px;\n      padding: 16px;\n    }\n\n    ", " & {\n      height: 48px;\n      padding: 16px;\n    }\n\n    ", " & {\n      height: 48px;\n      padding: 16px;\n    }\n  "])), breakpoints.between('xs', 'lg'), breakpoints.classes.lg, breakpoints.classes.md, breakpoints.classes.sm, breakpoints.classes.xs);
});
var Title = styled.p(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: 18px;\n  line-height: 20px;\n  font-weight: 400;\n  color: ", ";\n"])), function (_ref4) {
  var palette = _ref4.theme.palette;
  return palette[PC.TextPrimary];
});
var CloseButton = styled(SfxCrossButton)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 24px;\n  right: 24px;\n  padding: 0;\n\n  ", "\n"])), function (_ref5) {
  var breakpoints = _ref5.theme.breakpoints;
  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", " {\n      top: 16px;\n      right: 16px;\n    }\n\n    ", " & {\n      top: 16px;\n      right: 16px;\n    }\n\n    ", " & {\n      top: 16px;\n      right: 16px;\n    }\n\n    ", " & {\n      top: 16px;\n      right: 16px;\n    }\n\n    ", " & {\n      top: 16px;\n      right: 16px;\n    }\n\n    &:hover {\n      background-color: unset;\n    }\n  "])), breakpoints.between('xs', 'lg'), breakpoints.classes.lg, breakpoints.classes.md, breakpoints.classes.sm, breakpoints.classes.xs);
});
var PanelBody = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  flex: 1;\n  max-height: calc(100% - 160px); // headerbar and actionbar height\n\n  ", "\n"])), function (_ref6) {
  var breakpoints = _ref6.theme.breakpoints;
  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    ", " {\n      max-height: calc(100% - 120px);\n    }\n\n    ", " & {\n      max-height: calc(100% - 120px);\n    }\n\n    ", " & {\n      max-height: calc(100% - 120px);\n    }\n\n    ", " & {\n      max-height: calc(100% - 120px);\n    }\n  "])), breakpoints.down('lg'), breakpoints.classes.md, breakpoints.classes.sm, breakpoints.classes.xs);
});
var ImportButtonWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  left: 12px;\n"])));
var Styled = {
  Wrapper: Wrapper,
  TopBar: TopBar,
  Title: Title,
  CloseButton: CloseButton,
  PanelBody: PanelBody,
  ImportButtonWrapper: ImportButtonWrapper
};
export default Styled;