import styled from "styled-components";
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 = styled(Cell).withConfig({
    displayName: "ListItem.styles__CellItem",
    componentId: "sc-fd248e48-0"
})([
    "",
    ":100%;",
    ":0rem;",
    ":0rem;",
    ":0rem;",
    ":0rem;",
    ":0rem;",
    ":var(",
    ");",
    ":var(",
    ");",
    ":transparent;"
], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, tokens.listItemGap, cellTokens.cellColor, tokens.listItemColor, cellTokens.cellBackgroundColor);
export var StyledListItem = styled.li.withConfig({
    displayName: "ListItem.styles__StyledListItem",
    componentId: "sc-fd248e48-1"
})([
    "padding:var(",
    ") var(",
    ") var(",
    ") var(",
    ");border-radius:var(",
    ");background:var(",
    ");border:var(",
    ") solid var(",
    ");outline:none;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;color:var(",
    ");font-size:var(",
    ");font-weight:var(",
    ");font-family:var(",
    ");font-style:var(",
    ");line-height:var(",
    ");letter-spacing:var(",
    ");&:not(.",
    "):hover{background:var(",
    ");border-color:var(",
    ");color:var(",
    ");}&.",
    "{cursor:not-allowed;opacity:var(",
    ");}",
    ";"
], tokens.listItemPaddingTop, tokens.listItemPaddingRight, tokens.listItemPaddingBottom, tokens.listItemPaddingLeft, tokens.listItemBorderRadius, tokens.listItemBackground, tokens.listItemBorderWidth, tokens.listItemBorderColor, tokens.listItemColor, tokens.listItemFontSize, tokens.listItemFontWeight, tokens.listItemFontFamily, tokens.listItemFontStyle, tokens.listItemLineHeight, tokens.listItemLetterSpacing, classes.disabledListItem, tokens.listItemBackgroundHover, tokens.listItemBorderColorHover, tokens.listItemColorHover, classes.disabledListItem, tokens.listDisabledOpacity, addFocus({
    outlineOffset: '0.063rem',
    outlineSize: '0.063rem',
    outlineColor: "var(".concat(tokens.listItemFocusColor, ")"),
    outlineRadius: "var(".concat(tokens.listItemBorderRadius, ")")
}));
