import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { mix } from 'polished';
import { defaultThemeProp } from '../../theme';
import { tryCatch, withTestIds } from '../../utils';
import BareButton from '../Button/BareButton';
import { useTestIds } from '../../hooks';
import { getTagTestIds } from './Badges.test-ids';
export const StyledTag = styled.span(props => {
    const borderRadius = props.theme.base['border-radius'];
    const { spacing } = props.theme.base;
    const { foreground, background } = props.theme.components.badges.tag;
    const borderColor = tryCatch(() => mix(0.85, props.theme.base.palette['primary-background'], background));
    const boxShadow = props.theme.base.shadow.focus;
    return css `
    border: 0.0625rem solid ${borderColor};
    border-radius: calc(0.25 * ${borderRadius});
    color: ${foreground};
    display: inline-block;
    font-size: 0.75rem;
    padding: 0 ${spacing};

    &:hover {
      border-color: ${background};
    }

    &:focus {
      border-color: ${background};
      box-shadow: ${boxShadow};
      outline: none;
    }

    &:active {
      border: 0.0625rem solid ${borderColor};
      box-shadow: none;
    }
  `;
});
StyledTag.defaultProps = defaultThemeProp;
const Tag = forwardRef(function Tag({ testId, children, href, onClick, ...restProps }, ref) {
    const testIds = useTestIds(testId, getTagTestIds);
    return (_jsx(StyledTag, { "data-testid": testIds.root, ...restProps, as: onClick || href ? BareButton : undefined, href: href, onClick: onClick, ref: ref, children: children }));
});
export default withTestIds(Tag, getTagTestIds);
//# sourceMappingURL=Tag.js.map