import styled from "styled-components";
import { applyEllipsis } from "../../../../../../mixins";
import { component, mergeConfig } from "../../../../../../engines";
import { buttonConfig, buttonTokens } from "../../../../../Button";
import { IconDisclosureDownCentered } from "../../../../../_Icon";
import { tokens, classes, constants } from "../../../../Select.tokens";
const mergedButtonConfig = mergeConfig(buttonConfig);
const Button = component(mergedButtonConfig);
export const StyledButton = styled(Button).withConfig({
    displayName: "Button.styles__StyledButton",
    componentId: "sc-71164f2b-0"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:100%;`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:`,
    `;`,
    `:var(`,
    `);text-align:left;`
], buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonColorHover, tokens.buttonColorHover, buttonTokens.buttonColorActive, tokens.buttonColorActive, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive, buttonTokens.buttonRightContentMargin, tokens.buttonArrowMargin, buttonTokens.buttonHeight, tokens.targetHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, tokens.buttonPadding, buttonTokens.buttonRadius, tokens.borderRadius, buttonTokens.buttonFontFamily, tokens.fontFamily, buttonTokens.buttonFontSize, tokens.fontSize, buttonTokens.buttonFontStyle, tokens.fontStyle, buttonTokens.buttonFontWeight, tokens.fontWeight, buttonTokens.buttonLetterSpacing, tokens.fontLetterSpacing, buttonTokens.buttonLineHeight, tokens.fontLineHeight, buttonTokens.buttonDisabledOpacity, constants.opacity, buttonTokens.buttonFocusColor, constants.focusColor);
export const IconArrowWrapper = styled.div.withConfig({
    displayName: "Button.styles__IconArrowWrapper",
    componentId: "sc-71164f2b-1"
})([
    `line-height:0;color:var(`,
    `);&:hover{color:var(`,
    `);}&:active{color:var(`,
    `);}`
], tokens.buttonArrowColor, tokens.buttonArrowColorHover, tokens.buttonArrowColorActive);
// TODO: Удалить после поддержки JS переменных в конфиге компонент
export const sizeMap = {
    xs: '1rem',
    s: '1.5rem'
};
export const StyledArrow = styled(IconDisclosureDownCentered).withConfig({
    displayName: "Button.styles__StyledArrow",
    componentId: "sc-71164f2b-2"
})([
    `transition:color 0.3s ease-in,transform 0.15s ease-in;pointer-events:none;user-select:none;width:`,
    `;height:`,
    `;`
], ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`, ({ size = 'xs' })=>`var(${tokens.disclosureIconSize}, ${sizeMap[size]})`);
export const ButtonWrapper = styled.div.withConfig({
    displayName: "Button.styles__ButtonWrapper",
    componentId: "sc-71164f2b-3"
})([
    `display:inline;.`,
    `::before{box-shadow:none !important;}.`,
    `{transform:rotate(-180deg);}`
], classes.selectWithoutBoxShadow, classes.arrowInverse);
export const Label = styled.div.withConfig({
    displayName: "Button.styles__Label",
    componentId: "sc-71164f2b-4"
})([
    `display:inline;width:100%;text-align:left;`,
    ``
], applyEllipsis());
