import styled, { css } from "styled-components";
import { component, mergeConfig } from "../../engines";
import { emptyStateConfig, emptyStateTokens } from "../EmptyState";
import { IconDisclosureDownCentered } from "../_Icon";
import { tokens, constants, classes } from "./Combobox.tokens";
const mergedConfig = mergeConfig(emptyStateConfig);
const EmptyState = component(mergedConfig);
export const ListWrapper = styled.div.withConfig({
    displayName: "Combobox.styles__ListWrapper",
    componentId: "sc-638e27f3-0"
})([
    `width:`,
    `;padding:calc(var(`,
    `) + var(`,
    `,0rem));border-radius:var(`,
    `);box-sizing:border-box;background:var(`,
    `);box-shadow:`,
    `,inset 0 0 0 var(`,
    `,0rem) var(`,
    `,transparent);`
], ({ listWidth })=>listWidth || '100%', tokens.padding, tokens.dropdownBorderWidth, tokens.borderRadius, constants.background, constants.boxShadow, tokens.dropdownBorderWidth, tokens.dropdownBorderColor);
export const Ul = styled.ul.withConfig({
    displayName: "Combobox.styles__Ul",
    componentId: "sc-638e27f3-1"
})([
    `max-height:`,
    `;overflow-x:hidden;overflow-y:`,
    `;border-radius:calc(var(`,
    `) - 0.125rem - var(`,
    `,0rem));margin:0;padding:0;.`,
    `{box-shadow:none;}`
], ({ virtual, listMaxHeight })=>virtual ? 'auto' : listMaxHeight || 'auto', ({ virtual })=>virtual ? 'visible' : 'auto', tokens.borderRadius, tokens.dropdownBorderWidth, classes.emptyStateWrapper);
export const IconArrowWrapper = styled.div.withConfig({
    displayName: "Combobox.styles__IconArrowWrapper",
    componentId: "sc-638e27f3-2"
})([
    `line-height:0;color:var(`,
    `);cursor:`,
    `;.`,
    `{transform:rotate(-180deg);}&:hover,&:active{color:`,
    `;}`
], tokens.disclosureIconColor, ({ disabled, readOnly })=>disabled || readOnly ? 'inherit' : 'pointer', classes.arrowInverse, ({ disabled, readOnly })=>disabled || readOnly ? `var(${tokens.disclosureIconColor})` : `var(${tokens.disclosureIconColorHover})`);
// TODO: Удалить после поддержки JS переменных в конфиге компонент
export const sizeMap = {
    xs: '1rem',
    s: '1.5rem'
};
export const StyledArrow = styled(IconDisclosureDownCentered).withConfig({
    displayName: "Combobox.styles__StyledArrow",
    componentId: "sc-638e27f3-3"
})([
    `width:`,
    `;height:`,
    `;`
], ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`, ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`);
export const base = css([
    ``
]);
export const StyledEmptyState = styled(EmptyState).withConfig({
    displayName: "Combobox.styles__StyledEmptyState",
    componentId: "sc-638e27f3-4"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], emptyStateTokens.borderRadius, tokens.textFieldBorderRadius, emptyStateTokens.padding, tokens.emptyStatePadding, emptyStateTokens.fontFamily, tokens.textFieldFontFamily, emptyStateTokens.fontSize, tokens.textFieldFontSize, emptyStateTokens.fontStyle, tokens.textFieldFontStyle, emptyStateTokens.fontWeight, tokens.textFieldFontWeight, emptyStateTokens.fontLetterSpacing, tokens.textFieldLetterSpacing, emptyStateTokens.fontLineHeight, tokens.textFieldLineHeight);
export const StyledLeftHelper = styled.span.withConfig({
    displayName: "Combobox.styles__StyledLeftHelper",
    componentId: "sc-638e27f3-5"
})([
    `margin:0;padding:0;`
]);
