import styled from "styled-components";
import { getColor } from "../../theme";
import margin from "../../mixins/margin";
import alignSelf from "../../mixins/alignSelf";
import cursor from "../../mixins/cursor";
import css from "@styled-system/css";
var SIZES = {
  small: "14px",
  medium: "16px",
  large: "24px"
};
var styledColor = function styledColor(_ref) {
  var theme = _ref.theme,
    color = _ref.color;
  return color && "fill: " + getColor(color)({
    theme: theme
  }) + ";";
};
var styledHoverColor = function styledHoverColor(_ref2) {
  var theme = _ref2.theme,
    hoverColor = _ref2.hoverColor;
  return hoverColor && "&:hover { fill: " + getColor(hoverColor)({
    theme: theme
  }) + "; }";
};
var styledRotate = function styledRotate(_ref3) {
  var rotate = _ref3.rotate;
  return !isNaN(rotate) && "transform: rotate(" + rotate * 90 + "deg);";
};
var sx = function sx(props) {
  return css(props.sx)(props);
};
export var StyledIcon = styled.svg.withConfig({
  displayName: "styled__StyledIcon",
  componentId: "sc-1wxz4b1-0"
})(["height:", ";width:", ";opacity:", ";pointer-events:", ";", " ", " ", " ", " ", " ", " ", ""], function (_ref4) {
  var size = _ref4.size,
    height = _ref4.height;
  return height || SIZES[size];
}, function (_ref5) {
  var size = _ref5.size,
    width = _ref5.width;
  return width || SIZES[size];
}, function (_ref6) {
  var disabled = _ref6.disabled;
  return disabled ? 0.4 : 1;
}, function (_ref7) {
  var disabled = _ref7.disabled;
  return disabled ? "none" : "unset";
}, styledRotate, styledColor, styledHoverColor, margin, alignSelf, cursor, sx);