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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.AvatarListWrapperUI = exports.AvatarListUI = exports.ItemUI = exports.config = void 0;

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

var config = {
  borderWidth: 2
};
exports.config = config;
var ItemUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "AvatarListcss__ItemUI",
  componentId: "n545lz-0"
})(["position:relative;padding:4px 0 3px 4px;", ";&:first-child{padding-left:0;}"], function (_ref) {
  var zIndex = _ref.zIndex;
  return zIndex ? "z-index: " + zIndex : '';
});
exports.ItemUI = ItemUI;
var AvatarListUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "AvatarListcss__AvatarListUI",
  componentId: "n545lz-1"
})(["display:inline-flex;position:relative;&.horizontally-stacked{flex-direction:row;align-items:center;justify-content:center;margin:auto;max-width:230px;min-height:64px;width:100%;min-width:0;padding-left:", "px;", "{margin-left:-4px;padding-left:0;&:first-child{margin-left:0;}}}&.vertically-stacked{flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:64px;margin:auto;padding-top:", "px;", "{margin-top:-9px;padding-top:0;&:first-child{margin-top:0;}.c-Avatar__cropBorder{top:-1px;bottom:-1px;left:-1px;right:-1px;border-width:1px;}}}&.is-grid{min-width:32px;max-width:260px;align-items:center;flex-wrap:wrap;", "{margin:3px;padding:0;}}"], config.borderWidth * 3, ItemUI, config.borderWidth * 3, ItemUI, ItemUI);
exports.AvatarListUI = AvatarListUI;
var AvatarListWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "AvatarListcss__AvatarListWrapperUI",
  componentId: "n545lz-2"
})(["&.is-center{justify-content:center;text-align:center;}"]);
exports.AvatarListWrapperUI = AvatarListWrapperUI;