import styled from "@emotion/styled";
import { addFocus } from "../../../../../../mixins";
import { IconDisclosureRightCentered } from "../../../../../_Icon";
import { classes, tokens, constants } from "../../../../Combobox.tokens";
// TODO: Удалить после поддержки JS переменных в конфиге компонент
export const sizeMap = {
    xs: '1rem',
    s: '1.5rem'
};
export const StyledArrow = /*#__PURE__*/ styled(IconDisclosureRightCentered, {
    target: "e1rj7swp0",
    label: "StyledArrow"
})("width:", ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`, ";height:", ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`, ";");
export const DisclosureIconWrapper = /*#__PURE__*/ styled("div", {
    target: "e1rj7swp1",
    label: "DisclosureIconWrapper"
})("line-height:0;margin:var(", tokens.disclosureIconMargin, ");color:var(", tokens.disclosureIconColor, ");&:hover{color:var(", tokens.disclosureIconColorHover, ");}");
export const Wrapper = /*#__PURE__*/ styled("li", {
    target: "e1rj7swp2",
    label: "Wrapper"
})("display:flex;align-items:center;min-height:var(", tokens.itemHeight, ");margin:0;box-sizing:content-box;padding:", ({ variant })=>`var(${variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding})`, ";font-family:var(", tokens.fontFamily, ");font-size:var(", tokens.fontSize, ");font-style:var(", tokens.fontStyle, ");font-weight:var(", tokens.fontWeight, ");letter-spacing:var(", tokens.fontLetterSpacing, ");line-height:var(", tokens.fontLineHeight, ");background-color:var(", constants.itemBackground, ");color:var(--text-primary);border-radius:calc(var(", tokens.borderRadius, ") - 0.125rem - var(", tokens.dropdownBorderWidth, ",0rem));user-select:none;background-clip:padding-box;&:hover:not(.", classes.dropdownItemIsDisabled, "){cursor:pointer;background-color:var(", tokens.itemBackgroundHover, ");}&.", classes.dropdownItemIsActive, "{background-color:var(", tokens.itemBackgroundHover, ");}&.", classes.dropdownItemIsDisabled, "{opacity:", constants.opacity, ";cursor:not-allowed;}:focus{outline:none;}", 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});
            }
        `
}), ";");
