var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
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 { FormGroup as CommonFormGroup } from '@filerobot/common';
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])));
var ColorsContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"])));
var Colors = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
var ColorItem = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: ", "px;\n  width:  ", "px;\n  flex-shrink: 0;\n  background: ", ";\n  border-radius: 50%;\n  cursor: pointer;\n"])), function (_ref) {
  var $active = _ref.$active;
  return $active ? 20 : 28;
}, function (_ref2) {
  var $active = _ref2.$active;
  return $active ? 20 : 28;
}, function (props) {
  return props.$bgColor;
});
var FormGroup = styled(CommonFormGroup)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n"])));
var Styled = {
  Container: Container,
  ColorsContainer: ColorsContainer,
  Colors: Colors,
  ColorItem: ColorItem,
  FormGroup: FormGroup
};
export default Styled;