import styled from "styled-components";
import { InputWrapper } from "../../../TextField/TextField.styles";
import { component, mergeConfig } from "../../../../engines";
import { classes, tokens } from "../../Slider.tokens";
import { textFieldConfig, textFieldTokens } from "../../../TextField";
import { Label, LabelWrapper as BaseLabelWrapper, BaseSliderContainer, BaseStyledTrack, BaseStyledRange } from "../SliderBase/SliderBase.styles";
const mergedConfig = mergeConfig(textFieldConfig);
const TextField = component(mergedConfig);
export { Label };
export const LabelWrapper = styled(BaseLabelWrapper).withConfig({
    displayName: "Double.styles__LabelWrapper",
    componentId: "sc-f2813718-0"
})([
    `margin-bottom:var(`,
    `);`
], tokens.labelWrapperMarginBottom);
export const LabelContentLeft = styled.div.withConfig({
    displayName: "Double.styles__LabelContentLeft",
    componentId: "sc-f2813718-1"
})([
    ``
]);
export const InputsWrapper = styled.div.withConfig({
    displayName: "Double.styles__InputsWrapper",
    componentId: "sc-f2813718-2"
})([
    `display:flex;gap:var(`,
    `);margin-top:var(`,
    `);box-shadow:var(`,
    `);`
], tokens.textFieldWrapperGap, tokens.doubleWrapperGap, tokens.doubleBoxShadow);
// NOTE: переопределение токенов TextField
export const StyledInput = styled(TextField).withConfig({
    displayName: "Double.styles__StyledInput",
    componentId: "sc-f2813718-3"
})([
    `flex:1;`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);&&.`,
    `{`,
    `{background:var(`,
    `);box-shadow:inset 0 0 0 var(`,
    `) var(`,
    `),inset 0 0 0 0 transparent;}}&&.`,
    `{`,
    `{background:var(`,
    `);box-shadow:inset 0 0 0 var(`,
    `) var(`,
    `),inset 0 0 0 0 transparent;}}&.`,
    `{margin-right:var(`,
    `,0);`,
    `{clip-path:var(`,
    `);}&&.`,
    `,&&.`,
    `{`,
    `{clip-path:inset(0 0 0 0);}& + .`,
    `:not(.`,
    `) `,
    `{clip-path:var(`,
    `);}}& > `,
    `{border-top-right-radius:0;border-bottom-right-radius:0;}}&.`,
    ` > `,
    `{border-top-left-radius:0;border-bottom-left-radius:0;}`
], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderColor, tokens.textFieldBorderColor, textFieldTokens.borderColorHover, tokens.textFieldBorderColorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorFocus, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, classes.textFieldHovered, InputWrapper, tokens.textFieldBackgroundColorHover, tokens.textFieldBorderWidth, tokens.textFieldBorderColorHover, classes.textFieldFocused, InputWrapper, tokens.textFieldBackgroundColorFocus, tokens.textFieldBorderWidth, tokens.textFieldBorderColorFocus, classes.firstTextField, tokens.textFieldWebMarginRight, InputWrapper, tokens.textFieldWebClipPath, classes.textFieldHovered, classes.textFieldFocused, InputWrapper, classes.secondTextField, classes.textFieldFocused, InputWrapper, tokens.textFieldWebReversedClipPath, InputWrapper, classes.secondTextField, InputWrapper);
export const DoubleWrapper = styled.div.withConfig({
    displayName: "Double.styles__DoubleWrapper",
    componentId: "sc-f2813718-4"
})([
    `opacity:var(`,
    `);`
], tokens.disabledOpacity);
export const SliderContainer = BaseSliderContainer;
export const StyledTrack = BaseStyledTrack;
export const StyledDoubleProgress = styled.div.withConfig({
    displayName: "Double.styles__StyledDoubleProgress",
    componentId: "sc-f2813718-5"
})([
    `position:absolute;top:50%;transform:translateY(-50%);height:var(`,
    `);border-radius:var(`,
    `);background:var(`,
    `);pointer-events:none;`
], tokens.railThickness, tokens.railBorderRadius, tokens.fillColor);
export const StyledRange = styled(BaseStyledRange).withConfig({
    displayName: "Double.styles__StyledRange",
    componentId: "sc-f2813718-6"
})([
    `grid-area:1 / 1;pointer-events:none;&::-webkit-slider-thumb{pointer-events:all;}&::-moz-range-thumb{pointer-events:all;}`
]);
export const SliderWrapper = styled.div.withConfig({
    displayName: "Double.styles__SliderWrapper",
    componentId: "sc-f2813718-7"
})([
    ``
]);
