import styled from "styled-components";
import { getColor } from "../../theme/utils";
import margin from "../../mixins/margin";
import alignItems from "../templates/mixins/alignItems";
import alignSelf from "../../mixins/alignSelf";
import { Icon } from "../icon";
import disabled from "./mixins/disabled";
export var Input = styled.input.withConfig({
  displayName: "styled__Input",
  componentId: "sc-11vyiac-0"
})(["&&{height:0;width:0;opacity:0;-moz-appearance:none;margin:0;border:none;}"]);
export var Container = styled.label.withConfig({
  displayName: "styled__Container",
  componentId: "sc-11vyiac-1"
})(["display:flex;flex-direction:row;align-items:center;", " ", " ", " ", ""], alignItems, alignSelf, margin, disabled);
export var IconContainer = styled.div.withConfig({
  displayName: "styled__IconContainer",
  componentId: "sc-11vyiac-2"
})(["display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;height:16px;width:16px;box-sizing:border-box;border:1px solid ", ";border-radius:100%;background:", ";", ""], function (props) {
  return getColor(props.borderColor)(props);
}, function (props) {
  return getColor(props.background)(props);
}, margin);
export var StyledIcon = styled(Icon).withConfig({
  displayName: "styled__StyledIcon",
  componentId: "sc-11vyiac-3"
})(["fill:", ";height:8px;width:8px;"], function (props) {
  return getColor(props.color)(props);
});