@kubit-ui-web/react-components/dist/esm/components/badge/badge.styled.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import styled from 'styled-components';
import { getStyles } from '../../utils/getStyles/getStyles';
const getTransformProp = (dotWidth, dotHeight) => {
    return `translate(${dotWidth * 0.3}px, -${dotHeight * 0.3}px)`;
};
export const BadgeStyled = styled.button `
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  ${props => getStyles(props.styles.container)}
`;
export const SpanContainerIconAndDot = styled.span `
  position: relative;
  display: inline-flex;
`;
export const BadgeDotStyled = styled.span `
  z-index: ${props => props.theme.Z_INDEX?.INTERN_1};
  position: absolute;
  top: 0;
  right: 0;
  line-height: 0;
  transform: ${({ customDotTranslate, dotWidthHeight }) => {
    if (customDotTranslate) {
        return customDotTranslate;
    }
    if (dotWidthHeight) {
        return getTransformProp(dotWidthHeight.dotWidth, dotWidthHeight.dotHeight);
    }
    return undefined;
}};
`;
export const BadgeLabelStyled = styled.span `
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  ${props => getStyles(props.styles.labelContainer)}
`;
export const BadgeContainerStyled = styled.div `
  position: relative;
`;
//# sourceMappingURL=badge.styled.js.map