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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.AvatarSelectorWrapperUI = exports.IconCaretUI = exports.IconAssignUI = exports.AvatarWrapperUI = void 0;

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

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

var AvatarWrapperUI = _styledComponents.default.div.withConfig({
  displayName: "AvatarSelectorcss__AvatarWrapperUI",
  componentId: "sc-1cyf4l2-0"
})(["padding:2px;"]);

exports.AvatarWrapperUI = AvatarWrapperUI;

var IconAssignUI = _styledComponents.default.div.withConfig({
  displayName: "AvatarSelectorcss__IconAssignUI",
  componentId: "sc-1cyf4l2-1"
})([""]);

exports.IconAssignUI = IconAssignUI;

var IconCaretUI = _styledComponents.default.div.withConfig({
  displayName: "AvatarSelectorcss__IconCaretUI",
  componentId: "sc-1cyf4l2-2"
})(["margin-left:-1px;"]);

exports.IconCaretUI = IconCaretUI;
var AvatarSelectorWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "AvatarSelectorcss__AvatarSelectorWrapperUI",
  componentId: "sc-1cyf4l2-3"
})(["height:", "px;display:inline-flex;position:relative;border-radius:100px;background-color:transparent;z-index:2;padding:0;align-items:center;color:", ";cursor:pointer;pointer-events:all;&:focus,&.is-open{outline:none;box-shadow:0 0 0px 2px ", ";}&:hover,&:focus,&.is-open,&.is-hovered{background-color:white;color:", ";}", "{padding:9px 0 9px 10px;}", "{padding-right:8px;}", " + ", "{margin-left:0;}.c-Avatar.is-smmd{width:38px;height:38px;}"], function (_ref) {
  var size = _ref.size;
  return size === 'lg' ? '42' : '32';
}, (0, _color.getColor)('charcoal.200'), (0, _color.getColor)('blue.500'), (0, _color.getColor)('charcoal.500'), IconAssignUI, IconCaretUI, AvatarWrapperUI, IconCaretUI);
exports.AvatarSelectorWrapperUI = AvatarSelectorWrapperUI;