import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { addFocus } from "../../../../../mixins";
import { tokens } from "../../../tokens";
export const StyledContent = /*#__PURE__*/ styled("div", {
    target: "e1v4dif10",
    label: "StyledContent"
})("display:inline-block;width:fit-content;");
export const ActionContent = /*#__PURE__*/ styled("div", {
    target: "e1v4dif11",
    label: "ActionContent"
})("display:flex;margin-left:var(", tokens.actionContentMarginLeft, ");");
export const base = /*#__PURE__*/ css("position:relative;display:flex;align-items:center;justify-content:flex-start;gap:var(", tokens.itemContentGap, ");appearance:none;border:none;outline:none;cursor:var(", tokens.itemCursorOverNotSelected, ",var(", tokens.itemCursor, "));white-space:nowrap;box-sizing:border-box;-webkit-tap-highlight-color:transparent;", addFocus({
    outlineSize: '0.063rem',
    outlineOffset: '-0.063rem',
    outlineColor: `var(${tokens.outlineFocusColor})`,
    outlineRadius: 'var(--border-radius-m , calc(var(--plasma_private-outline-radius) + 0.063rem))',
    customFocusRules: `
            &.focus-visible:focus,
            &[data-focus-visible-added] {
                &::before {
                    outline-color: var(${tokens.outlineFocusColor});
                }
            }
        `
}), ";", "base");
