strokeWidth: _pxToRem()

in packages/react-components/src/components/styles/ChatMessageComponent.styles.ts [53:148]


      strokeWidth: _pxToRem(0.5)
    }
  }
});

/**
 * @private
 */
export const chatMessageDateStyle = (theme: Theme): string =>
  mergeStyles({
    color: theme.palette.neutralSecondary,
    fontWeight: FontWeights.regular,
    fontSize: '0.75rem'
  });

/**
 * @private
 */
export const chatMessageAuthorStyle = mergeStyles({ fontWeight: FontWeights.semibold, fontSize: '0.75rem' });

/**
 * @private
 */
export const chatMessageDateFailedStyle = (theme: Theme): string =>
  mergeStyles({
    color: theme.palette.neutralPrimaryAlt,
    fontWeight: FontWeights.regular,
    fontSize: '0.75rem'
  });

/**
 * @private
 */
export const chatMessageEditedTagStyle = (theme: Theme): string =>
  mergeStyles({ fontWeight: FontWeights.semibold, color: theme.palette.neutralSecondary });

/**
 * @private
 */
export const chatMessageFailedTagStyle = (theme: Theme): string =>
  mergeStyles({
    fontWeight: FontWeights.regular,
    color: theme.semanticColors.errorText,
    fontSize: theme.fonts.smallPlus.fontSize,
    lineHeight: '1rem'
  });

/**
 * @private
 */
export const editChatMessageFailedTagStyle = mergeStyles({
  marginBottom: '0.5rem'
});

/**
 * @private
 */
export const chatMessageFailedTagStackItemStyle = mergeStyles({
  alignSelf: 'end'
});

/**
 * @private
 */
export const editChatMessageButtonsStackStyle = mergeStyles({
  padding: '0 0.5rem',
  marginTop: '-0.25rem'
});

/**
 * @private
 */
export const chatMessageMenuStyle = mergeStyles({
  minWidth: '8.5rem',
  height: 'max-content',
  cursor: 'pointer',
  overflow: 'hidden',
  '-webkit-tap-highlight-color': 'transparent' // Disable tap highlight on Android
});

/**
 * @private
 */
export const useChatMessageEditContainerStyles = makeStyles({
  body: {
    ...shorthands.padding(0),
    backgroundColor: 'transparent',
    boxSizing: 'border-box',
    ...shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid'),
    ...shorthands.borderRadius(tokens.borderRadiusMedium),
    // The border thickness changes on hover, to prevent the border thickness change causing the
    // input box to shift we apply a margin to compensate. This margin is then removed on hover when the border is thicker.
    ...shorthands.margin('21px', '1px', '1px', '1px'),
    // Width should be updated on hover to include the border width change
    width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`,
    '&:hover, &:active, &:focus, &:focus-within': {