import styled from "styled-components";
import { addFocus } from "../../../mixins";
import { tokens, classes } from "../List.tokens";
import { cellConfig, cellTokens } from "../../Cell";
import { CellContentWrapper } from "../../Cell/Cell.styles";
import { component, mergeConfig } from "../../../engines";
const mergedCellConfig = mergeConfig(cellConfig);
const Cell = component(mergedCellConfig);
export const CellItem = styled(Cell).withConfig({
    displayName: "ListItem.styles__CellItem",
    componentId: "sc-3aedd4a5-0"
})([
    ``,
    `:100%;`,
    `:0rem;`,
    `:0rem;`,
    `:var(`,
    `);`,
    `:0rem;`,
    `:0rem;`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:transparent;`
], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, tokens.listItemContentPadding, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, tokens.listItemGap, cellTokens.cellColor, tokens.listItemColor, cellTokens.cellBackgroundColor);
export const StyledListItem = styled.li.withConfig({
    displayName: "ListItem.styles__StyledListItem",
    componentId: "sc-3aedd4a5-1"
})([
    `padding:var(`,
    `) var(`,
    `) var(`,
    `) var(`,
    `);border-radius:var(`,
    `);background:transparent;border:var(`,
    `) solid var(`,
    `);outline:none;position:relative;box-sizing:border-box;min-width:0;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(`,
    `);&.`,
    `{background:var(`,
    `);}&.`,
    ` `,
    `{position:relative;}&.`,
    `:not(:last-child){margin-bottom:calc( var(`,
    `,0rem) + var(`,
    `) + var(`,
    `,0rem) );}&.`,
    `:not(:last-child) `,
    `::after{content:'';position:absolute;pointer-events:none;left:0;right:0;bottom:calc( -1 * (var(`,
    `) + var(`,
    `,0rem) + var(`,
    `)) );height:var(`,
    `);background: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.listItemBorderWidth, tokens.listItemBorderColor, tokens.listItemColor, tokens.listItemFontSize, tokens.listItemFontWeight, tokens.listItemFontFamily, tokens.listItemFontStyle, tokens.listItemLineHeight, tokens.listItemLetterSpacing, classes.hasItemBackground, tokens.listItemBackground, classes.hasItemDivider, CellContentWrapper, classes.hasItemDivider, tokens.listItemDividerMarginTop, tokens.listItemDividerHeight, tokens.listItemDividerMarginBottom, classes.hasItemDivider, CellContentWrapper, tokens.listItemPaddingBottom, tokens.listItemDividerMarginTop, tokens.listItemDividerHeight, tokens.listItemDividerHeight, tokens.listItemDividerColor, classes.disabledListItem, tokens.listItemBackgroundHover, tokens.listItemBorderColorHover, tokens.listItemColorHover, classes.disabledListItem, tokens.listDisabledOpacity, addFocus({
    outlineOffset: '0',
    outlineSize: '0.063rem',
    outlineColor: `var(${tokens.listItemFocusColor})`,
    outlineRadius: `var(${tokens.listItemBorderRadius})`
}));
