import styled from "styled-components";
import { FontStyle } from "../FontStyle";
export const AvatarGroupsStyles = styled.div.withConfig({
  displayName: "Styles__AvatarGroupsStyles",
  componentId: "sc-1padv46-0"
})(["", " align-items:center;align-items:center;border-radius:var(--ac-br-6);cursor:", ";display:flex;justify-content:center;padding:", ";user-select:none;width:fit-content;&:hover{background-color:", ";transition:all 0.2s ease-in-out;}"], FontStyle, _ref => {
  let {
    hasTooltip
  } = _ref;
  return hasTooltip ? "default" : "pointer";
}, _ref2 => {
  let {
    hasTooltip
  } = _ref2;
  return hasTooltip ? "5px 0" : "5px";
}, props => !props.hasTooltip && "var(--color-theme-300)");
export const LengthCountStyles = styled.div.withConfig({
  displayName: "Styles__LengthCountStyles",
  componentId: "sc-1padv46-1"
})(["align-items:center;background-color:var(--color-theme-400);block-size:", ";border-radius:var(--ac-br-rounded);display:flex;inline-size:", ";justify-content:center;outline:1px solid var(--page-paper-main);z-index:99;"], props => props.size + "px", props => props.size + "px");
//# sourceMappingURL=Styles.js.map