import styled from "styled-components";
import { css } from "styled-components";
import { addFocus } from "../../../../mixins";
import { tokens } from "../../tokens";
export var StyledIcon = styled.div.withConfig({
    displayName: "SegmentIconItem.styles__StyledIcon",
    componentId: "sc-1f630edc-0"
})([
    "display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:var(",
    ");"
], tokens.iconItemContentPadding);
export var 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: 'var(--plasma_private-clip-outline-offset)',
    outlineColor: "var(".concat(tokens.outlineFocusColor, ")"),
    outlineRadius: 'calc(var(--plasma_private-outline-radius) + var(--plasma_private-clip-outline-radius))',
    customFocusRules: "\n            &.focus-visible:focus,\n            &[data-focus-visible-added] {\n                &::before {\n                    z-index: 1;\n                    outline: none;\n                    box-shadow: 0 0 0 0.063rem var(".concat(tokens.outlineFocusColor, ");\n                }\n            }\n        ")
}));
