import styled from "styled-components";
import { classes, tokens, constants } from "../../../../Combobox.tokens";
import { addFocus, applyEllipsis } from "../../../../../../../mixins";
import { component, mergeConfig } from "../../../../../../../engines";
import { checkboxConfig, checkboxTokens } from "../../../../../../Checkbox";
import { indicatorConfig, indicatorTokens } from "../../../../../../Indicator";
import { cellConfig, cellTokens } from "../../../../../../Cell";
import { IconDisclosureRightCentered, IconDone } from "../../../../../../_Icon";
var mergedCheckboxConfig = mergeConfig(checkboxConfig);
var Checkbox = component(mergedCheckboxConfig);
var mergedCellConfig = mergeConfig(cellConfig);
var Cell = component(mergedCellConfig);
// TODO: #1548
export var StyledCell = styled(Cell).withConfig({
    displayName: "Item.styles__StyledCell",
    componentId: "sc-2e5d08a2-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 var StyledCheckbox = styled(Checkbox).withConfig({
    displayName: "Item.styles__StyledCheckbox",
    componentId: "sc-2e5d08a2-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);
var mergedIndicatorConfig = mergeConfig(indicatorConfig);
var Indicator = component(mergedIndicatorConfig);
export var StyledIndicator = styled(Indicator).withConfig({
    displayName: "Item.styles__StyledIndicator",
    componentId: "sc-2e5d08a2-2"
})([
    "",
    ":var(",
    ");",
    ":var(",
    ");"
], indicatorTokens.size, tokens.indicatorSize, indicatorTokens.color, tokens.itemIconColor);
// TODO: Удалить после поддержки JS переменных в конфиге компонент
export var sizeMap = {
    xs: '1rem',
    s: '1.5rem'
};
export var StyledArrow = styled(IconDisclosureRightCentered).withConfig({
    displayName: "Item.styles__StyledArrow",
    componentId: "sc-2e5d08a2-3"
})([
    "width:",
    ";height:",
    ";"
], function(param) {
    var _param_size = param.size, size = _param_size === void 0 ? 'xs' : _param_size;
    return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
}, function(param) {
    var _param_size = param.size, size = _param_size === void 0 ? 'xs' : _param_size;
    return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
});
export var StyledIconDone = styled(IconDone).withConfig({
    displayName: "Item.styles__StyledIconDone",
    componentId: "sc-2e5d08a2-4"
})([
    "width:",
    ";height:",
    ";"
], function(param) {
    var _param_size = param.size, size = _param_size === void 0 ? 'xs' : _param_size;
    return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
}, function(param) {
    var _param_size = param.size, size = _param_size === void 0 ? 'xs' : _param_size;
    return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
});
export var StyledContentLeft = styled.div.withConfig({
    displayName: "Item.styles__StyledContentLeft",
    componentId: "sc-2e5d08a2-5"
})([
    "display:inline-flex;"
]);
export var StyledContentRight = styled.div.withConfig({
    displayName: "Item.styles__StyledContentRight",
    componentId: "sc-2e5d08a2-6"
})([
    "margin-left:auto;display:inline-flex;"
]);
export var DisclosureIconWrapper = styled.div.withConfig({
    displayName: "Item.styles__DisclosureIconWrapper",
    componentId: "sc-2e5d08a2-7"
})([
    "line-height:0;margin:var(",
    ");color:var(",
    ");&:hover{color:var(",
    ");}"
], tokens.disclosureIconMargin, tokens.disclosureIconColor, tokens.disclosureIconColorHover);
export var IconWrapper = styled.div.withConfig({
    displayName: "Item.styles__IconWrapper",
    componentId: "sc-2e5d08a2-8"
})([
    "display:flex;align-items:center;justify-content:center;flex:none;width:",
    ";height:",
    ";margin:var(",
    ");line-height:0;color:var(",
    ");"
], function(param) {
    var variant = param.variant;
    return "var(".concat(variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
}, function(param) {
    var variant = param.variant;
    return "var(".concat(variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
}, tokens.itemIconMargin, tokens.itemIconColor);
export var StyledText = styled.div.withConfig({
    displayName: "Item.styles__StyledText",
    componentId: "sc-2e5d08a2-9"
})([
    "",
    ";flex:1;"
], applyEllipsis());
export var Wrapper = styled.li.withConfig({
    displayName: "Item.styles__Wrapper",
    componentId: "sc-2e5d08a2-10"
})([
    "display:flex;align-items:center;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.itemHeight, function(param) {
    var variant = param.variant;
    return "var(".concat(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(".concat(constants.focusColor, ")"),
    outlineRadius: "calc(var(".concat(tokens.borderRadius, ") - 0.125rem - var(").concat(tokens.dropdownBorderWidth, ", 0rem))"),
    hasTransition: false,
    customFocusRules: "\n            &.".concat(classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: inset 0 0 0 0.0625rem var(").concat(constants.focusColor, ");\n            }\n        ")
}));
export var StyledCheckboxWrapper = styled.span.withConfig({
    displayName: "Item.styles__StyledCheckboxWrapper",
    componentId: "sc-2e5d08a2-11"
})([
    ""
]);
