import { css } from "styled-components";
import styled 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 var SliderContainer = styled.div.withConfig({
    displayName: "TextFieldSlider.styles__SliderContainer",
    componentId: "sc-72b2c86c-0"
})([
    "position:absolute;bottom:0;left:var(",
    ",0);right:var(",
    ",0);"
], tokens.sliderContainerOffset, tokens.sliderContainerOffset);
export var SliderWithHelpersWrapper = styled.div.withConfig({
    displayName: "TextFieldSlider.styles__SliderWithHelpersWrapper",
    componentId: "sc-72b2c86c-1"
})([
    "position:relative;"
]);
export var ScaleWrapper = styled.div.withConfig({
    displayName: "TextFieldSlider.styles__ScaleWrapper",
    componentId: "sc-72b2c86c-2"
})([
    "display:flex;justify-content:space-between;margin-top:var(",
    ");padding-top:var(",
    ");"
], tokens.scaleWrapperOffset, tokens.scaleWrapperPaddingTop);
export var ScaleValue = styled.span.withConfig({
    displayName: "TextFieldSlider.styles__ScaleValue",
    componentId: "sc-72b2c86c-3"
})([
    "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 var 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);
