import styled, { css } from "styled-components";
import { BoxSizingStyle } from "../BoxSizingStyle";
import { FontStyle } from "../FontStyle";
import { CloseSmallIcon } from "../Icons";
import { Trigger } from "../Trigger";
import { StyledTypography } from "../Typography/Styles";

// prettier-ignore
export const ChipContainer = styled.div.withConfig({
  displayName: "Styles__ChipContainer",
  componentId: "sc-7s0bd1-0"
})(["align-items:center;border-radius:0.25rem;display:flex;height:1.5rem;max-width:220px;overflow:hidden;padding-left:0.375rem;", " ", " background-color:var(--color-theme-400);color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;line-height:1.375;", "{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, StyledTypography, _ref => {
  let {
    color
  } = _ref;
  return color && css(["", "{color:", ";}"], StyledTypography, color);
}, _ref2 => {
  let {
    backgroundColor
  } = _ref2;
  return backgroundColor && css(["background-color:", ";"], backgroundColor);
}, props => props.showClose ? null : css(["padding-right:0.375rem;"]), props => props.size === "regular" && css(["height:24px;"]), props => props.size === "small" && css(["height:18px;"]), props => props.size === "big" && css(["height:30px;"]), props => props.size === "biggest" && css(["height:40px;"]));
ChipContainer.displayName = "ChipContainer";
export const ChipLabel = styled.span.withConfig({
  displayName: "Styles__ChipLabel",
  componentId: "sc-7s0bd1-1"
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;"]);
ChipLabel.displayName = "ChipLabel";
export const ChipTrigger = styled(Trigger).withConfig({
  displayName: "Styles__ChipTrigger",
  componentId: "sc-7s0bd1-2"
})(["align-items:center;display:flex;justify-content:center;margin-left:0.125rem;&:hover{background-color:var(--color-theme-transparent-400);}", " ", " ", " ", ""], props => props.size === "regular" && css(["height:24px;width:24px;"]), props => props.size === "small" && css(["height:18px;width:18px;"]), props => props.size === "big" && css(["height:30px;width:30px;"]), props => props.size === "biggest" && css(["height:40px;width:40px;"]));
ChipTrigger.displayName = "ChipTrigger";
export const ChipCloseIcon = styled(CloseSmallIcon).withConfig({
  displayName: "Styles__ChipCloseIcon",
  componentId: "sc-7s0bd1-3"
})(["color:var(--color-theme-700);"]);
ChipCloseIcon.displayName = "ChipCloseIcon";
//# sourceMappingURL=Styles.js.map