import styled, { css } from "styled-components";
import { textFieldTokens } from "../TextField";
import { Input } from "../TextField/TextField.styles";
import { StyledInput } from "./ui/Input/Input.styles";
import { classes, tokens } from "./TextFieldSlider.tokens";
export const ScaleTicksWrapper = styled.div.withConfig({
    displayName: "TextFieldSlider.styles__ScaleTicksWrapper",
    componentId: "sc-d608f82a-0"
})([
    `position:relative;overflow:visible;height:var(`,
    `);margin-top:calc(var(`,
    `) + var(`,
    `));margin-left:calc(var(`,
    `) + var(`,
    `) / 2);margin-right:calc(var(`,
    `) + var(`,
    `) / 2);`
], tokens.scaleValueLineHeight, tokens.scaleWrapperOffset, tokens.scaleWrapperPaddingTop, tokens.sliderContainerOffset, tokens.sliderThumbSize, tokens.sliderContainerOffset, tokens.sliderThumbSize);
export const ScaleTick = styled.div.withConfig({
    displayName: "TextFieldSlider.styles__ScaleTick",
    componentId: "sc-d608f82a-1"
})([
    `position:absolute;top:0;bottom:0;width:0;overflow:visible;cursor:pointer;`
]);
export const ScaleTickDot = styled.span.withConfig({
    displayName: "TextFieldSlider.styles__ScaleTickDot",
    componentId: "sc-d608f82a-2"
})([
    `position:absolute;left:0;top:calc( -1 * (var(`,
    `) + var(`,
    `)) - var( `,
    ` ) / 2 - var(`,
    `) / 2 );transform:translateX(-50%);display:block;width:var(`,
    `);height:var(`,
    `);border-radius:50%;background-color:`,
    `;`
], tokens.scaleWrapperOffset, tokens.scaleWrapperPaddingTop, tokens.sliderTrackHeight, tokens.scaleTickSize, tokens.scaleTickSize, tokens.scaleTickSize, ({ filled })=>filled ? `var(${tokens.scaleTickDotFilledColor})` : `var(${tokens.scaleTickDotColor})`);
export const ScaleTickLabel = styled.span.withConfig({
    displayName: "TextFieldSlider.styles__ScaleTickLabel",
    componentId: "sc-d608f82a-3"
})([
    `position:absolute;top:0;left:0;transform:translateX(-50%);white-space:nowrap;color:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);`
], tokens.scaleValueColor, tokens.scaleValueFontFamily, tokens.scaleValueFontSize, tokens.scaleValueFontStyle, tokens.scaleValueFontWeight, tokens.scaleValueLetterSpacing, tokens.scaleValueLineHeight);
export const SliderContainer = styled.div.withConfig({
    displayName: "TextFieldSlider.styles__SliderContainer",
    componentId: "sc-d608f82a-4"
})([
    `position:absolute;bottom:0;left:var(`,
    `,0);right:var(`,
    `,0);`
], tokens.sliderContainerOffset, tokens.sliderContainerOffset);
export const SliderWithHelpersWrapper = styled.div.withConfig({
    displayName: "TextFieldSlider.styles__SliderWithHelpersWrapper",
    componentId: "sc-d608f82a-5"
})([
    `position:relative;`
]);
export const ScaleWrapper = styled.div.withConfig({
    displayName: "TextFieldSlider.styles__ScaleWrapper",
    componentId: "sc-d608f82a-6"
})([
    `display:flex;justify-content:space-between;margin-top:var(`,
    `);padding-top:var(`,
    `);`
], tokens.scaleWrapperOffset, tokens.scaleWrapperPaddingTop);
export const ScaleValue = styled.span.withConfig({
    displayName: "TextFieldSlider.styles__ScaleValue",
    componentId: "sc-d608f82a-7"
})([
    `color:var(`,
    `);font-size:var(`,
    `);line-height:var(`,
    `);font-weight:var(`,
    `);font-family:var(`,
    `);letter-spacing:var(`,
    `);`
], tokens.scaleValueColor, tokens.scaleValueFontSize, tokens.scaleValueLineHeight, tokens.scaleValueFontWeight, tokens.scaleValueFontFamily, tokens.scaleValueLetterSpacing);
export const base = css([
    `box-sizing:border-box;display:inline-block;&& `,
    `.`,
    `{`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);animation:shakingError 0.3s forwards;`,
    `{animation:fadeError 0.3s forwards;}}}@keyframes shakingError{14%{transform:translateX(-0.125rem);}28%{transform:translateX(0.125rem);}42%{transform:translateX(-0.125rem);}57%{transform:translateX(0.125rem);}71%{transform:translateX(-0.125rem);}85%{transform:translateX(0.125rem);}100%{transform:translateX(-0.125rem);}}@keyframes fadeError{50%{opacity:1;}100%{opacity:0;}}`
], StyledInput, classes.errorAnimation, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColor, textFieldTokens.borderColor, tokens.textFieldBorderErrorColor, textFieldTokens.borderColorHover, tokens.textFieldBorderErrorColor, textFieldTokens.borderColorFocus, tokens.textFieldBorderErrorColor, textFieldTokens.color, tokens.textFieldBorderErrorColor, Input);
