import { jsx as _jsx } 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 VisuallyHiddenText from '../VisuallyHiddenText';
import { getStatusTestIds } from './Badges.test-ids';
export const StyledStatus = styled.span(({ theme, variant, afterContent }) => {
    const { spacing } = theme.base;
    const borderRadius = theme.base['border-radius'];
    const { 'font-stretch': fontStretch, status } = theme.components.badges;
    const { background, foreground } = status[variant];
    const shadow = tryCatch(() => rgba(foreground, 0.1));
    const fontSize = calculateFontSize(theme.base['font-size'], 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;
    font-stretch: ${fontStretch};
    line-height: 1rem;
    padding-inline: calc(${spacing} / 2);

    &::after {
      content: '${afterContent}' / '';
      text-transform: uppercase;
    }
  `;
});
StyledStatus.defaultProps = defaultThemeProp;
export default withTestIds(forwardRef(function Status({ testId, variant = 'info', children, ...restProps }, ref) {
    const testIds = useTestIds(testId, getStatusTestIds);
    return (_jsx(StyledStatus, { "data-testid": testIds.root, ...restProps, variant: variant, ref: ref, afterContent: children, children: _jsx(VisuallyHiddenText, { children: `${children}` }) }));
}), getStatusTestIds);
//# sourceMappingURL=Status.js.map