import styled from "styled-components";
import { applyEllipsis } from "../../../../mixins";
import { component, mergeConfig } from "../../../../engines";
import { checkboxConfig, checkboxTokens } from "../../../Checkbox";
import { indicatorConfig, indicatorTokens } from "../../../Indicator";
import { cellConfig, cellTokens } from "../../../Cell";
import { IconDone } from "../../../_Icon";
import { classes, tokens, constants } from "../../Combobox.tokens";
const mergedCheckboxConfig = mergeConfig(checkboxConfig);
const Checkbox = component(mergedCheckboxConfig);
const mergedCellConfig = mergeConfig(cellConfig);
const Cell = component(mergedCellConfig);
const mergedIndicatorConfig = mergeConfig(indicatorConfig);
const Indicator = component(mergedIndicatorConfig);
// TODO: #1548
export const StyledCell = styled(Cell).withConfig({
    displayName: "ItemView.styles__StyledCell",
    componentId: "sc-bc74ad0e-0"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);flex:1;min-width:0;& *{min-width:0;}&.`,
    ` .cell-textbox-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}`
], cellTokens.cellTitleColor, constants.cellTitleColor, cellTokens.cellBackgroundColor, constants.cellBackgroundColor, cellTokens.cellPadding, tokens.cellPadding, cellTokens.cellPaddingLeftContent, tokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, tokens.cellPaddingContent, cellTokens.cellPaddingRightContent, tokens.cellPaddingRightContent, cellTokens.cellTextboxGap, tokens.cellTextboxGap, cellTokens.cellGap, tokens.cellGap, cellTokens.cellTitleFontFamily, tokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, tokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, tokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, tokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, tokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, tokens.cellTitleLineHeight, classes.singleLineMode);
export const StyledCheckbox = styled(Checkbox).withConfig({
    displayName: "ItemView.styles__StyledCheckbox",
    componentId: "sc-bc74ad0e-1"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], checkboxTokens.triggerSize, tokens.checkboxTriggerSize, checkboxTokens.triggerBorderRadius, tokens.checkboxTriggerBorderRadius, checkboxTokens.fillColor, tokens.checkboxFillColor, checkboxTokens.iconColor, tokens.checkboxIconColor, checkboxTokens.triggerBorderColor, tokens.checkboxTriggerBorderColor, checkboxTokens.triggerBorderCheckedColor, tokens.checkboxTriggerBorderCheckedColor, checkboxTokens.triggerBorderWidth, tokens.checkboxTriggerBorderWidth);
export const StyledIndicator = styled(Indicator).withConfig({
    displayName: "ItemView.styles__StyledIndicator",
    componentId: "sc-bc74ad0e-2"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], indicatorTokens.size, tokens.indicatorSize, indicatorTokens.color, tokens.itemIconColor);
// TODO: Удалить после поддержки JS переменных в конфиге компонент
export const sizeMap = {
    xs: '1rem',
    s: '1.5rem'
};
export const StyledIconDone = styled(IconDone).withConfig({
    displayName: "ItemView.styles__StyledIconDone",
    componentId: "sc-bc74ad0e-3"
})([
    `width:`,
    `;height:`,
    `;`
], ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`, ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`);
export const IconWrapper = styled.div.withConfig({
    displayName: "ItemView.styles__IconWrapper",
    componentId: "sc-bc74ad0e-4"
})([
    `display:flex;align-items:center;justify-content:center;flex:none;width:`,
    `;height:`,
    `;margin:`,
    `;line-height:0;color:var(`,
    `);`
], ({ variant })=>`var(${variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize})`, ({ variant })=>`var(${variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize})`, ({ withMargin })=>withMargin ? `var(${tokens.itemIconMargin})` : '0', tokens.itemIconColor);
export const StyledText = styled.div.withConfig({
    displayName: "ItemView.styles__StyledText",
    componentId: "sc-bc74ad0e-5"
})([
    ``,
    `;flex:1;`
], applyEllipsis());
export const StyledCheckboxWrapper = styled.span.withConfig({
    displayName: "ItemView.styles__StyledCheckboxWrapper",
    componentId: "sc-bc74ad0e-6"
})([
    ``
]);
