"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Input = void 0;
const styled_1 = __importDefault(require("@emotion/styled"));
const utils_1 = require("../../../utils");
exports.Input = styled_1.default.input `
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	font: inherit;
	color: currentColor;
	width: 21px;
	height: 21px;
	border-style: solid;
	border-width: 2px;
	border-radius: 50%;
	display: grid;
	place-content: center;
	background: transparent;
	cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};

	background-color: ${({ colorType, disabled }) => (0, utils_1.radioButtonColorStyle)(colorType)[disabled ? 'disabled' : 'default'].off.containerColor};
	border-color: ${({ colorType, disabled }) => (0, utils_1.radioButtonColorStyle)(colorType)[disabled ? 'disabled' : 'default'].off.borderColor};

	&:checked {
		border-width: 6px;
		background-color: ${({ colorType, disabled }) => (0, utils_1.radioButtonColorStyle)(colorType)[disabled ? 'disabled' : 'default'].on.containerColor};
		border-color: ${({ colorType, disabled }) => (0, utils_1.radioButtonColorStyle)(colorType)[disabled ? 'disabled' : 'default'].on.borderColor};
	}

	&:focus {
		outline: none;
	}
`;
