{"version":3,"file":"Avatar.module.cjs","names":[],"sources":["../../../src/components/Avatar/Avatar.module.css"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.avatar {\n  display: inline-block;\n  box-sizing: border-box;\n\n  /* -2px to account for the border styling below */\n  line-height: calc(var(--cpd-avatar-size) - 2px);\n  text-align: center;\n  font-size: min(calc(var(--cpd-avatar-size) * 0.5625), 60px);\n  text-transform: uppercase;\n  speak: none; /* stylelint-disable-line declaration-property-value-no-unknown */\n  font-family: var(--cpd-font-family-sans);\n  font-weight: bold;\n  overflow: hidden;\n  user-select: none;\n\n  /* Set a background color to help with visual consistency when displaying\n   * avatars with a translucent background */\n  background: var(--cpd-color-bg-canvas-default);\n}\n\nbutton.avatar {\n  /**\n   * The avatar can be a button element, we need to reset its style\n   */\n  padding: 0;\n  border: 0;\n  appearance: none;\n  cursor: pointer;\n}\n\nbutton.avatar:disabled {\n  cursor: not-allowed;\n}\n\n.avatar,\n.image {\n  aspect-ratio: 1 / 1;\n  inline-size: var(--cpd-avatar-size);\n  border-radius: var(--cpd-avatar-radius);\n}\n\n.image {\n  object-fit: cover;\n  overflow: hidden;\n}\n\n/* Additional selector for button to raise selector above button.avatar */\nbutton.avatar-imageless,\n.avatar-imageless {\n  /* In the future we'd prefer to pass the HEX code as the data attr\n     and use `attr(data-color)` to avoid the style declaration from below\n     but this is currently not supported in all browsers */\n  background: var(--cpd-avatar-bg);\n  color: var(--cpd-avatar-color);\n\n  /* Additional style to ensure visibility in contrast-mode */\n  border: 1px solid var(--cpd-avatar-bg);\n}\n\n.avatar[data-color] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-1);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-1);\n}\n\n.avatar[data-color=\"2\"] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-2);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-2);\n}\n\n.avatar[data-color=\"3\"] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-3);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-3);\n}\n\n.avatar[data-color=\"4\"] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-4);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-4);\n}\n\n.avatar[data-color=\"5\"] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-5);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-5);\n}\n\n.avatar[data-color=\"6\"] {\n  --cpd-avatar-bg: var(--cpd-color-bg-decorative-6);\n  --cpd-avatar-color: var(--cpd-color-text-decorative-6);\n}\n\n.avatar[data-type=\"round\"] {\n  --cpd-avatar-radius: 50%;\n}\n\n.avatar[data-type=\"square\"] {\n  --cpd-avatar-radius: 25%;\n}\n\n/**\n * Stacked avatars \n */\n\n.stacked-avatars::after {\n  content: \"\";\n  display: table;\n  clear: both;\n}\n\n.stacked-avatars .avatar {\n  float: inline-start;\n}\n\n.stacked-avatars .avatar:not(:last-child) {\n  /* injected in the document from AvatarStack.tsx */\n  clip-path: url(\"#cpdAvatarClip\");\n}\n\n.stacked-avatars > *:not(:first-child) {\n  margin-inline-start: calc(var(--cpd-avatar-size) * -0.4);\n}\n\n.clip-path {\n  /* In theory the SVG is invisible, but we still need to ensure it doesn't\n  affect the page's layout or otherwise make an appearance */\n  position: fixed;\n  inset-inline-start: -9999px;\n}\n"],"mappings":""}