"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboxInput = exports.CheckStateIcon = exports.Input = void 0;
const styles_1 = require("../../styles");
const utils_1 = require("../../styles/utils");
const Icon_1 = require("../Icon");
exports.Input = styles_1.styled.input(utils_1.visuallyHidden);
exports.CheckStateIcon = styles_1.styled(Icon_1.Icon)(({ theme }) => ({
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    display: 'block',
    visibility: 'hidden',
    opacity: 0,
    pointerEvents: 'none',
    margin: 'auto',
    transition: `${theme.transitions.hover.ms}ms`,
}));
exports.CheckboxInput = styles_1.styled.div(({ theme }) => ({
    position: 'relative',
    cursor: 'pointer',
    transition: `${theme.transitions.hover.ms}ms`,
    boxSizing: 'border-box',
    border: `2px solid ${theme.colors.gray[3]}`,
    borderRadius: theme.radii[1],
    width: '1.125rem',
    height: '1.125rem',
    backgroundColor: '#fff',
    userSelect: 'none',
    [`${exports.Input}:focus + &`]: {
        borderColor: theme.colors.primary,
    },
    [`${exports.Input}:checked:focus + &`]: {
        borderColor: theme.colors.primary,
    },
    [`${exports.Input}:checked + &`]: {
        backgroundColor: theme.colors.primary,
        borderColor: theme.colors.primary,
    },
    [`${exports.Input}:checked + & .checkIcon`]: {
        visibility: 'visible',
        opacity: 1,
    },
    '&.indeterminate': {
        borderColor: theme.colors.primary,
        '.minusIcon': {
            visibility: 'visible',
            opacity: 1,
        },
        '.checkIcon': {
            visibility: 'hidden',
            opacity: 0,
        },
    },
}));
//# sourceMappingURL=styles.js.map