var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
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 { Label as SfxLabel } from '@scaleflex/ui/core';
import StyledLabel from '@scaleflex/ui/core/label/label.styles';
import StyledFormHint from '@scaleflex/ui/core/form-hint/form-hint.styles';
import { PC } from '../index';
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n\n  ", " {\n    margin-top: 4px;\n  }\n\n  ", " {\n    margin-bottom: 4px;\n  }\n"])), StyledFormHint.FormHint, StyledLabel.Label);
var FieldContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  width: ", ";\n  background: ", ";\n\n  ", " {\n    margin-top: 4px;\n  }\n\n  ", " {\n    margin-bottom: 4px;\n  }\n\n  &:focus-within {\n    background-color: ", " !important;\n    border: 1px solid ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.palette[PC.ActiveSecondary];
}, function (_ref2) {
  var fullWidth = _ref2.fullWidth;
  return fullWidth ? '100%' : '50%';
}, function (_ref3) {
  var theme = _ref3.theme,
    background = _ref3.background;
  return background === 'primary' ? theme.palette[PC.BackgroundPrimary] : theme.palette[PC.BackgroundSecondary];
}, StyledFormHint.FormHint, StyledLabel.Label, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette[PC.BackgroundSecondary];
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette[PC.AccentPrimary];
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette[PC.BackgroundPrimaryHover];
});
var FieldLoader = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: 8px;\n"])));
var FieldListContainer = styled.ul(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0 12px;\n  list-style: none;\n  font-size: 14px;\n  line-height: 1.5;\n  width: 100%;\n\n  ", " {\n    svg {\n      animation: ", ";\n    }\n  }\n"])), FieldLoader, function (_ref7) {
  var $loading = _ref7.$loading;
  return $loading ? 'spinner 1.2s linear infinite' : '1.2s';
});
var FieldItem = styled.li(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 4px 4px 4px 0;\n  max-width: 100%;\n"])));
var FieldInputContainer = styled.li(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  background: none;\n  flex-grow: 1;\n  padding: 5px 0;\n"])));
var FieldInput = styled.input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  width: 100%;\n  outline: none;\n"])));
var Label = styled(SfxLabel)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 16px 20px 8px 20px;\n  background: #ffffff;\n\n  &:not(:first-child) {\n    padding-top: 12px;\n  }\n"])));
var Styled = {
  Container: Container,
  FieldContainer: FieldContainer,
  FieldListContainer: FieldListContainer,
  FieldItem: FieldItem,
  FieldLoader: FieldLoader,
  FieldInputContainer: FieldInputContainer,
  FieldInput: FieldInput,
  Label: Label
};
export default Styled;