var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
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 { Modal as SfxModal } from '@scaleflex/ui/core';
import { FV, PC } from '@filerobot/common';
var notificationsMixin = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .SfxNotification-Notification {\n    margin-right: 0;\n  }\n  .SfxNotification-Close {\n    display: none;\n  }\n  .SfxNotification-root {\n    margin-right: 0;\n    margin-bottom: 16px;\n    width: 100%;\n  }\n"])));
var Modal = styled(SfxModal)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  max-width: 600px;\n  overflow: hidden;\n\n  ", "\n\n  .SfxModal-root {\n    overflow: hidden;\n  }\n\n  .SfxModalTitle-root {\n    display: flex;\n    align-items: center;\n    height: 64px;\n    background: #ffffff;\n    text-align: center;\n    padding: 12px 24px;\n    flex-shrink: 0;\n    flex-grow: 0;\n\n    .SfxModalTitle-LabelPrimary {\n      width: 100%;\n    }\n    .SfxModalTitle-Close {\n      top: 12px;\n      right: 12px;\n    }\n  }\n\n  .SfxModalContent-root {\n    ", "\n    color: ", ";\n\n    display: flex;\n    flex-direction: column;\n    padding: ", ";\n    gap: 32px;\n    // max-height: 600px;\n    overflow: auto;\n    flex-shrink: 1;\n    flex-grow: 1;\n  }\n\n  .SfxModalActions-root {\n    display: flex;\n    padding: 24px;\n    align-items: center;\n    flex-shrink: 0;\n    flex-grow: 0;\n    gap: 12px;\n    border-top: 1px solid ", ";\n\n    > * {\n      flex: none;\n      width: 120px;\n      margin-left: 0 !important;\n    }\n  }\n\n  ", "\n"])), function (_ref) {
  var isHidden = _ref.isHidden;
  return isHidden && 'visibility: hidden;';
}, function (_ref2) {
  var font = _ref2.theme.typography.font;
  return font[FV.TextMedium];
}, function (_ref3) {
  var palette = _ref3.theme.palette;
  return palette[PC.TextPrimary];
}, function (_ref4) {
  var smallBottomPadding = _ref4.smallBottomPadding;
  return smallBottomPadding ? '24px 24px 8px 24px' : '24px';
}, function (_ref5) {
  var palette = _ref5.theme.palette;
  return palette[PC.BordersSecondary];
}, notificationsMixin);
var Container = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n\n  display: flex;\n  flex-direction: column;\n  // padding: ", ";\n  gap: 32px;\n\n  ", "\n"])), function (_ref6) {
  var font = _ref6.theme.typography.font;
  return font[FV.TextMedium];
}, function (_ref7) {
  var palette = _ref7.theme.palette;
  return palette[PC.TextPrimary];
}, function (_ref8) {
  var smallBottomPadding = _ref8.smallBottomPadding;
  return smallBottomPadding ? '24px 24px 8px 24px' : '24px';
}, notificationsMixin);
var H3 = styled.div(function (_ref9) {
  var typography = _ref9.theme.typography;
  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n"])), typography.font[FV.TitleH3]);
});
var H4 = styled.div(function (_ref10) {
  var typography = _ref10.theme.typography;
  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n"])), typography.font[FV.TitleH4]);
});
var Hint = styled.div(function (_ref11) {
  var _ref11$theme = _ref11.theme,
    typography = _ref11$theme.typography,
    palette = _ref11$theme.palette,
    _ref11$withMargin = _ref11.withMargin,
    withMargin = _ref11$withMargin === void 0 ? true : _ref11$withMargin;
  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n  margin-top: ", ";\n"])), typography.font[FV.TextMedium], palette[PC.TextSecondary], withMargin ? '4px' : '');
});
var CheckboxesBlock = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 24px;\n  margin-top: 16px;\n"])));
var Section = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n"])));
var AccessesContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-top: 4px;\n  flex-direction: column;\n  ", "\n"])), function (_ref12) {
  var isInheritMode = _ref12.isInheritMode;
  return isInheritMode && 'opacity: 0.8;';
});
var AccessItem = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n  background: ", ";\n  height: 70px;\n  gap: 20px;\n\n  &:not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n"])), function (_ref13) {
  var palette = _ref13.theme.palette;
  return palette[PC.BackgroundStateless];
}, function (_ref14) {
  var palette = _ref14.theme.palette;
  return palette[PC.BordersSecondary];
});
var AccessItemNameContainer = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-grow: 1;\n"])));
var AccessItemAvatar = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  ", "\n\n  display: flex;\n  width: 42px;\n  height: 42px;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  border-radius: 50%;\n\n  ", "\n\n  > img {\n    max-width: 100%;\n    max-height: 100%;\n  }\n"])), function (_ref15) {
  var font = _ref15.theme.typography.font;
  return font[FV.LabelExtraLargeEmphasis];
}, function (_ref16) {
  var isImage = _ref16.isImage,
    palette = _ref16.theme.palette;
  return !isImage && "\n    background: ".concat(palette[PC.Accent_0_8_Overlay], ";\n    color: ").concat(palette[PC.AccentStateless], ";\n    padding: 10.5px;\n  ");
});
var AccessItemActions = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: none;\n  width: 50px;\n  justify-content: flex-end;\n\n  svg {\n    color: ", ";\n\n    &:hover {\n      cursor: pointer;\n      color: ", ";\n    }\n  }\n"])), function (_ref17) {
  var palette = _ref17.theme.palette;
  return palette[PC.IconsSecondary];
}, function (_ref18) {
  var palette = _ref18.theme.palette;
  return palette[PC.IconsSecondaryHover];
});
var AccessItemRole = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  width: 200px;\n\n  ", "\n"])), function (_ref19) {
  var error = _ref19.error,
    palette = _ref19.theme.palette;
  return error && "> span { color: ".concat(palette[PC.Error], "; }");
});
var PopupWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  width: 500px;\n  display: flex;\n  padding: 16px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 24px;\n  border-radius: 4px;\n  background: ", ";\n  box-shadow: 0px 2px 6px 0px ", ";\n"])), function (_ref20) {
  var palette = _ref20.theme.palette;
  return palette[PC.BackgroundStateless];
}, function (_ref21) {
  var palette = _ref21.theme.palette;
  return palette[PC.LargeShadow];
});
var TagFieldWrapper = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  .SfxTagField-tagInputFieldWrapper {\n    width: 100%;\n  }\n  .SfxTagField-tagFieldBottom {\n    display: none;\n  }\n  .SfxTagField-tagFieldWrapper,\n  .SfxTagField-suggestionWrapperList {\n    width: 100%;\n\n    .SfxTag-root {\n      display: flex;\n      padding: 6px 12px;\n      align-items: center;\n      gap: 8px;\n      border-radius: 16px;\n      border: 1px solid ", ";\n      background: ", ";\n\n      color: ", ";\n      ", ";\n\n      .SfxTag-StartIcon {\n        display: flex;\n        width: 16px;\n        height: 16px;\n        justify-content: center;\n        align-items: center;\n        margin-right: 0;\n\n        > * {\n          max-width: 100%;\n          max-height: 100%;\n        }\n      }\n\n      .SfxTag-Icon {\n        margin-left: 0;\n        width: 12px;\n        height: 12px;\n\n        svg {\n          width: 12px;\n          height: 12px;\n        }\n      }\n    }\n  }\n"])), function (_ref22) {
  var palette = _ref22.theme.palette;
  return palette[PC.BordersSecondary];
}, function (_ref23) {
  var palette = _ref23.theme.palette;
  return palette[PC.BackgroundStateless];
}, function (_ref24) {
  var palette = _ref24.theme.palette;
  return palette[PC.TextPrimary];
}, function (_ref25) {
  var font = _ref25.theme.typography.font;
  return font[FV.InputMd];
});
var AvatarSmall = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: 50%;\n  color: ", ";\n\n  ", "\n"])), function (_ref26) {
  var palette = _ref26.theme.palette;
  return palette[PC.AccentStateless];
}, function (_ref27) {
  var photoSrc = _ref27.photoSrc,
    palette = _ref27.theme.palette;
  return photoSrc ? "\n      border-radius: 50%;\n      background-image: url(".concat(photoSrc, ");\n      background-repeat: no-repeat;\n      background-size: contain;\n    ") : "\n      padding: 4.444px;\n      background: ".concat(palette[PC.Accent_1_2_Opacity], ";\n    ");
});
var Styled = {
  Modal: Modal,
  H3: H3,
  H4: H4,
  Hint: Hint,
  CheckboxesBlock: CheckboxesBlock,
  Section: Section,
  AccessesContainer: AccessesContainer,
  AccessItem: AccessItem,
  AccessItemNameContainer: AccessItemNameContainer,
  AccessItemAvatar: AccessItemAvatar,
  AccessItemRole: AccessItemRole,
  AccessItemActions: AccessItemActions,
  PopupWrapper: PopupWrapper,
  TagFieldWrapper: TagFieldWrapper,
  AvatarSmall: AvatarSmall,
  Container: Container
};
export default Styled;