import styled, { css } from "styled-components";
import { addFocus } from "../../../../mixins";
import { tokens } from "../../tokens";
export const StyledIcon = styled.div.withConfig({
    displayName: "SegmentIconItem.styles__StyledIcon",
    componentId: "sc-27a935b-0"
})([
    `display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:var(`,
    `);`
], tokens.iconItemContentPadding);
export const base = 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(`,
    `);-webkit-tap-highlight-color:rgba(0,0,0,0);&:first-child{margin-left:0;}`,
    `;`
], tokens.itemMarginLeft, addFocus({
    outlineSize: '0.063rem',
    outlineOffset: '0.063rem',
    outlineColor: `var(${tokens.outlineFocusColor})`,
    outlineRadius: 'calc(var(--plasma_private-outline-radius) + var(--plasma_private-clip-outline-radius))'
}));
