"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const styles_1 = require("../../../styles");
const utils_1 = require("../../../styles/utils");
const Card_1 = require("../../Card");
const IconCircled_1 = require("../../IconCircled");
exports.Input = styles_1.styled.input(utils_1.visuallyHidden);
exports.Card = styles_1.styled(Card_1.Card)(({ theme }) => ({
    cursor: 'pointer',
    boxSizing: 'border-box',
    border: `1px solid transparent`,
    userSelect: 'none',
    [`${exports.Input}:checked:focus + &`]: {
        borderColor: theme.colors.primary,
    },
    [`${exports.Input}:checked + &, ${exports.Input}:focus + &`]: {
        borderColor: theme.colors.brandMain,
        boxShadow: theme.shadows[2],
    },
}));
exports.RadioIcon = styles_1.styled(IconCircled_1.IconCircled)(({ theme, checked }) => ({
    flexShrink: 0,
    border: `2px solid ${checked ? 'transparent' : theme.colors.gray[2]}`,
    backgroundColor: checked ? theme.colors.brandMain : 'transparent',
    svg: {
        visibility: checked ? 'visible' : 'hidden',
    },
}));
exports.Media = styles_1.styled(IconCircled_1.IconCircled)({
    flexShrink: 0,
});
//# sourceMappingURL=styles.js.map