@helpscout/hsds-react/components/AvatarRow/AvatarRow.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.CounterAvatarUI = exports.AvatarRowUI = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _color = require("../../styles/utilities/color");

var AvatarRowUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "AvatarRowcss__AvatarRowUI",
  componentId: "r807hj-0"
})(["display:flex;flex-wrap:nowrap;width:100%;min-width:", ";.c-Avatar{flex-shrink:0;margin-right:", ";&:last-child{margin-right:0;}}.c-Tooltip{line-height:20px;}"], function (_ref) {
  var $minWidth = _ref.$minWidth;
  return $minWidth + "px";
}, function (_ref2) {
  var $gap = _ref2.$gap;
  return $gap + "px";
});
exports.AvatarRowUI = AvatarRowUI;
var CounterAvatarUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "AvatarRowcss__CounterAvatarUI",
  componentId: "r807hj-1"
})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;width:", ";height:", ";border-radius:50%;background-color:", ";color:", ";font-size:", ";font-weight:500;"], function (_ref3) {
  var $size = _ref3.$size;
  return $size + "px";
}, function (_ref4) {
  var $size = _ref4.$size;
  return $size + "px";
}, (0, _color.getColor)('ash.400'), (0, _color.getColor)('charcoal.500'), function (_ref5) {
  var $fontSize = _ref5.$fontSize;
  return $fontSize + "px";
});
exports.CounterAvatarUI = CounterAvatarUI;