import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { addFocus, applyEllipsis } from "../../../../mixins";
import { classes, tokens } from "../../tokens";
export const StyledContent = /*#__PURE__*/ styled("div", {
    target: "e1fqycvl0",
    label: "StyledContent"
})("display:inline-block;width:fit-content;padding:var(", tokens.itemContentPadding, ");", applyEllipsis(), ";margin-right:", ({ hasRightMargin })=>hasRightMargin ? `var(${tokens.itemIconMargin})` : '0', ";margin-left:", ({ hasLeftMargin })=>hasLeftMargin ? `var(${tokens.itemIconMargin})` : '0', ";");
export const RightContent = /*#__PURE__*/ styled("div", {
    target: "e1fqycvl1",
    label: "RightContent"
})("display:flex;margin-left:var(", tokens.itemIconMargin, ");overflow:hidden;color:var(", tokens.itemColor, ");&.", classes.segmentAdditionalText, "{display:inline-block;color:var(", tokens.itemAdditionalColor, ");", applyEllipsis(), ";}");
export const LeftContent = /*#__PURE__*/ styled("div", {
    target: "e1fqycvl2",
    label: "LeftContent"
})("display:flex;margin-right:var(", tokens.itemIconMargin, ");color:inherit;");
export const base = /*#__PURE__*/ css("position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;white-space:nowrap;appearance:none;border:none;outline:none;cursor:pointer;margin-left:var(", tokens.itemMarginLeft, ");-webkit-tap-highlight-color:rgba(0,0,0,0);&:first-child{margin-left:0;}", addFocus({
    outlineSize: '0.063rem',
    outlineOffset: '0.063rem',
    outlineColor: `var(${tokens.outlineFocusColor})`,
    outlineRadius: 'calc(var(--plasma_private-outline-radius) + var(--plasma_private-clip-outline-radius))'
}), ";&.", classes.segmentTruncate, "{", StyledContent, "{overflow:hidden;text-overflow:ellipsis;}}", "base");
