@atlaskit/mention/dist/es2019/components/MentionItem/styles.js

A React component used to display user profiles in a list for 'Mention' functionality

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import styled from '@emotion/styled';
import { N900, N100, N30, N500 } from '@atlaskit/theme/colors';
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export const RowStyle = styled.div({
  alignItems: 'center',
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'wrap',
  overflow: 'hidden',
  padding: `${"var(--ds-space-075, 6px)"} ${"var(--ds-space-150, 12px)"}`,
  textOverflow: 'ellipsis',
  verticalAlign: 'middle'
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
export const AvatarStyle = styled.span(props => ({
  position: 'relative',
  flex: 'initial',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  opacity: props.restricted ? '0.5' : 'inherit'
}));

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
export const NameSectionStyle = styled.div(props => ({
  flex: 1,
  minWidth: 0,
  marginLeft: "var(--ds-space-150, 12px)",
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  opacity: props.restricted ? '0.5' : 'inherit'
}));

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export const FullNameStyle = styled.span({
  display: 'block',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  color: `var(--ds-text, ${N900})`
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
export const InfoSectionStyle = styled.div(props => ({
  display: 'flex',
  flexDirection: 'column',
  textAlign: 'right',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  opacity: props.restricted ? '0.5' : 'inherit',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
  '&': {
    /* Lozenge */
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
    '& > span': {
      marginBottom: "var(--ds-space-025, 2px)"
    }
  }
}));

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export const TimeStyle = styled.div({
  marginLeft: "var(--ds-space-250, 20px)",
  flex: 'none',
  color: `var(--ds-text-subtlest, ${N100})`,
  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
});
export const MENTION_ITEM_HEIGHT = 48;
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
export const MentionItemStyle = styled.div(props => ({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  backgroundColor: props.selected ? `var(--ds-background-selected, ${N30})` : 'transparent',
  display: 'block',
  overflow: 'hidden',
  listStyleType: 'none',
  height: `${MENTION_ITEM_HEIGHT}px`,
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  lineHeight: 1.2,
  cursor: 'pointer'
}));

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export const AccessSectionStyle = styled.div({
  paddingLeft: "var(--ds-space-050, 4px)",
  color: `var(--ds-text-subtle, ${N500})`
});