var _templateObject, _templateObject2, _templateObject3;
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 { PC } from '@filerobot/common';
var ColorPickerWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  gap: 12px;\n"])));
var ColorItem = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  border-radius: 50%;\n  transition: all 100ms ease-out;\n  ", "\n\n", "\n\n  ", "\n"])), function (_ref) {
  var isWhite = _ref.isWhite,
    palette = _ref.theme.palette;
  return isWhite && "\n    border: 1px solid ".concat(palette[PC.BorderPrimaryStateless], ";\n  ");
}, function (_ref2) {
  var clearButton = _ref2.clearButton,
    palette = _ref2.theme.palette;
  return clearButton && "\n    border: 1px solid ".concat(palette[PC.BorderPrimaryStateless], ";\n    position: relative;\n    background-color: ").concat(palette[PC.BackgroundHover], ";\n\n    svg {\n      color: ").concat(palette[PC.BorderPrimaryStateless], ";\n    }\n  ");
}, function (_ref3) {
  var isSelected = _ref3.isSelected,
    palette = _ref3.theme.palette;
  return isSelected ? "\n    outline-offset: 4px;\n    outline: 1px solid ".concat(palette[PC.AccentStateless], ";\n  ") : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        &:hover {\n        outline-offset: 4px;\n        outline: 1px solid ", ";\n        }\n  "])), function (_ref4) {
    var palette = _ref4.theme.palette;
    return palette[PC.BorderPrimaryStateless];
  });
});
var Styled = {
  ColorPickerWrapper: ColorPickerWrapper,
  ColorItem: ColorItem
};
export default Styled;