import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { addFocus } from "../../../../mixins";
import { tokens } from "../../tokens";
export const StyledIcon = /*#__PURE__*/ styled("div", {
    target: "e19w7hw40",
    label: "StyledIcon"
})("display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:var(", tokens.iconItemContentPadding, ");");
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))'
}), ";", "base");
