import { __assign } from '../../node_modules/tslib/tslib.es6.js';
import { cssVar, calc, mode } from '@chakra-ui/theme-tools';
import { switchAnatomy } from '@chakra-ui/anatomy';
import { opacity } from '../shared/opacity.js';

var _a;
var $width = cssVar('switch-track-width');
var $height = cssVar('switch-track-height');
var $diff = cssVar('switch-track-diff');
var diffValue = calc.subtract($width, $height);
var $translateX = cssVar('switch-thumb-x');
var baseStyleTrack = function (_a) {
    var bg = _a.bg, checkedBg = _a.checkedBg;
    var defaultBg = 'white';
    var defaultCheckedBg = 'blue';
    return {
        borderRadius: 'max',
        p: '2px',
        width: [$width.reference],
        height: [$height.reference],
        transitionProperty: 'common',
        transitionDuration: 'fast',
        bg: bg || defaultBg,
        _focusVisible: {
            boxShadow: 'outline',
        },
        _disabled: {
            opacity: opacity[20],
            cursor: 'not-allowed',
        },
        _checked: {
            bg: checkedBg || defaultCheckedBg,
            _hover: {
                bg: 'gray.700',
            },
        },
        _hover: {
            bg: 'gray.300',
        },
    };
};
var computedStyleTrack = function (props) {
    var c = props.colorScheme;
    var bg = mode("".concat(c, ".200"), "".concat(c, ".200"))(props);
    var checkedBg = mode("".concat(c, ".900"), "".concat(c, ".900"))(props);
    return baseStyleTrack(__assign(__assign({}, props), { bg: bg, checkedBg: checkedBg }));
};
var checkmark = {
    content: '""',
    display: 'block',
    width: '25%',
    height: '45%',
    border: 'solid',
    borderWidth: '0 2px 2px 0',
    position: 'absolute',
    top: '45%',
    left: '50%',
    transform: 'translate(-50%, -50%) rotate(45deg)',
};
var baseStyleThumb = {
    bg: 'white',
    transitionProperty: 'transform',
    transitionDuration: 'normal',
    borderRadius: 'inherit',
    width: [$height.reference],
    height: [$height.reference],
    _checked: {
        transform: "translateX(".concat($translateX.reference, ")"),
        _after: __assign(__assign({}, checkmark), { borderColor: 'gray.900' }),
        _hover: {
            _after: __assign(__assign({}, checkmark), { borderColor: 'gray.700' }),
        },
    },
};
var baseStyle = function (props) {
    var _a, _b;
    return ({
        container: (_a = {},
            _a[$diff.variable] = diffValue,
            _a[$translateX.variable] = $diff.reference,
            _a._rtl = (_b = {},
                _b[$translateX.variable] = calc($diff).negate().toString(),
                _b),
            _a),
        track: computedStyleTrack(props),
        thumb: baseStyleThumb,
    });
};
var sizes = {
    md: {
        container: (_a = {},
            _a[$width.variable] = '1.875rem',
            _a[$height.variable] = '1rem',
            _a),
    },
};
var variants = {
    default: {},
};
var defaultProps = {
    variant: 'default',
    size: 'md',
    colorScheme: 'gray',
};
var Switch = {
    parts: switchAnatomy.keys,
    baseStyle: baseStyle,
    sizes: sizes,
    variants: variants,
    defaultProps: defaultProps,
};

export { Switch as default };
//# sourceMappingURL=switch.js.map
