"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MonogramText = exports.MonogramWrapper = exports.CameraView = exports.UploadIcon = exports.UploadIconWrapper = exports.Wrapper = void 0;
const tslib_1 = require("tslib");
const react_native_camera_1 = require("react-native-camera");
const native_1 = tslib_1.__importDefault(require("styled-components/native"));
const theme_toolkit_1 = require("@platformbuilders/theme-toolkit");
const Icon_1 = tslib_1.__importDefault(require("../Icon"));
const Touchable_1 = tslib_1.__importDefault(require("../Touchable"));
const Typography_1 = tslib_1.__importDefault(require("../Typography"));
const brandPrimary = (0, theme_toolkit_1.getTheme)('brand.primary.main');
const brandAccent = (0, theme_toolkit_1.getTheme)('brand.accent.main');
const textMain = (0, theme_toolkit_1.getTheme)('text.main');
const linkAccent = (0, theme_toolkit_1.getTheme)('text.link.accent');
const showBorder = (0, theme_toolkit_1.ifStyle)('showBorder');
const hasBorderWidth = (0, theme_toolkit_1.ifStyle)('borderWidth');
const hasBorderColor = (0, theme_toolkit_1.ifStyle)('borderColor');
exports.Wrapper = (0, native_1.default)(Touchable_1.default) `
  width: ${(props) => props.size}px;
  height: ${(props) => props.size}px;
  border-radius: ${(props) => props.size / 2}px;
  overflow: hidden;
  border-width: ${(props) => showBorder(hasBorderWidth(props.borderWidth, '2'), '0')}px;
  border-color: ${(props) => hasBorderColor(props.borderColor, brandPrimary)};
  position: relative;
`;
exports.UploadIconWrapper = native_1.default.View `
  align-items: center;
  justify-content: center;
  width: ${(props) => props.size / 4}px;
  height: ${(props) => props.size / 4}px;
  border-radius: ${(props) => props.size / 8}px;
  position: absolute;
  z-index: 2;
  background-color: ${brandPrimary};
`;
exports.UploadIcon = (0, native_1.default)(Icon_1.default) `
  color: ${brandAccent};
`;
exports.CameraView = (0, native_1.default)(react_native_camera_1.RNCamera) `
  width: ${(props) => props.size}px;
  height: 100%;
  border-radius: ${(props) => props.size / 2}px;
  overflow: hidden;
  border: ${showBorder('4px solid white', '')};
`;
exports.MonogramWrapper = native_1.default.View `
  align-items: center;
  justify-content: center;
  width: ${(props) => props.size}px;
  height: ${(props) => props.size}px;
  position: absolute;
  z-index: 3;
  background-color: ${linkAccent};
  text-align: center;
`;
exports.MonogramText = (0, native_1.default)(Typography_1.default) `
  color: ${textMain};
  font-size: ${(props) => props.size * 0.45}px;
  line-height: ${(props) => props.size * 0.45}px;
  letter-spacing: 1.3px;
  align-self: center;
  text-align: center;
  position: relative;
  top: 3px;
`;
//# sourceMappingURL=styles.js.map