"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
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.CheckIcon = styles_1.styled(Icon_1.Icon)(({ theme }) => ({
    display: 'block',
    visibility: 'hidden',
    opacity: 0,
    pointerEvents: 'none',
    margin: 'auto',
    transition: `${theme.transitions.hover.ms}ms`,
}));
exports.CheckboxInput = styles_1.styled.div(({ theme }) => ({
    cursor: 'pointer',
    transition: `${theme.transitions.hover.ms}ms`,
    boxSizing: 'border-box',
    border: `2px solid ${theme.colors.gray[3]}`,
    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 + & ${exports.CheckIcon}`]: {
        visibility: 'visible',
        opacity: 1,
    },
}));
//# sourceMappingURL=styles.js.map