import styled, { css } from "styled-components";
import { addFocus } from "../../../../../mixins";
import { tokens } from "../../../tokens";
export const StyledContent = styled.div.withConfig({
    displayName: "HorizontalIconTabItem.styles__StyledContent",
    componentId: "sc-8816136-0"
})([
    `display:inline-block;width:fit-content;`
]);
export const ActionContent = styled.div.withConfig({
    displayName: "HorizontalIconTabItem.styles__ActionContent",
    componentId: "sc-8816136-1"
})([
    `display:flex;margin-left:var(`,
    `);`
], tokens.actionContentMarginLeft);
export const base = css([
    `position:relative;display:flex;align-items:center;justify-content:center;gap:var(`,
    `);appearance:none;border:none;outline:none;cursor:var(`,
    `,var(`,
    `));white-space:nowrap;box-sizing:border-box;-webkit-tap-highlight-color:transparent;&:first-child{margin-left:0;}`,
    `;`
], tokens.itemContentGap, tokens.itemCursorOverNotSelected, tokens.itemCursor, 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});
                }
            }
        `
}));
