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 { FV, PC } from '@filerobot/common';
import styled, { css } from 'styled-components';
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
var Group = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: start;\n  text-align: left;\n  margin: 8px 0px;\n\n  // Fix for react-beautiful-dnd Draggable position issue (https://github.com/atlassian/react-beautiful-dnd/issues/2056)\n  left: auto !important;\n  top: auto !important;\n"])));
var GroupName = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  text-align: right;\n  margin-top: 12px;\n  ", ";\n  color: ", ";\n"])), function (_ref) {
  var font = _ref.theme.typography.font;
  return font[FV.InputLg];
}, function (_ref2) {
  var palette = _ref2.theme.palette;
  return palette[PC.TextSecondary];
});
var GroupValue = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: start;\n  min-width: 200px;\n  margin: 0 17px;\n\n  .SfxInputGroup-root {\n    width: 100%;\n    width: 424px;\n  }\n"])));
var GroupActions = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-top: 12px;\n\n  > * {\n    &:not(:first-child) {\n      margin-left: 8px;\n    }\n    cursor: pointer;\n  }\n"])));
var DragToggleWrap = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  opacity: ", ";\n  margin: 12px 10px 0 0;\n\n  > div {\n    display: flex;\n    ", "\n  }\n"])), function (_ref3) {
  var $hidden = _ref3.$hidden;
  return $hidden ? '0.5' : '1';
}, function (_ref4) {
  var $hidden = _ref4.$hidden;
  return $hidden ? 'cursor: not-allowed;' : '';
});
var GroupsContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-bottom: 16px;\n"])));
var MenuItemContent = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
var MenuItemTitle = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref5) {
  var font = _ref5.theme.typography.font;
  return font[FV.LabelMedium];
});
var DescWrapper = styled.div(function (_ref6) {
  var _ref6$hasMarginTop = _ref6.hasMarginTop,
    hasMarginTop = _ref6$hasMarginTop === void 0 ? false : _ref6$hasMarginTop,
    font = _ref6.theme.typography.font;
  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), font[FV.LabelSmall], hasMarginTop && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["margin-top: 8px;"]))));
});
var DescItem = styled.label(function (_ref7) {
  var _ref7$rightPadding = _ref7.rightPadding,
    rightPadding = _ref7$rightPadding === void 0 ? 2 : _ref7$rightPadding,
    isLabel = _ref7.isLabel,
    palette = _ref7.theme.palette;
  return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  color: ", ";\n  padding-right: ", "px;\n"])), palette[isLabel ? PC.TextSecondary : PC.TextPrimary], rightPadding);
});
var Styled = {
  Container: Container,
  Group: Group,
  GroupName: GroupName,
  GroupValue: GroupValue,
  GroupActions: GroupActions,
  DragToggleWrap: DragToggleWrap,
  GroupsContainer: GroupsContainer,
  MenuItemContent: MenuItemContent,
  MenuItemTitle: MenuItemTitle,
  DescWrapper: DescWrapper,
  DescItem: DescItem
};
export default Styled;