@magicbell/magicbell-react/dist/commonjs/components/Footer/StyledFooter.js

React components for building a notification inbox for your app

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = StyledFooter;
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
/** @jsxImportSource @emotion/react */
const react_1 = require("@emotion/react");
const MagicBellThemeContext_js_1 = require("../../context/MagicBellThemeContext.js");
const color_js_1 = require("../../lib/color.js");
const index_js_1 = require("../Styled/index.js");
/**
 * Container for the `Footer` component. Applies the theme defined for the footer.
 *
 * @example
 * <StyledFooter>Powered by MB</StyledFooter>
 */
function StyledFooter({ children }) {
    const theme = (0, MagicBellThemeContext_js_1.useTheme)();
    const { footer: footerTheme } = theme;
    const style = (0, react_1.css) `
    background: ${(0, color_js_1.toRGBA)(footerTheme.backgroundColor, footerTheme.backgroundOpacity)};
    color: ${(0, color_js_1.toRGBA)(footerTheme.textColor, 0.75)} !important;
    font-family: ${footerTheme.fontFamily} !important;
    font-size: ${footerTheme.fontSize} !important;
    font-weight: ${footerTheme.fontWeight} !important;
    text-align: ${footerTheme.textAlign} !important;
    padding: ${footerTheme.padding} !important;
    border-top: ${footerTheme.borderColor ? `1px solid ${footerTheme.borderColor} !important` : undefined};
    flex-shrink: 0 !important;

    &:first-of-type {
      border-radius: ${footerTheme.borderRadius} ${footerTheme.borderRadius} 0 0 !important;
    }

    &:last-of-type {
      border-radius: 0 0 ${footerTheme.borderRadius} ${footerTheme.borderRadius}!important;
    }

    span {
      color: ${footerTheme.textColor} !important;

      a {
        color: ${footerTheme.textColor};
        margin-right: 16px !important;
        opacity: 0.75;
        display: block;
      }
    }
  `;
    return (0, jsx_runtime_1.jsx)("div", { css: [index_js_1.cleanslate, style], children: children });
}
//# sourceMappingURL=StyledFooter.js.map