import styled from "@emotion/styled";
import { addFocus } from "../../../mixins";
import { tokens, classes } from "../List.tokens";
import { cellConfig, cellTokens } from "../../Cell";
import { component, mergeConfig } from "../../../engines";
var mergedCellConfig = mergeConfig(cellConfig);
var Cell = component(mergedCellConfig);
export var CellItem = /*#__PURE__*/ styled(Cell, {
    target: "e10tk3zj0",
    label: "CellItem"
})(cellTokens.cellWidth, ":100%;", cellTokens.cellPadding, ":0rem;", cellTokens.cellPaddingLeftContent, ":0rem;", cellTokens.cellPaddingContent, ":0rem;", cellTokens.cellPaddingRightContent, ":0rem;", cellTokens.cellTextboxGap, ":0rem;", cellTokens.cellGap, ":var(", tokens.listItemGap, ");", cellTokens.cellColor, ":var(", tokens.listItemColor, ");", cellTokens.cellBackgroundColor, ":transparent;");
export var StyledListItem = /*#__PURE__*/ styled("li", {
    target: "e10tk3zj1",
    label: "StyledListItem"
})("padding:var(", tokens.listItemPaddingTop, ") var(", tokens.listItemPaddingRight, ") var(", tokens.listItemPaddingBottom, ")\n        var(", tokens.listItemPaddingLeft, ");border-radius:var(", tokens.listItemBorderRadius, ");background:var(", tokens.listItemBackground, ");border:var(", tokens.listItemBorderWidth, ") solid var(", tokens.listItemBorderColor, ");outline:none;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;color:var(", tokens.listItemColor, ");font-size:var(", tokens.listItemFontSize, ");font-weight:var(", tokens.listItemFontWeight, ");font-family:var(", tokens.listItemFontFamily, ");font-style:var(", tokens.listItemFontStyle, ");line-height:var(", tokens.listItemLineHeight, ");letter-spacing:var(", tokens.listItemLetterSpacing, ");&:not(.", classes.disabledListItem, "):hover{background:var(", tokens.listItemBackgroundHover, ");border-color:var(", tokens.listItemBorderColorHover, ");color:var(", tokens.listItemColorHover, ");}&.", classes.disabledListItem, "{cursor:not-allowed;opacity:var(", tokens.listDisabledOpacity, ");}", addFocus({
    outlineOffset: '0.063rem',
    outlineSize: '0.063rem',
    outlineColor: "var(".concat(tokens.listItemFocusColor, ")"),
    outlineRadius: "var(".concat(tokens.listItemBorderRadius, ")")
}), ";");
