import styled from "styled-components";
import { css } from "styled-components";
import { applyEllipsis } from "../../mixins";
import { tokens } from "./Chip.tokens";
export var base = css([
    "position:relative;display:inline-flex;align-items:center;box-sizing:border-box;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);"
]);
export var StyledContentLeft = styled.div.withConfig({
    displayName: "Chip.styles__StyledContentLeft",
    componentId: "sc-ea11377a-0"
})([
    "display:flex;margin-left:var(",
    ");margin-right:var(",
    ");color:var(",
    ");"
], tokens.leftContentMarginLeft, tokens.leftContentMarginRight, tokens.leftContentColor);
export var StyledContentMain = styled.div.withConfig({
    displayName: "Chip.styles__StyledContentMain",
    componentId: "sc-ea11377a-1"
})([
    "",
    ";"
], applyEllipsis());
export var StyledContentRight = styled.div.withConfig({
    displayName: "Chip.styles__StyledContentRight",
    componentId: "sc-ea11377a-2"
})([
    "display:flex;margin-left:var(",
    ");margin-right:",
    ";"
], tokens.rightContentMarginLeft, function(hasClear) {
    return hasClear ? '0' : "var(".concat(tokens.rightContentMarginRight, ")");
});
export var StyledContentClear = styled.div.withConfig({
    displayName: "Chip.styles__StyledContentClear",
    componentId: "sc-ea11377a-3"
})([
    "display:flex;margin-left:var(",
    ");margin-right:var(",
    ");color:var(",
    ");:hover{color:var(",
    ");}"
], tokens.clearContentMarginLeft, tokens.clearContentMarginRight, tokens.closeIconColor, tokens.closeIconColorHover);
