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

React components for building a notification inbox for your app

import { jsx as _jsx } from "@emotion/react/jsx-runtime";
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { useTheme } from '../../context/MagicBellThemeContext.js';
import { toRGBA } from '../../lib/color.js';
import { cleanslate } from '../Styled/index.js';
/**
 * Container for the `Footer` component. Applies the theme defined for the footer.
 *
 * @example
 * <StyledFooter>Powered by MB</StyledFooter>
 */
export default function StyledFooter({ children }) {
    const theme = useTheme();
    const { footer: footerTheme } = theme;
    const style = css `
    background: ${toRGBA(footerTheme.backgroundColor, footerTheme.backgroundOpacity)};
    color: ${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 _jsx("div", { css: [cleanslate, style], children: children });
}
//# sourceMappingURL=StyledFooter.js.map