var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { PC, FV } from '@filerobot/common';
import { Button, IconButton } from '@scaleflex/ui/core';
import styled, { css } from 'styled-components';
var PanelWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n  position: relative;\n"])));
var PanelHeader = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid;\n  border-color: ", ";\n"])), function (_ref) {
  var palette = _ref.theme.palette;
  return palette[PC.BordersSecondary];
});
var PanelTitle = styled.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0;\n  ", ";\n  color: ", ";\n"])), function (_ref2) {
  var typography = _ref2.theme.typography;
  return typography.font[FV.LabelLargeUp];
}, function (_ref3) {
  var palette = _ref3.theme.palette;
  return palette[PC.TextPrimary];
});
var PanelBody = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  //65px for the modal header, 96px for modal footer\n  height: ", ";\n  display: flex;\n  width: 100%;\n\n  .SfxDrawer-persistent {\n    width: 302px;\n    transition: all 150ms ease-in-out;\n    position: static;\n    top: 0;\n    left: ", ";\n    z-index: 120;\n    height: 100%;\n\n    ", "\n  }\n"])), function (_ref4) {
  var $isOnUpload = _ref4.$isOnUpload;
  return $isOnUpload ? 'calc(100% - 64px - 96px)' : 'calc(100% - 64px)';
}, function (_ref5) {
  var isOpen = _ref5.isOpen;
  return isOpen ? 0 : '-305px';
}, function (_ref6) {
  var breakpoints = _ref6.theme.breakpoints;
  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      ", " & {\n        position: absolute;\n      }\n\n      ", " & {\n        position: absolute;\n      }\n\n      ", " & {\n        position: absolute;\n      }\n\n      ", " {\n        position: absolute;\n      }\n    "])), breakpoints.classes.lg, breakpoints.classes.md, breakpoints.classes.sm, breakpoints.down('xl'));
});
var ModalFooter = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 96px;\n  padding: 24px;\n  border-top: 1px solid;\n  border-color: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  column-gap: 12px;\n"])), function (_ref7) {
  var palette = _ref7.theme.palette;
  return palette[PC.BordersSecondary];
});
var BurgerButton = styled(IconButton)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  max-height: 40px;\n\n  svg path {\n    fill: ", ";\n  }\n\n  ", "\n\n"])), function (_ref8) {
  var palette = _ref8.theme.palette;
  return palette[PC.TextSecondary];
}, function (_ref9) {
  var breakpoints = _ref9.theme.breakpoints;
  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      visibility: hidden;\n      opacity: 0;\n      pointer-events: none;\n\n    ", " {\n      visibility: visible;\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    ", " & {\n      visibility: visible;\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    ", " & {\n      visibility: visible;\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    ", " & {\n      visibility: visible;\n      opacity: 1;\n      pointer-events: all;\n    }\n  "])), breakpoints.down('xl'), breakpoints.classes.lg, breakpoints.classes.md, breakpoints.classes.sm);
});
var CloseButton = styled(IconButton)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\n"])));
var Overlay = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  position: absolute;\n  display: none;\n  background: ", ";\n  width: 100%;\n  height: 100%;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 110;\n  transition: opacity 100ms ease-out, visibility 100ms ease-out;\n\n  ", "\n\n  ", "\n"])), function (_ref10) {
  var palette = _ref10.theme.palette;
  return palette[PC.Extra_0_3_Overlay];
}, function (_ref11) {
  var isOpen = _ref11.isOpen;
  return isOpen ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    opacity: 1;\n    visibility: visible;\n  "]))) : css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    opacity: 0;\n    visibility: hidden;\n  "])));
}, function (_ref12) {
  var breakpoints = _ref12.theme.breakpoints;
  return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    ", " {\n        display: block;\n      }\n\n      ", " & {\n        display: block;\n      }\n\n      ", " & {\n        display: block;\n      }\n\n      ", " & {\n        display: block;\n      }\n  "])), breakpoints.down('xl'), breakpoints.classes.lg, breakpoints.classes.md, breakpoints.classes.sm);
});
var FooterButton = styled(Button)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  :nth-of-type(2) {\n    margin-left: auto;\n  }\n"])));
var Styled = {
  BurgerButton: BurgerButton,
  PanelWrapper: PanelWrapper,
  PanelHeader: PanelHeader,
  PanelTitle: PanelTitle,
  PanelBody: PanelBody,
  ModalFooter: ModalFooter,
  CloseButton: CloseButton,
  Overlay: Overlay,
  FooterButton: FooterButton
};
export default Styled;