import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { rgba } from 'polished';
import { calculateFontSize } from '../../styles';
import { defaultThemeProp } from '../../theme';
import { tryCatch, withTestIds } from '../../utils';
import { useTestIds } from '../../hooks';
import { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';
import { getStatusTestIds } from './Badges.test-ids';
export const StyledStatus = styled.span(props => {
    const { spacing } = props.theme.base;
    const borderRadius = props.theme.base['border-radius'];
    const { status } = props.theme.components.badges;
    const { background, foreground } = status[props.variant];
    const shadow = tryCatch(() => rgba(foreground, 0.1));
    const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);
    return css `
    display: inline-block;
    position: relative;
    background-color: ${background};
    border-radius: calc(0.25 * ${borderRadius});
    color: ${foreground};
    box-shadow: inset 0 0 0 0.0625rem ${shadow};
    font-size: ${fontSize.xxs};
    font-weight: bold;
    line-height: 1rem;
    padding-inline: calc(${spacing} / 2);

    & > :first-child {
      text-transform: uppercase;
    }
  `;
});
StyledStatus.defaultProps = defaultThemeProp;
export default withTestIds(forwardRef(function Status({ testId, variant = 'info', children, ...restProps }, ref) {
    const testIds = useTestIds(testId, getStatusTestIds);
    return (_jsxs(StyledStatus, { "data-testid": testIds.root, ...restProps, variant: variant, ref: ref, children: [_jsx("span", { "aria-hidden": true, children: children }), _jsx(StyledVisuallyHiddenText, { children: children })] }));
}), getStatusTestIds);
//# sourceMappingURL=Status.js.map