import styled, { css } from "styled-components";
import { applyEllipsis } from "../../mixins";
import { tokens } from "./Chip.tokens";
export const 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 const StyledContentLeft = styled.div.withConfig({
    displayName: "Chip.styles__StyledContentLeft",
    componentId: "sc-74e69b28-0"
})([
    `display:flex;margin-left:var(`,
    `);margin-right:var(`,
    `);color:var(`,
    `);`
], tokens.leftContentMarginLeft, tokens.leftContentMarginRight, tokens.leftContentColor);
export const StyledContentMain = styled.div.withConfig({
    displayName: "Chip.styles__StyledContentMain",
    componentId: "sc-74e69b28-1"
})([
    ``,
    `;`
], applyEllipsis());
export const StyledContentRight = styled.div.withConfig({
    displayName: "Chip.styles__StyledContentRight",
    componentId: "sc-74e69b28-2"
})([
    `display:flex;margin-left:var(`,
    `);margin-right:`,
    `;`
], tokens.rightContentMarginLeft, (hasClear)=>hasClear ? '0' : `var(${tokens.rightContentMarginRight})`);
export const StyledContentClear = styled.div.withConfig({
    displayName: "Chip.styles__StyledContentClear",
    componentId: "sc-74e69b28-3"
})([
    `display:flex;margin-left:var(`,
    `);margin-right:var(`,
    `);color:var(`,
    `);:hover{color:var(`,
    `);}`
], tokens.clearContentMarginLeft, tokens.clearContentMarginRight, tokens.closeIconColor, tokens.closeIconColorHover);
