import { __assign } from '../../node_modules/tslib/tslib.es6.js';
import { orient } from '@chakra-ui/theme-tools';
import { createMultiStyleConfigHelpers, cssVar, defineStyle, calc } from '@chakra-ui/styled-system';
import { sliderAnatomy } from '@chakra-ui/anatomy';

var _a = createMultiStyleConfigHelpers(sliderAnatomy.keys), defineMultiStyleConfig = _a.defineMultiStyleConfig, definePartsStyle = _a.definePartsStyle;
var $thumbSize = cssVar('slider-thumb-size');
var baseStyleContainer = defineStyle(function (props) {
    var _a;
    var orientation = props.orientation;
    return __assign((_a = {}, _a[$thumbSize.variable] = 'sizes.sm', _a.display = 'inline-block', _a.position = 'relative', _a.cursor = 'pointer', _a._disabled = {
        opacity: 0.6,
        cursor: 'default',
        pointerEvents: 'none',
    }, _a), orient({
        orientation: orientation,
        vertical: {
            h: '100%',
            px: calc($thumbSize.reference).divide(2).toString(),
        },
        horizontal: {
            w: '100%',
            py: calc($thumbSize.reference).divide(2).toString(),
        },
    }));
});
var baseStyleTrack = defineStyle(function (props) {
    var orientationStyles = orient({
        orientation: props.orientation,
        horizontal: { h: '4' },
        vertical: { w: '4' },
    });
    return __assign(__assign({}, orientationStyles), { overflow: 'hidden', borderRadius: 'sm', bg: 'gray.300', _disabled: {
            bg: 'gray.400',
        } });
});
var baseStyleThumb = defineStyle(function (props) {
    var orientation = props.orientation;
    var orientationStyle = orient({
        orientation: orientation,
        vertical: {
            left: '50%',
            transform: "translateX(-50%)",
            _active: {
                transform: "translateX(-50%) scale(1.15)",
            },
        },
        horizontal: {
            top: '50%',
            transform: "translateY(-50%)",
            _active: {
                transform: "translateY(-50%) scale(1.15)",
            },
        },
    });
    return __assign(__assign({}, orientationStyle), { w: $thumbSize.reference, h: $thumbSize.reference, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'absolute', outline: 0, zIndex: 1, borderRadius: 'full', bg: 'white', boxShadow: 'base', border: '1px solid', borderColor: 'gray.400', transitionProperty: 'transform', transitionDuration: 'normal', _focusVisible: {
            boxShadow: 'outline',
        }, _active: {
            boxShadow: '0 0 0 8px #2988E14D', // this is blue.50 with 30% opacity
        }, _disabled: {
            bg: 'gray.300',
        } });
});
var baseStyleMark = defineStyle(function () {
    return {
        mt: '2xl',
        fontSize: 'sm',
        transform: 'translateX(-50%)',
        whiteSpace: 'nowrap',
    };
});
var baseStyleFilledTrack = defineStyle(function () { return ({
    width: 'inherit',
    height: 'inherit',
    bg: 'gray.900',
}); });
var baseStyle = definePartsStyle(function (props) { return ({
    container: baseStyleContainer(props),
    track: baseStyleTrack(props),
    thumb: baseStyleThumb(props),
    filledTrack: baseStyleFilledTrack(),
    mark: baseStyleMark(),
}); });
var Slider = defineMultiStyleConfig({
    baseStyle: baseStyle,
});

export { Slider as default };
//# sourceMappingURL=slider.js.map
