"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Label = exports.CheckedRadio = exports.Radio = exports.Wrapper = void 0;
const tslib_1 = require("tslib");
const native_1 = tslib_1.__importDefault(require("styled-components/native"));
const theme_toolkit_1 = require("@platformbuilders/theme-toolkit");
const Touchable_1 = tslib_1.__importDefault(require("../Touchable"));
const Typography_1 = tslib_1.__importDefault(require("../Typography"));
const textColor = (0, theme_toolkit_1.getTheme)('text.main');
const checkedRadioColor = (0, theme_toolkit_1.getTheme)('brand.primary.main');
const spacingSm = (0, theme_toolkit_1.getTheme)('spacing.sm');
const smBorderWidth = (0, theme_toolkit_1.getTheme)('borderWidth.sm');
const hasColor = (0, theme_toolkit_1.ifStyle)('radioButtonColor');
const hasCheckedColor = (0, theme_toolkit_1.ifStyle)('checkedRadioButtonColor');
exports.Wrapper = (0, native_1.default)(Touchable_1.default) `
  flex-direction: row;
  align-items: center;
`;
exports.Radio = (0, native_1.default)(Touchable_1.default) `
  width: ${({ size }) => size}px;
  height: ${({ size }) => size}px;
  border-radius: ${({ size }) => size / 2}px;
  border: ${smBorderWidth}px
    ${({ radioButtonColor }) => hasColor(radioButtonColor, textColor)}${hasColor('', '4D')};
  align-items: center;
  justify-content: center;
`;
exports.CheckedRadio = native_1.default.View `
  width: ${({ internalSize }) => internalSize}px;
  height: ${({ internalSize }) => internalSize}px;
  background-color: ${({ checkedRadioButtonColor }) => hasCheckedColor(checkedRadioButtonColor, checkedRadioColor)};
  border-radius: ${({ internalSize }) => internalSize / 2}px;
`;
exports.Label = (0, native_1.default)(Typography_1.default).attrs({ variant: 'sm' }) `
  margin-left: ${spacingSm}px;
`;
//# sourceMappingURL=styles.js.map