import { css } from "styled-components";
import styled from "styled-components";
import { addFocus } from "../../../../../mixins";
import { classes, tokens } from "../../../tokens";
export var StyledContent = styled.div.withConfig({
    displayName: "VerticalTabItem.styles__StyledContent",
    componentId: "sc-6dc77991-0"
})([
    "display:inline-block;width:fit-content;padding:0 var(",
    ",var(",
    "));"
], tokens.itemContentPaddingClear, tokens.itemContentPadding);
export var TabItemValue = styled.span.withConfig({
    displayName: "VerticalTabItem.styles__TabItemValue",
    componentId: "sc-6dc77991-1"
})([
    "white-space:nowrap;color:var(",
    ");font-family:var(",
    ",var(",
    "));font-size:var(",
    ",var(",
    "));font-style:var(",
    ",var(",
    "));font-weight:var(",
    ",var(",
    "));letter-spacing:var(",
    ",var(",
    "));line-height:var(",
    ",var(",
    "));"
], tokens.itemValueColor, tokens.valueFontFamily, tokens.fontFamily, tokens.valueFontSize, tokens.fontSize, tokens.valueFontStyle, tokens.fontStyle, tokens.valueFontWeight, tokens.fontWeight, tokens.valueLetterSpacing, tokens.letterSpacing, tokens.valueLineHeight, tokens.lineHeight);
export var RightContent = styled.div.withConfig({
    displayName: "VerticalTabItem.styles__RightContent",
    componentId: "sc-6dc77991-2"
})([
    "display:flex;color:inherit;&:hover{color:inherit;}"
]);
export var LeftContent = styled.div.withConfig({
    displayName: "VerticalTabItem.styles__LeftContent",
    componentId: "sc-6dc77991-3"
})([
    "display:flex;color:inherit;&:hover{color:inherit;}"
]);
export var ActionContent = styled.div.withConfig({
    displayName: "VerticalTabItem.styles__ActionContent",
    componentId: "sc-6dc77991-4"
})([
    "display:flex;margin-left:var(",
    ");"
], tokens.actionContentMarginLeft);
export var base = css([
    "position:relative;display:flex;align-items:center;justify-content:flex-start;gap:var(",
    ");padding:var(",
    ");appearance:none;border:none;outline:none;cursor:var(",
    ",var(",
    "));white-space:nowrap;box-sizing:border-box;-webkit-tap-highlight-color:transparent;",
    ";&.",
    "{",
    "{overflow:hidden;text-overflow:ellipsis;}",
    "{overflow:hidden;text-overflow:ellipsis;}}"
], tokens.itemContentGap, tokens.itemPaddingOrientationVertical, tokens.itemCursorOverNotSelected, tokens.itemCursor, addFocus({
    outlineSize: '0.063rem',
    outlineOffset: '0.063rem',
    outlineColor: "var(".concat(tokens.outlineFocusColor, ")"),
    outlineRadius: 'var(--border-radius-m , calc(var(--plasma_private-outline-radius) + 0.063rem))',
    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        ")
}), classes.tabsTruncate, StyledContent, TabItemValue);
