@atlaskit/mention/dist/esm/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';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

import { fg } from '@atlaskit/platform-feature-flags';
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 var RowStyle = styled.div({
  alignItems: 'center',
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'wrap',
  overflow: 'hidden',
  padding: "var(--ds-space-075, 6px)".concat(" ", "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 var AvatarStyle = styled.span(function (props) {
  return {
    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 var NameSectionStyle = styled.div(function (props) {
  return {
    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 var FullNameStyle = styled.span({
  display: 'block',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  color: "var(--ds-text, ".concat(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 var InfoSectionStyle = styled.div(function (props) {
  return {
    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
    '&': {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
      '& > span': fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? {
        marginRight: "var(--ds-space-negative-025, -2px)",
        marginBottom: "var(--ds-space-025, 2px)",
        marginTop: "var(--ds-space-025, 2px)"
      } : {
        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 var TimeStyle = styled.div({
  marginLeft: "var(--ds-space-250, 20px)",
  flex: 'none',
  color: "var(--ds-text-subtlest, ".concat(N100, ")"),
  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
});
export var 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 var MentionItemStyle = styled.div(function (props) {
  return {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
    backgroundColor: props.selected ? "var(--ds-background-selected, ".concat(N30, ")") : 'transparent',
    display: 'block',
    overflow: 'hidden',
    listStyleType: 'none',
    height: "".concat(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 var AccessSectionStyle = styled.div({
  paddingLeft: "var(--ds-space-050, 4px)",
  color: "var(--ds-text-subtle, ".concat(N500, ")")
});