"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.RadioButton = void 0;
const react_1 = __importDefault(require("react"));
const varsUtilities_1 = require("../../varsUtilities");
const inlines_1 = require("inlines");
const utils_1 = require("../../utils");
const RadioButton = ({ disabled, color, active, onClick, value, }) => {
    return (react_1.default.createElement(inlines_1.styled.div, { value: value, onClick: onClick, disabled: disabled, style: {
            position: 'relative',
            cursor: 'pointer',
            width: 16,
            height: 16,
            borderRadius: '50%',
            border: active ? `5px solid` : `1px solid `,
            boxSizing: 'border-box',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            borderColor: active
                ? (0, varsUtilities_1.color)('action', color, 'normal')
                : (0, varsUtilities_1.color)('inputBorder', 'neutralNormal', 'default'),
            '&:hover': {
                borderColor: active
                    ? (0, varsUtilities_1.color)('action', color, 'hover')
                    : (0, varsUtilities_1.color)('inputBorder', 'neutralNormal', 'default'),
            },
            [utils_1.BpTablet]: {
                '&:hover': null,
            },
            '&:focus': {
                outline: '3px solid',
                outlineColor: (0, varsUtilities_1.color)('action', 'primary', 'normal'),
                outlineOffset: '1px',
            },
        } }));
};
exports.RadioButton = RadioButton;
//# sourceMappingURL=RadioButton.js.map