import styled, { css } from "styled-components";
import { component, mergeConfig } from "../../engines";
import { textFieldConfig, textFieldTokens } from "../TextField";
import { classes, tokens } from "./Range.tokens";
import { EmbedIconButtonUI } from "./ui";
const mergedConfig = mergeConfig(textFieldConfig);
const TextField = component(mergedConfig);
export const StyledContentLeft = styled.div.withConfig({
    displayName: "Range.styles__StyledContentLeft",
    componentId: "sc-8c253bec-0"
})([
    `line-height:0;color:var(`,
    `);&:hover{color:var(`,
    `);}&:active{color:var(`,
    `);}`
], tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive);
export const StyledContentRight = styled(EmbedIconButtonUI).withConfig({
    displayName: "Range.styles__StyledContentRight",
    componentId: "sc-8c253bec-1"
})([
    ``
]);
// NOTE: переопределение токенов TextField
export const StyledInput = styled(TextField).withConfig({
    displayName: "Range.styles__StyledInput",
    componentId: "sc-8c253bec-2"
})([
    `width:100%;`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);&.`,
    `{`,
    `:var(`,
    `,var(`,
    `));`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);}&.`,
    `{`,
    `:var(`,
    `,var(`,
    `));`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);}&.`,
    `{`,
    `:var(`,
    `,var(`,
    `));`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);}`
], textFieldTokens.fieldSizing, tokens.textFieldSizing, textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.placeholderColorFocus, tokens.textFieldPlaceholderColorFocus, textFieldTokens.clearPlaceholderColorFocus, tokens.textFieldClearPlaceholderColorFocus, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColor, textFieldTokens.borderColorHover, tokens.textFieldBorderColorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorFocus, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, textFieldTokens.dividerColorHover, tokens.textFieldDividerColorHover, textFieldTokens.dividerColorFocus, tokens.textFieldDividerColorFocus, classes.rangeValueSuccess, textFieldTokens.color, tokens.textFieldColorSuccess, tokens.textFieldColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus, classes.rangeValueError, textFieldTokens.color, tokens.textFieldColorError, tokens.textFieldColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.rangeValueEdited, textFieldTokens.color, tokens.textFieldColorEdited, tokens.textFieldColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundEditedColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundEditedColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundEditedColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorEdited, textFieldTokens.borderColorHover, tokens.textFieldBorderColorEditedHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorEditedFocus);
export const base = css([
    `width:fit-content;`
]);
export const ContentWrapper = styled.div.withConfig({
    displayName: "Range.styles__ContentWrapper",
    componentId: "sc-8c253bec-3"
})([
    `display:flex;align-items:center;position:relative;&:before{content:'';position:absolute;inset:0;z-index:-1;}&.`,
    `{&:before{display:none;}&.`,
    `{&:before{display:block;content:'';position:absolute;top:unset;left:0;right:0;bottom:0;z-index:-1;height:1px;box-shadow:unset;background:var(`,
    `);opacity:1;}}}`
], classes.clear, classes.clearDivider, tokens.clearDividerColor);
export const StyledDivider = styled.div.withConfig({
    displayName: "Range.styles__StyledDivider",
    componentId: "sc-8c253bec-4"
})([
    ``
]);
export const StyledContentRightWrapper = styled.div.withConfig({
    displayName: "Range.styles__StyledContentRightWrapper",
    componentId: "sc-8c253bec-5"
})([
    `display:flex;align-items:center;flex-direction:row-reverse;`
]);
