import styled from "styled-components";
import { addFocus, applyEllipsis } from "../../../../../../mixins";
import { component, mergeConfig } from "../../../../../../engines";
import { classes, tokens, constants } from "../../../../Select.tokens";
import { checkboxConfig, checkboxTokens } from "../../../../../Checkbox";
import { cellConfig, cellTokens } from "../../../../../Cell";
import { indicatorConfig, indicatorTokens } from "../../../../../Indicator";
import { IconDisclosureRightCentered, IconDone } from "../../../../../_Icon";
export const ItemWrapper = styled.div.withConfig({
    displayName: "Item.styles__ItemWrapper",
    componentId: "sc-10dc521f-0"
})([
    ``
]);
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: "Item.styles__StyledCell",
    componentId: "sc-10dc521f-1"
})([
    ``,
    `: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: "Item.styles__StyledCheckbox",
    componentId: "sc-10dc521f-2"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], checkboxTokens.triggerSize, tokens.checkboxTriggerSize, checkboxTokens.triggerBorderRadius, tokens.checkboxTriggerBorderRadius, checkboxTokens.fillColor, tokens.checkboxFillColor, checkboxTokens.iconColor, tokens.checkboxIconColor, checkboxTokens.triggerBorderWidth, tokens.checkboxTriggerBorderWidth, checkboxTokens.triggerBorderColor, tokens.checkboxTriggerBorderColor, checkboxTokens.triggerBorderCheckedColor, tokens.checkboxTriggerBorderCheckedColor);
export const StyledIndicator = styled(Indicator).withConfig({
    displayName: "Item.styles__StyledIndicator",
    componentId: "sc-10dc521f-3"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], indicatorTokens.size, tokens.indicatorSize, indicatorTokens.color, tokens.itemIconColor);
// TODO: Удалить после поддержки JS переменных в конфиге компонент
export const sizeMap = {
    xs: '1rem',
    s: '1.5rem'
};
export const StyledArrowLeft = styled(IconDisclosureRightCentered).withConfig({
    displayName: "Item.styles__StyledArrowLeft",
    componentId: "sc-10dc521f-4"
})([
    `width:`,
    `;height:`,
    `;&.`,
    `{transform:rotate(90deg);}`
], ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`, ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`, classes.arrowInverse);
export const StyledArrowRight = styled(IconDisclosureRightCentered).withConfig({
    displayName: "Item.styles__StyledArrowRight",
    componentId: "sc-10dc521f-5"
})([
    `width:`,
    `;height:`,
    `;transform:rotate(90deg);&.`,
    `{transform:rotate(-90deg);}`
], ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`, ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`, classes.arrowInverse);
export const StyledIconDone = styled(IconDone).withConfig({
    displayName: "Item.styles__StyledIconDone",
    componentId: "sc-10dc521f-6"
})([
    `width:`,
    `;height:`,
    `;`
], ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`, ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`);
export const DisclosureIconWrapper = styled.div.withConfig({
    displayName: "Item.styles__DisclosureIconWrapper",
    componentId: "sc-10dc521f-7"
})([
    `line-height:0;color:var(`,
    `,var(`,
    `));visibility:`,
    `;&:hover{color:var(`,
    `,var(`,
    `));}`
], tokens.disclosureNestedIconColor, tokens.disclosureIconColor, ({ visibility })=>visibility || 'visible', tokens.disclosureNestedIconColorHover, tokens.disclosureIconColorHover);
export const IconWrapper = styled.div.withConfig({
    displayName: "Item.styles__IconWrapper",
    componentId: "sc-10dc521f-8"
})([
    `display:flex;align-items:center;justify-content:center;flex:none;width:`,
    `;height:`,
    `;line-height:0;color:var(`,
    `);`
], ({ variant })=>`var(${variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize})`, ({ variant })=>`var(${variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize})`, tokens.itemIconColor);
export const StyledText = styled.div.withConfig({
    displayName: "Item.styles__StyledText",
    componentId: "sc-10dc521f-9"
})([
    ``,
    `;flex:1;`
], applyEllipsis());
export const Wrapper = styled.div.withConfig({
    displayName: "Item.styles__Wrapper",
    componentId: "sc-10dc521f-10"
})([
    `display:flex;align-items:center;gap:var(`,
    `);min-height:var(`,
    `);margin:0;box-sizing:content-box;padding:`,
    `;font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);background-color:var(`,
    `);color:var(--text-primary);border-radius:calc(var(`,
    `) - 0.125rem - var(`,
    `,0rem));user-select:none;background-clip:padding-box;&:hover:not(.`,
    `){cursor:pointer;background-color:var(`,
    `);}&.`,
    `{background-color:var(`,
    `);}&.`,
    `{opacity:`,
    `;cursor:not-allowed;}:focus{outline:none;}`,
    `;`
], tokens.itemGap, tokens.itemHeight, ({ variant })=>`var(${variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding})`, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, constants.itemBackground, tokens.borderRadius, tokens.dropdownBorderWidth, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, addFocus({
    outlineSize: '0',
    outlineOffset: '0',
    outlineColor: `var(${constants.focusColor})`,
    outlineRadius: `calc(var(${tokens.borderRadius}) - 0.125rem - var(${tokens.dropdownBorderWidth}, 0rem))`,
    hasTransition: false,
    customFocusRules: `
            &.${classes.dropdownItemIsFocused}:before {
                outline: none;
                box-shadow: inset 0 0 0 0.0625rem var(${constants.focusColor});
            }
        `
}));
export const StyledCheckboxWrapper = styled.span.withConfig({
    displayName: "Item.styles__StyledCheckboxWrapper",
    componentId: "sc-10dc521f-11"
})([
    ``
]);
export const ChildItems = styled.div.withConfig({
    displayName: "Item.styles__ChildItems",
    componentId: "sc-10dc521f-12"
})([
    ``
]);
export const Offset = styled.div.withConfig({
    displayName: "Item.styles__Offset",
    componentId: "sc-10dc521f-13"
})([
    `width:calc(`,
    ` * var(`,
    `));flex:none;margin-right:calc(var(`,
    `) * -1);`
], ({ depth })=>depth || 0, tokens.itemTreeOffsetWidth, tokens.itemGap);
