"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NavLabel = exports.NavIcon = exports.NavField = exports.BottomNavigationWrapper = 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 Icon_1 = tslib_1.__importDefault(require("../Icon"));
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 primaryMain = (0, theme_toolkit_1.getTheme)('brand.primary.main');
const backgroundZ4 = (0, theme_toolkit_1.getTheme)('background.z4');
const emptyOpacity = (0, theme_toolkit_1.getTheme)('opacity.empty');
const opaqueOpacity = (0, theme_toolkit_1.getTheme)('opacity.opaque');
const smSpacing = (0, theme_toolkit_1.getTheme)('spacing.sm');
const isActive = (0, theme_toolkit_1.ifStyle)('active');
exports.BottomNavigationWrapper = native_1.default.View `
  width: 100%;
  padding: ${smSpacing}px;
  padding-bottom: ${({ bottomSpacing }) => `${bottomSpacing}px`};
  background-color: ${backgroundZ4};
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-start;
  margin-top: auto;
  shadow-offset: 0px 4px;
  shadow-opacity: 0.2;
  shadow-radius: 3px;
  elevation: 3;
`;
exports.NavField = (0, native_1.default)(Touchable_1.default) `
  width: 70px;
  justify-content: center;
  align-items: center;
`;
exports.NavIcon = (0, native_1.default)(Icon_1.default).attrs((props) => ({
    size: 30,
    color: isActive(props?.activeColor || primaryMain(props), textColor(props))(props),
    touchable: false,
})) `
  opacity: ${isActive(opaqueOpacity, emptyOpacity)};
`;
exports.NavLabel = (0, native_1.default)(Typography_1.default).attrs({
    variant: 'xs',
}) `
  color: ${({ activeColor }) => isActive(activeColor || primaryMain, textColor)};
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  opacity: ${isActive(opaqueOpacity, emptyOpacity)};
`;
//# sourceMappingURL=styles.js.map