import styled from "styled-components";
import { addFocus, applyEllipsis } from "../../../../mixins";
import { tokens, classes } from "../../Autocomplete.tokens";
export const StyledText = styled.div.withConfig({
    displayName: "SuggestionItem.styles__StyledText",
    componentId: "sc-adc41e41-0"
})([
    ``,
    `;flex:1;`
], applyEllipsis());
export const Wrapper = styled.li.withConfig({
    displayName: "SuggestionItem.styles__Wrapper",
    componentId: "sc-adc41e41-1"
})([
    `display:flex;align-items:center;margin:0;box-sizing:content-box;padding:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);background:var(`,
    `);color:var(`,
    `);border-radius:var(`,
    `);user-select:none;&:hover{cursor:pointer;background:var(`,
    `);}:focus{outline:none;}`,
    `;`
], tokens.itemPadding, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.itemBackground, tokens.itemColor, tokens.itemBorderRadius, tokens.itemBackgroundHover, addFocus({
    outlineSize: '0',
    outlineOffset: '0',
    outlineColor: `var(${tokens.focusColor})`,
    outlineRadius: `calc(var(${tokens.borderRadius}) - 0.125rem - var(${tokens.dropdownBorderWidth}, 0rem))`,
    hasTransition: false,
    customFocusRules: `
            &.${classes.suggestionItemIsFocused}:before {
                outline: none;
                box-shadow: inset 0 0 0 0.0625rem var(${tokens.focusColor});
            }
        `
}));
