import styled from "styled-components";
import { tokens } from "../../TextFieldSlider.tokens";
export const SliderWrapper = styled.div.withConfig({
    displayName: "Slider.styles__SliderWrapper",
    componentId: "sc-a8edb0b0-0"
})([
    `position:relative;display:grid;`
]);
export const StyledSlider = styled.input.withConfig({
    displayName: "Slider.styles__StyledSlider",
    componentId: "sc-a8edb0b0-1"
})([
    `appearance:none;outline:none;background:none;border:none;height:var(`,
    `);width:100%;z-index:2;margin:0;cursor:pointer;opacity:`,
    `;transition:box-shadow 0.2s ease-in;::-webkit-slider-thumb{-webkit-appearance:none;border:none;border-radius:50%;cursor:grab;width:var(`,
    `);height:var(`,
    `);background:var(`,
    `);color:var(`,
    `);box-shadow:var(`,
    `);}::-moz-range-thumb{border:none;border-radius:50%;cursor:grab;width:var(`,
    `);height:var(`,
    `);background:var(`,
    `);color:var(`,
    `);box-shadow:var(`,
    `);}::-webkit-slider-thumb:hover,::-webkit-slider-thumb:active,&:focus-visible::-webkit-slider-thumb{border-radius:50%;box-shadow:var(`,
    `);}::-webkit-slider-thumb:active{cursor:grabbing;}::-moz-range-thumb:hover,::-moz-range-thumb:active,&:focus-visible::-moz-range-thumb{border-radius:50%;box-shadow:var(`,
    `);}::-moz-range-thumb:active{cursor:grabbing;}`
], tokens.sliderTrackHeight, ({ hasPointer })=>hasPointer ? '1' : '0', tokens.sliderThumbSize, tokens.sliderThumbSize, tokens.sliderThumbBackground, tokens.sliderThumbBackground, tokens.sliderThumbBorderBoxShadow, tokens.sliderThumbSize, tokens.sliderThumbSize, tokens.sliderThumbBackground, tokens.sliderThumbBackground, tokens.sliderThumbBorderBoxShadow, tokens.sliderThumbBorderBoxShadowFocus, tokens.sliderThumbBorderBoxShadowFocus);
export const StyledTrack = styled.div.withConfig({
    displayName: "Slider.styles__StyledTrack",
    componentId: "sc-a8edb0b0-2"
})([
    `position:absolute;top:50%;left:calc(var(`,
    `) / 2);right:calc(var(`,
    `) / 2);transform:translateY(-50%);height:var(`,
    `);border-radius:0.5rem;background-color:var(`,
    `);`
], tokens.sliderThumbSize, tokens.sliderThumbSize, tokens.sliderTrackHeight, tokens.sliderTrackBackground);
export const StyledProgress = styled.div.withConfig({
    displayName: "Slider.styles__StyledProgress",
    componentId: "sc-a8edb0b0-3"
})([
    `position:absolute;top:50%;left:calc(var(`,
    `) / 2);transform:translateY(-50%);width:`,
    `;height:var(`,
    `);border-radius:0.5rem;background:var(`,
    `);`
], tokens.sliderThumbSize, ({ value, max, min })=>`calc((${value} - ${min}) / (${max} - ${min}) * 100% - var(${tokens.sliderThumbSize}) / 2)`, tokens.sliderTrackHeight, tokens.sliderProgressBackground);
