{"version":3,"file":"488.82d1c15969d65f4b1a4d.css","mappings":"AAAA,UACE,oCACA,sBACA,yBACA,kBACA,uBACA,oBACA,qBACA,sCACA,0B;ACTF,cACE,qBACA,cACA,aACA,cAEA,mCACA,wB;ACPF,UACE,wBACA,mBACA,WAEA,wBACE,2BAGF,0BACE,0BACA,oCACE,WAIJ,oBACE,wBACA,uBAIJ,UACE,cACA,gBAEA,uBACA,mBACA,gBAEA,mBACE,mBAIJ,UACE,aACA,mB;ACrCF,UACE,aACA,mBACA,mCACA,YACA,qBACA,qBACA,mBACA,qCACA,kBACA,YACA,cACA,sCAEA,mBACE,gBAGF,gBACE,0CAGF,yBACE,oDAEA,mCACE,UAKF,6BACE,gCAGF,yBACE,mCAIJ,mBACE,eAGF,wCAEE,WACA,YACA,UACA,cACA,6BAGF,oBACE,aACA,mBACA,uBACA,gBACA,kBACA,sCACA,WAEA,8BACE,kBACA,kBACA,SAIJ,oBACE,kBACA,mBACA,YACA,uBAEA,uCACE,eACA,gBACA,yBACA,oBAIJ,oBACE,kBACA,OACA,MACA,WACA,YACA,kBACA,aACA,mBACA,uBACA,oCACA,iBACA,WACA,UACA,6BACA,UAGF,mBACE,kCACA,gCACA,uCAEA,yDACE,sBAIJ,mBACE,kBACA,gBAEA,4BACE,gBACA,eAGF,6BACE,cACA,mBAGF,6BACE,UACA,Q;AC1HN,UACE,oBACA,gBAEA,mBACE,2BAIJ,UACE,kBAGF,oBACE,KACE,eACA,UAGF,GACE,6DACA,WAIJ,oBACE,KACE,6DACA,UAGF,GACE,eACA,WAIJ,UACE,gBACA,kBAGF,UACE,kBACA,MACA,OACA,2CAGF,UACE,kBACA,MACA,OACA,2C;AC1DF,UACE,kBAEA,yBAEA,qCACE,cAIJ,UACE,kBACA,OACA,MACA,WACA,YAEA,kBACE,sB;AClBJ,UACE,aACA,oCACA,oCACA,yCAEA,aACA,kBAGF,UACE,sDAEA,8DACA,gMAEA,sBACE,sBACA,4BAIJ,6BACE,uDAGF,6BACE,yDAGF,UACE,kBACA,YACA,WAEA,sCACA,yBAEA,yCACA,mBAEA,iBACA,iBACA,sCAEA,oB;AC7CF,UACE,kBACA,WAGF,UACE,gDACA,2BAEA,kBACA,iCACA,kCACA,qBACA,+BACA,mBACA,iCACA,6BAGF,oBACE,GACE,mBACA,mBAGF,IACE,sBAGF,IACE,UAGF,KACE,qBACA,UACA,oB;ACpCJ,UACE,kBACA,WACA,YACA,6CAEA,qBACA,qBAGF,kBACE,kLACA,uCACA,uBACA,oMACA,oDACA,kCAEA,iDACE,0CAGF,4BACE,qBAIJ,UACE,cACA,WACA,YACA,iBAGF,UACE,kBACA,MACA,OACA,WACA,YAEA,0DACA,yBACA,iDACA,8DAEA,mCACA,mFAUA,sCACA,iBATA,0CAfF,UAgBI,2DAGF,0CAnBF,UAoBI,2DAMF,kBACE,WACA,kBACA,MACA,OACA,WACA,YACA,uCACA,8DAEA,iBACA,sCACA,4CACA,0EAGF,iBACE,WACA,kBACA,MACA,OACA,WACA,YACA,uCACA,8DAEA,iDACA,iDACA,4CACA,0EAIJ,yCACE,8BACA,wBAEA,iDACE,kCACA,wBAGF,gDACE,mCACA,wBAIJ,oBACE,GACE,wBAEF,KACE,2DAIJ,oBACE,GACE,4CAGF,KACE,iDAIJ,oBACE,GACE,UAGF,IACE,WAGF,KACE,a;ACzIJ,qBACE,WACA,cAGA,sCACE,mBAGF,gCACE,oCACA,oB;ACXJ,UACE,sCAEA,kBACA,aACA,mBACA,uBAEA,+BACA,gCAEA,UAGF,oBACE,oBAEA,0CACE,qBAGF,oCACE,qBAIJ,UAEE,wBAEA,eAGF,8BACE,kBACA,QACA,SACA,gC;ACrCF,UACE,sBACA,gBAEA,kBACE,WACA,kBACA,QACA,0KACE,CAKN,UACE,WACA,YACA,iBACA,kB;AClBF,UACE,0BAEA,2BACA,kBACA,eACA,gBAEA,sBACE,sBAGF,2BACE,kBACA,MACA,OAIJ,UACE,UAGF,UACE,UAGF,UACE,4CACA,wCAGF,kBACE,WACA,kBACA,QACA,SACA,gCACA,cACA,eACA,kBACA,4DAGF,UACE,kBACA,OACA,QACA,UACA,WAGF,UACE,kBACA,gBAEA,kBACA,QACA,SACA,sDACA,kBAGF,oBACE,GACE,qBACA,UAEF,KACE,mBACA,W;ACtEJ,kBACE,kBACA,eACA,iDACA,QACA,YAEA,yBAPF,kBAQI,OACA,QACA,aACA,wBAGF,+FAGE,mCACA,wDAEA,uKACE,gDACA,8DAIJ,8BACE,kBACA,cACA,WACA,eACA,eACA,WACA,aACA,aACA,cACA,eACA,4BACA,WAEA,qCACE,WACA,YAGF,yBAnBF,8BAoBI,cAIJ,gCACE,kBACA,cACA,WACA,eACA,gBACA,YACA,aACA,kBAEA,uCACE,WACA,cAGF,yBAfF,gCAgBI,cAIJ,iCACE,WACA,YACA,sBAEA,yBALF,iCAMI,0CAIJ,yBACE,aACA,sBACA,mBAGF,wBACE,qBACA,iBACA,kCACA,kBACA,kBAGF,6BACE,gBACA,cACA,aACA,qCACA,mBAGF,6BACE,WACA,YACA,UACA,2BACA,4BACA,kBACA,iB;AC7GJ,UACE,aACA,2BACA,8DACA,mBAEA,kBACA,eACA,kBAEA,2CACA,gBAEA,yCACA,wBACA,iBACA,mBAEA,6CACA,0BAEA,gDAEE,gBACA,4BAGF,sBACE,qBAGF,yBA/BF,UAgCI,gBACA,uCAIJ,UACE,qCAEA,qBACE,wCAEE,0CAKN,UACE,WACA,cAEA,YACA,uCACA,eACA,yBAGF,UACE,aACA,WAGF,UACE,aACA,cAGF,UACE,wBACA,kBACA,kCACA,WACA,cAGF,oBACE,gBACA,mBACA,uBAGF,oBACE,cAIA,oBACE,WACA,eAIJ,UACE,sBAGF,UACE,aACA,cACA,4BAGF,UACE,aACA,cACA,4BAGF,UACE,aACA,cACA,yB;AC9GF,UACE,YACA,aACA,sBACA,gBAGF,UACE,uBACA,6CACA,aACA,mBACA,cAEA,gBACA,iBAEA,uBACE,gBACA,YAGF,wBACE,YACA,YACA,gBACA,UACA,2BAIJ,UACE,kCACA,qBACA,oBACA,sCAEA,4BACE,0CACA,kBACA,mBAIJ,UACE,oBACA,4BAGF,UACE,YACA,gBACA,kBAGF,UACE,cACA,wBCnDA,wDDuDA,yBANF,UAOI,kBAIJ,UACE,YACA,SACA,kBACA,aACA,mBACA,uBACA,kCAGF,UACE,2B;AE/EF,mBACE,gBACA,mBACA,sCACA,qCACA,oBACA,uCACA,4EAGE,gBAGF,yBACE,yBAIJ,UACE,qCACA,mBACA,4BACA,mBACA,yBACA,mBACA,sCACA,gCACA,kDACA,oBAEA,gBACE,uBAIJ,UACE,aACA,wBACA,eACA,qBAGF,UACE,cACA,W;AC5CF,oBACE,kBACA,eACA,0CAEA,0BACE,cACA,gBACA,4BAEA,iCACE,UACA,yBAIJ,sDACE,iBAGF,4BACE,iBACA,qBACA,aACA,sBAGF,2CACE,2BACA,wEACA,gBAGF,6DACE,gDACA,8DACA,8DACA,2CACA,iBAEA,yBAPF,6DAQI,2BAGF,+EACE,mCACA,kDAIJ,8BACE,kBAGF,2CACE,kBACA,YAGF,mCACE,kBACA,QACA,2BACA,OACA,QACA,gBACA,uBACA,mBAGF,6BACE,0BAGF,sCACE,kBACA,MACA,2CAIJ,yBACE,UACA,yB;AClFF,mBACE,6BACA,6CACA,yDACA,kDA2BA,aACA,mBACA,gBACA,mBACA,WACA,2BACA,uDACA,sBACA,sCACA,kCACA,oBACA,iCACA,iBACA,kBACA,oBACA,UAEA,YAEA,0TA5CA,4BACE,oDACA,gEACA,yDAGF,4BACE,4CACA,kDACA,0CACA,UAEA,qCACE,0CACA,4CACA,kDAIJ,qCACE,0CACA,kDACA,0CAwBF,yBACE,mEAEA,wHAEA,iJALF,yBAMI,gDAKN,UACE,cAGF,mBACE,kBACA,kBACA,iBACA,sBAEA,sBACA,0BACA,6BAGA,yBACE,oDACA,+CAGF,0BACE,WACA,kBACA,cACA,QACA,2BAEA,cACA,eACA,kBACA,mDACA,WAGF,6BACE,8BAIJ,UACE,YACA,kBACA,iBACA,WAEA,oBAGE,cAIJ,UACE,gCACA,sBAGF,UACE,aACA,WACA,eACA,0BAGF,UACE,0BACA,wCAGF,UACE,WAGF,UACE,uCACA,iBACA,kCACA,cAEA,kBACA,UACA,UACA,0BACA,gCACA,U;ACpJF,UACE,mB;ACDF,WACE,aACA,mBACA,WACA,eACA,YACA,kBACA,uBACA,iBACA,2CAEA,sBACE,kBAGF,2CACE,iBACA,sBAGF,sBACE,uBACA,gBACA,oBAGF,2BACE,2BAGF,qDACE,4CACA,kDACA,qDACA,6BAEA,4DACE,+CACA,sDACA,qC;ACvCN,UACE,iBACA,cACA,kBACA,mBACA,uDACA,0BAEA,qBACA,gCAGF,UACE,qCAEA,gBACE,uB;AChBJ,UACE,6CACA,aACA,kBACA,YACA,kDACA,sBAGF,UACE,gBAGF,UACE,aACA,uBACA,kBACA,YACA,OACA,QACA,8DACA,qCACA,mCAGF,oBACE,KACE,iCAGF,GACE,+DAIJ,UACE,mCACA,oBACA,iBACA,kBACA,gBAGF,oBACE,GACE,uBAGF,IAEE,iDAGF,KACE,wBAIJ,UACE,aACA,mBACA,uBACA,WACA,sBACA,mBACA,yBACA,kBACA,UAGF,UACE,qBACA,kBACA,YACA,0CACA,2BAGF,UACE,kBACA,oBAGF,UACE,eACA,sCAGF,oBACE,kBACA,MACA,SACA,aACA,mBACA,sCAGF,UACE,YAGF,UACE,aAGF,UACE,4CACA,gBACA,kBACA,MACA,OACA,SACA,kCACA,+BACA,kCACA,yCACA,kDAEA,wCACE,WACA,mBAGF,oBACE,6CAIJ,UACE,sBAIA,oBACE,sBACA,sCAGF,oBACE,sC","sources":["webpack://telegram-t/./src/components/common/FakeIcon.scss","webpack://telegram-t/./src/components/common/VerifiedIcon.scss","webpack://telegram-t/./src/components/common/FullNameTitle.module.scss","webpack://telegram-t/./src/components/common/PeerChip.module.scss","webpack://telegram-t/./src/components/common/AnimatedCounter.module.scss","webpack://telegram-t/./src/components/common/AnimatedIconWithPreview.module.scss","webpack://telegram-t/./src/components/common/AvatarList.module.scss","webpack://telegram-t/./src/components/common/reactions/CustomEmojiEffect.module.scss","webpack://telegram-t/./src/components/common/MediaSpoiler.module.scss","webpack://telegram-t/./src/components/common/reactions/ReactionStaticEmoji.scss","webpack://telegram-t/./src/components/common/reactions/ReactionAnimatedEmoji.module.scss","webpack://telegram-t/./src/components/common/profile/RadialPatternBackground.module.scss","webpack://telegram-t/./src/components/middle/message/reactions/ReactionSelectorReaction.module.scss","webpack://telegram-t/./src/components/middle/message/reactions/ReactionSelector.scss","webpack://telegram-t/./src/components/common/pickers/PickerItem.module.scss","webpack://telegram-t/./src/components/common/pickers/PickerStyles.module.scss","webpack://telegram-t/./src/styles/_mixins.scss","webpack://telegram-t/./src/components/middle/message/TimeMenuItem.module.scss","webpack://telegram-t/./src/components/middle/message/MessageContextMenu.scss","webpack://telegram-t/./src/components/middle/message/reactions/ReactionButton.module.scss","webpack://telegram-t/./src/components/modals/prompt/PromptDialog.module.scss","webpack://telegram-t/./src/components/middle/message/reactions/Reactions.scss","webpack://telegram-t/./src/components/common/BadgeButton.module.scss","webpack://telegram-t/./src/components/common/PremiumProgress.module.scss"],"sourcesContent":[".FakeIcon {\n  border: 1px solid var(--color-error);\n  border-radius: 0.375rem;\n  color: var(--color-error);\n  font-size: 0.625rem;\n  padding: 0.125rem 0.25rem;\n  line-height: initial;\n  margin-inline: 0.25rem;\n  font-weight: var(--font-weight-medium);\n  text-transform: capitalize;\n}\n",".VerifiedIcon {\n  display: inline-block;\n  flex-shrink: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n\n  --color-fill: var(--color-primary);\n  --color-checkmark: #fff;\n}\n",".root {\n  display: flex !important;\n  align-items: center;\n  gap: 0.25rem;\n\n  :global(.custom-emoji) {\n    color: var(--color-primary);\n  }\n\n  :global(.statusSparkles) {\n    color: var(--accent-color);\n    :global(.selected) & {\n      color: white;\n    }\n  }\n\n  .statusTransition {\n    height: 1.5em !important;\n    width: 1.5em !important;\n  }\n}\n\n.fullName {\n  font-size: 1em;\n  margin-bottom: 0;\n\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n\n  &.canCopy {\n    pointer-events: all;\n  }\n}\n\n.statusTransitionSlide {\n  display: flex;\n  align-items: center;\n}\n",".root {\n  display: flex;\n  align-items: center;\n  background: var(--color-chat-hover);\n  height: 2rem;\n  margin-inline: 0.25rem;\n  padding-right: 0.75rem;\n  border-radius: 1rem;\n  cursor: var(--custom-cursor, pointer);\n  position: relative;\n  min-width: 0;\n  flex-shrink: 1;\n  transition: background-color 0.15s ease;\n\n  &.minimized {\n    padding-right: 0;\n  }\n\n  &:hover {\n    background-color: var(--color-item-active);\n  }\n\n  &.closeable:hover {\n    background-color: rgba(var(--color-error-rgb), 0.16);\n\n    .remove {\n      opacity: 1;\n    }\n  }\n\n  &.nonDestructive {\n    .remove {\n      background: var(--color-primary);\n    }\n\n    &:hover {\n      background: var(--color-chat-hover);\n    }\n  }\n\n  &.notClickable {\n    cursor: default;\n  }\n\n  .avatar,\n  .iconWrapper {\n    width: 2rem;\n    height: 2rem;\n    opacity: 1;\n    flex-shrink: 0;\n    transition: opacity 0.15s ease;\n  }\n\n  .iconWrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0.375rem;\n    border-radius: 50%;\n    background-color: var(--color-primary);\n    color: white;\n\n    .icon {\n      font-size: 1.25rem;\n      position: relative;\n      top: -1px;\n    }\n  }\n\n  .name {\n    margin-left: 0.5rem;\n    white-space: nowrap;\n    min-width: 0;\n    text-overflow: ellipsis;\n\n    :global(.emoji.emoji-small) {\n      width: 1.125rem;\n      height: 1.125rem;\n      background-size: 1.125rem;\n      vertical-align: -4px;\n    }\n  }\n\n  .remove {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 2rem;\n    height: 2rem;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--color-error);\n    font-size: 1.5rem;\n    color: white;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n    z-index: 1;\n  }\n\n  &.squareAvatar {\n    border-start-start-radius: 0.625rem;\n    border-end-start-radius: 0.625rem;\n    --border-radius-forum-avatar: 0.625rem;\n\n    &.minimized, .remove {\n      border-radius: 0.625rem;\n    }\n  }\n\n  &[dir=\"rtl\"] {\n    padding-left: 1rem;\n    padding-right: 0;\n\n    &.minimized {\n      padding-right: 0;\n      padding-left: 0;\n    }\n\n    .name {\n      margin-left: 0;\n      margin-right: 0.5rem;\n    }\n\n    .remove {\n      left: auto;\n      right: 0;\n    }\n  }\n}\n","$perspective: 10px;\n$translate: 10px;\n$rotate: 30deg;\n$animation-time: 200ms;\n\n.root {\n  display: inline-flex;\n  white-space: pre;\n\n  &[dir=\"rtl\"] {\n    flex-direction: row-reverse;\n  }\n}\n\n.character-container {\n  position: relative;\n}\n\n@keyframes character-disappear {\n  from {\n    transform: none;\n    opacity: 1;\n  }\n\n  to {\n    transform: perspective($perspective) translateY($translate) rotateX(-$rotate);\n    opacity: 0;\n  }\n}\n\n@keyframes character-appear {\n  from {\n    transform: perspective($perspective) translateY(-$translate) rotateX($rotate);\n    opacity: 0;\n  }\n\n  to {\n    transform: none;\n    opacity: 1;\n  }\n}\n\n.character {\n  white-space: pre;\n  visibility: hidden;\n}\n\n.character-old {\n  position: absolute;\n  top: 0;\n  left: 0;\n  animation: $animation-time ease-out character-disappear forwards;\n}\n\n.character-new {\n  position: absolute;\n  top: 0;\n  left: 0;\n  animation: $animation-time ease-out character-appear forwards;\n}\n",".root {\n  position: relative;\n\n  display: block !important;\n\n  :global(.AnimatedSticker.not-shown) {\n    display: block;\n  }\n}\n\n.preview {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n\n  &:global(.closing) {\n    transition-delay: 50ms;\n  }\n}\n",".root {\n  --_size: 0px;\n  --half-size: calc(var(--_size) / 2);\n  --spacing: calc(var(--_size) * 0.4);\n  --spacing-gap: calc(var(--_size) * 0.04);\n\n  display: flex;\n  position: relative;\n}\n\n.avatar {\n  --radius: calc(var(--half-size) + var(--spacing-gap));\n\n  margin-inline-start: calc(var(--spacing-gap) - var(--spacing));\n  mask: radial-gradient(circle var(--radius) at var(--offset) 50%, transparent 99%, #fff 100%);\n\n  &:first-child {\n    margin-inline-start: 0;\n    mask: none;\n  }\n}\n\n.root[dir=\"ltr\"] .avatar {\n  --offset: calc(0% - var(--half-size) + var(--spacing));\n}\n\n.root[dir=\"rtl\"] .avatar {\n  --offset: calc(100% + var(--half-size) - var(--spacing));\n}\n\n.badge {\n  position: absolute;\n  bottom: -1px;\n  right: -1px;\n\n  background-color: var(--color-primary);\n  color: var(--color-white);\n\n  border: 1px solid var(--color-background);\n  border-radius: 1rem;\n\n  font-size: 0.75rem;\n  line-height: 1rem;\n  font-weight: var(--font-weight-medium);\n\n  padding: 0rem 0.25rem;\n}\n",".root {\n  position: absolute;\n  z-index: 10;\n}\n\n.particle {\n  --custom-emoji-size: var(--particle-size, 1rem);\n  color: var(--color-primary);\n\n  position: absolute;\n  width: var(--particle-size, 1rem);\n  height: var(--particle-size, 1rem);\n  border-radius: 0.25rem;\n  offset-path: var(--offset-path);\n  offset-rotate: 0deg;\n  animation: 1.5s particle ease-out;\n  animation-fill-mode: forwards;\n}\n\n@keyframes particle {\n  0% {\n    offset-distance: 0%;\n    transform: scale(1);\n  }\n\n  50% {\n    transform: scale(1.25);\n  }\n\n  75% {\n    opacity: 1;\n  }\n\n  100% {\n    offset-distance: 100%;\n    opacity: 0;\n    transform: scale(1);\n  }\n}\n",".root {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-text-secondary); // Fallback before canvas is prepared\n\n  --click-shift-x: 0px;\n  --click-shift-y: 0px;\n}\n\n.mask-animation:global(.closing) {\n  mask-image: url(\"../../assets/spoilers/mask.svg\"), linear-gradient(#ffffff, #ffffff);\n  -webkit-mask-composite: destination-out;\n  mask-composite: exclude;\n  mask-position: calc(50% + var(--click-shift-x)) calc(50% + var(--click-shift-y)), center center;\n  mask-repeat: no-repeat;\n  mask-size: 0%;\n\n  :global(body:not(.no-page-transitions)) & {\n    animation: 500ms ease-in circle-cut forwards;\n  }\n\n  .dots {\n    transform: scale(1.2);\n  }\n}\n\n.canvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.dots {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  --background-url: url(\"../../assets/spoilers/turbulence_1x.png\");\n  --background-size: 256px;\n  background: rgba(0, 0, 0, 0.25) var(--background-url);\n  background-size: var(--background-size) var(--background-size);\n\n  transition: transform 500ms ease-in;\n  transform-origin: calc(50% + var(--click-shift-x)) calc(50% + var(--click-shift-y));\n\n  @media (-webkit-min-device-pixel-ratio: 2) {\n    --background-url: url(\"../../assets/spoilers/turbulence_2x.png\");\n  }\n\n  @media (-webkit-min-device-pixel-ratio: 3) {\n    --background-url: url(\"../../assets/spoilers/turbulence_3x.png\");\n  }\n\n  --x-direction: var(--background-size);\n  --y-direction: 0;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-image: var(--background-url);\n    background-size: var(--background-size) var(--background-size);\n\n    --x-direction: 0;\n    --y-direction: var(--background-size);\n    animation: 2s linear -0.8s infinite opacity-breath;\n    background-position: calc(var(--x-direction) / 2) calc(var(--y-direction) / 2);\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-image: var(--background-url);\n    background-size: var(--background-size) var(--background-size);\n\n    --x-direction: calc(-1 * var(--background-size));\n    --y-direction: calc(-1 * var(--background-size));\n    animation: 2s linear -1.5s infinite opacity-breath;\n    background-position: calc(var(--x-direction) / 2) calc(var(--y-direction) / 2);\n  }\n}\n\n:global(body:not(.no-page-transitions)) .dots {\n  animation: 20s linear infinite;\n  animation-name: dots-animation;\n\n  &::before {\n    animation: 21s linear -7s infinite;\n    animation-name: dots-animation;\n  }\n\n  &::after {\n    animation: 22s linear -14s infinite;\n    animation-name: dots-animation;\n  }\n}\n\n@keyframes dots-animation {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: var(--x-direction) var(--y-direction);\n  }\n}\n\n@keyframes circle-cut {\n  0% {\n    mask-size: 0%, 100%;\n  }\n\n  100% {\n    mask-size: 350%, 100%;\n  }\n}\n\n@keyframes opacity-breath {\n  0% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.1;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n",".ReactionStaticEmoji {\n  width: 1rem;\n  display: block;\n\n  // Unicorn reaction preview is too small\n  &.with-unicorn-fix {\n    transform: scale(2);\n  }\n\n  &.icon-heart {\n    color: var(--color-heart) !important;\n    margin: 0 !important;\n  }\n}\n",".root {\n  --custom-emoji-border-radius: 0.25rem;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: var(--custom-emoji-size);\n  height: var(--custom-emoji-size);\n\n  z-index: 1;\n}\n\n.animated-icon, .effect {\n  pointer-events: none;\n\n  &:not(:global(.open)) {\n    opacity: 1 !important;\n  }\n\n  &:global(.closing) {\n    opacity: 0 !important;\n  }\n}\n\n.animating {\n  // Fix for redundant scroll on iOS\n  transform: translateZ(0);\n  // Fix for redundant scroll in Firefox\n  contain: layout;\n}\n\n.withEffectOnly, .animated-icon, .effect {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n",".root {\n  border-radius: inherit;\n  overflow: hidden;\n\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-image:\n      radial-gradient(circle closest-side, #ffffff32, #ffffff00),\n      radial-gradient(closest-side, var(--_bg-1), var(--_bg-2));\n  }\n}\n\n.canvas {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  position: relative;\n}\n",".root {\n  --custom-emoji-size: 2rem;\n\n  margin-inline-start: 0.25rem;\n  position: relative;\n  min-width: 2rem;\n  min-height: 2rem;\n\n  &:first-child {\n    margin-inline-start: 0;\n  }\n\n  :global(.AnimatedSticker) {\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n}\n\n.custom {\n  opacity: 0;\n}\n\n.visible {\n  opacity: 1;\n}\n\n.custom-animated {\n  animation: custom-fade-in 0.2s ease-in-out forwards;\n  animation-delay: var(--_animation-delay);\n}\n\n.chosen::before {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 2.25rem;\n  height: 2.25rem;\n  border-radius: 50%;\n  background-color: var(--color-background-compact-menu-hover);\n}\n\n.static-icon {\n  position: absolute;\n  top: 5%;\n  left: 5%;\n  width: 90%;\n  height: 90%;\n}\n\n.lock {\n  font-size: 0.875rem;\n  padding: 0.125rem;\n\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  background-color: var(--color-background-compact-menu);\n  border-radius: 50%;\n}\n\n@keyframes custom-fade-in {\n  0% {\n    transform: scale(0.5);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n",".ReactionSelector {\n  position: relative;\n  min-width: 3rem;\n  max-width: fit-content;\n  right: 0;\n  top: -0.5rem;\n\n  @media (max-width: 600px) {\n    left: 0;\n    right: 0;\n    display: flex;\n    justify-content: center;\n  }\n\n  &__bubble-big,\n  &__bubble-small,\n  &__items-wrapper {\n    background: var(--color-background);\n    box-shadow: 0 0.25rem 0.125rem var(--color-default-shadow);\n\n    body:not(.no-menu-blur) & {\n      background: var(--color-background-compact-menu);\n      backdrop-filter: blur(25px);\n    }\n  }\n\n  &__bubble-big {\n    position: absolute;\n    display: block;\n    content: \"\";\n    right: 1.125rem;\n    bottom: -0.5rem;\n    width: 1rem;\n    height: 0.5rem;\n    border-top: 0;\n    border-left: 0;\n    border-right: 0;\n    border-radius: 0 0 1rem 1rem;\n    z-index: -1;\n\n    &--isRtl {\n      right: auto;\n      left: 1.5rem;\n    }\n\n    @media (max-width: 600px) {\n      display: none;\n    }\n  }\n\n  &__bubble-small {\n    position: absolute;\n    display: block;\n    content: \"\";\n    right: 1.125rem;\n    bottom: -1.25rem;\n    width: 0.5rem;\n    height: 0.5rem;\n    border-radius: 50%;\n\n    &--isRtl {\n      right: auto;\n      left: 2.125rem;\n    }\n\n    @media (max-width: 600px) {\n      display: none;\n    }\n  }\n\n  &__items-wrapper {\n    width: 100%;\n    height: 100%;\n    border-radius: 1.25rem;\n\n    @media (max-width: 600px) {\n      width: fit-content;\n    }\n  }\n\n  &__items {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  &__hint {\n    padding: 0.25rem 0.5rem;\n    font-size: 0.75rem;\n    color: var(--color-text-secondary);\n    text-align: center;\n    text-wrap: balance;\n  }\n\n  &__reactions {\n    padding: 0 0.5rem;\n    height: 2.5rem;\n    display: flex;\n    cursor: var(--custom-cursor, pointer);\n    align-items: center;\n  }\n\n  &__show-more {\n    width: 2rem;\n    height: 2rem;\n    padding: 0;\n    margin-inline-start: 0.25rem;\n    margin-inline-end: -0.125rem;\n    border-radius: 50%;\n    font-size: 1.5rem;\n  }\n}\n",".root {\n  display: grid;\n  grid-template-rows: 1fr 1fr;\n  grid-template-columns: min-content min-content 1fr min-content;\n  align-items: center;\n\n  position: relative;\n  padding: 0.25rem;\n  min-height: 2.5rem;\n\n  border-radius: var(--border-radius-default);\n  overflow: hidden;\n\n  background-color: var(--background-color);\n  color: var(--color-text);\n  line-height: 1.25;\n  text-align: initial;\n\n  transition-property: background-color, opacity;\n  transition-duration: 150ms;\n\n  :global(body.is-ios) &,\n  :global(body.is-android) & {\n    border-radius: 0;\n    padding-inline-start: 0.75rem;\n  }\n\n  :global(body.is-ios) & {\n    padding-inline-end: 0;\n  }\n\n  @media (max-width: 600px) {\n    border-radius: 0;\n    padding-inline-start: 0.5rem !important;\n  }\n}\n\n.clickable {\n  cursor: var(--custom-cursor, pointer);\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-visible {\n      background-color: var(--color-item-hover);\n    }\n  }\n}\n\n.separator {\n  grid-row: 2;\n  grid-column: 3;\n  /* stylelint-disable-next-line plugin/whole-pixel */\n  height: 0.5px;\n  background-color: var(--color-dividers);\n  align-self: end;\n  margin-bottom: -0.1875rem;\n}\n\n.disabled {\n  cursor: unset;\n  opacity: 0.5;\n}\n\n.title {\n  grid-row: 1 / 3;\n  grid-column: 3;\n}\n\n.subtitle {\n  padding-bottom: 0.3125rem;\n  font-size: 0.875rem;\n  color: var(--color-text-secondary);\n  grid-row: 2;\n  grid-column: 3;\n}\n\n.title, .subtitle {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.withAvatar, .multiline {\n  height: 3.5rem; // Force chat item height\n}\n\n.multiline {\n  .title {\n    grid-row: 1;\n    align-self: end;\n  }\n}\n\n.input {\n  padding-inline: 0.75rem;\n}\n\n.startInput {\n  grid-row: 1 / 3;\n  grid-column: 1;\n  margin-inline-end: 1.1875rem;\n}\n\n.endInput {\n  grid-row: 1 / 3;\n  grid-column: 4;\n  margin-inline-start: 1.25rem;\n}\n\n.avatarElement {\n  grid-row: 1 / 3;\n  grid-column: 2;\n  margin-inline-end: 0.75rem;\n}\n","@use \"../../../styles/mixins\";\n\n.container {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.header {\n  padding: 0.75rem 1.25rem;\n  border-bottom: 1px solid var(--color-borders);\n  display: flex;\n  flex-flow: row wrap;\n  flex-shrink: 0;\n\n  overflow-y: auto;\n  max-height: 20rem;\n\n  :global(.input-group) {\n    margin-bottom: 0;\n    flex-grow: 1;\n  }\n\n  :global(.form-control) {\n    height: 2rem;\n    border: none;\n    border-radius: 0;\n    padding: 0;\n    box-shadow: none !important;\n  }\n}\n\n.pickerCategoryTitle {\n  color: var(--color-text-secondary);\n  padding-inline: 0.5rem;\n  margin-bottom: 0.5rem;\n  font-weight: var(--font-weight-medium);\n\n  &:not(:first-child) {\n    border-top: 1px solid var(--color-borders);\n    padding-top: 0.5rem;\n    margin-top: 0.375rem;\n  }\n}\n\n.peerChip {\n  margin-bottom: 0.5rem;\n  max-width: calc(50% - 0.5rem);\n}\n\n.pickerList {\n  flex-grow: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.padded {\n  padding: 0.5rem;\n  scrollbar-gutter: stable;\n\n  @include mixins.adapt-padding-to-scrollbar(0.5rem);\n\n  @media (max-width: 600px) {\n    padding-inline: 0;\n  }\n}\n\n.noResults {\n  height: 100%;\n  margin: 0;\n  padding: 1rem 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--color-text-secondary);\n}\n\n.onlineStatus {\n  color: var(--color-primary);\n}\n","// @optimization\n@mixin while-transition() {\n  .Transition_slide:not(.Transition_slide-active) & {\n    @content;\n  }\n}\n\n@mixin adapt-padding-to-scrollbar($padding) {\n  padding-inline-end: calc($padding - var(--scrollbar-width));\n}\n\n@mixin adapt-margin-to-scrollbar($margin) {\n  margin-inline-end: calc($margin - var(--scrollbar-width));\n}\n\n@mixin filter-outline($width: 0.125rem, $color) {\n  filter:\n    drop-shadow($width $width 0 $color)\n    drop-shadow((-$width) $width 0 $color)\n    drop-shadow($width (-$width) 0 $color)\n    drop-shadow((-$width) (-$width) 0 $color);\n}\n\n@mixin gradient-border-top($width, $cutout: 0px) {\n  mask-image: linear-gradient(transparent $cutout, black $width);\n}\n\n@mixin gradient-border-bottom($height, $cutout: 0px) {\n  mask-image: linear-gradient(to top, transparent $cutout, black $height);\n}\n\n@mixin gradient-border-horizontal($borderStart, $borderEnd) {\n  mask-image: linear-gradient(to right, transparent, black $borderStart, black calc(100% - $borderEnd), transparent);\n}\n\n@mixin gradient-border-left($indent, $cutout: 0px) {\n  mask-image: linear-gradient(to right, transparent $cutout, black $indent);\n}\n\n@mixin gradient-border-right($indent, $cutout: 0px) {\n  mask-image: linear-gradient(to left, transparent $cutout, black $indent);\n}\n\n@mixin gradient-border-top-bottom($top, $bottom) {\n  mask-image: linear-gradient(transparent 0%, black $top, black calc(100% - $bottom), transparent 100%);\n}\n\n@mixin peer-gradient($property, $colorCount) {\n  --_accent-color-rgb: var(--color-accent-own-rgb);\n\n  html.theme-dark {\n    --_accent-color-rgb: var(--color-text-rgb);\n  }\n\n  @if $colorCount == 2 {\n    #{$property}:\n      repeating-linear-gradient(\n        -45deg,\n        rgb(var(--_accent-color-rgb), 100%),\n        rgb(var(--_accent-color-rgb), 100%) 5px,\n        rgb(var(--_accent-color-rgb), 35%) 5px,\n        rgb(var(--_accent-color-rgb), 35%) 10px\n      );\n  }\n\n  @else {\n    #{$property}:\n      repeating-linear-gradient(\n        -45deg,\n        rgb(var(--_accent-color-rgb), 100%),\n        rgb(var(--_accent-color-rgb), 100%) 5px,\n        rgb(var(--_accent-color-rgb), 60%) 5px,\n        rgb(var(--_accent-color-rgb), 60%) 10px,\n        rgb(var(--_accent-color-rgb), 20%) 10px,\n        rgb(var(--_accent-color-rgb), 20%) 15px\n      );\n  }\n}\n\n@mixin reset-range() {\n  input[type=\"range\"] {\n    -webkit-appearance: none;\n    display: block;\n    width: 100%;\n    height: 0.75rem;\n    margin-bottom: 0.5rem;\n    background: transparent;\n\n    &:focus {\n      outline: none;\n    }\n\n    &::-ms-track {\n      width: 100%;\n      cursor: var(--custom-cursor, pointer);\n\n      background: transparent;\n      border-color: transparent;\n      color: transparent;\n    }\n\n    &::-webkit-slider-thumb {\n      -webkit-appearance: none;\n    }\n\n    &::-moz-range-thumb {\n      -moz-appearance: none;\n    }\n\n    &::-webkit-slider-runnable-track {\n      cursor: var(--custom-cursor, pointer);\n    }\n\n    &::-moz-range-track, &::-moz-range-progress {\n      cursor: var(--custom-cursor, pointer);\n    }\n  }\n}\n\n@mixin header-pane {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 2.875rem;\n  transform: translateY(-100%);\n  transition: transform var(--slide-transition);\n\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n  padding-left: max(0.75rem, env(safe-area-inset-left));\n  padding-right: max(0.5rem, env(safe-area-inset-right));\n  background-color: var(--color-background);\n\n  &::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: -0.1875rem;\n    left: 0;\n    right: 0;\n    height: 0.125rem;\n    box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);\n  }\n\n  // Some panels might unmount without animation, so we provide same background above panel to make it less noticeable\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: -100%;\n    left: 0;\n    right: 0;\n    height: inherit;\n    background-color: inherit;\n    z-index: -1;\n  }\n}\n\n@mixin side-panel-section {\n  background-color: var(--color-background);\n  box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);\n  border-bottom: 0.625rem solid var(--color-background-secondary);\n\n  &:last-child {\n    border-bottom: none;\n    box-shadow: none;\n  }\n}\n",":global(.MenuItem).item {\n  margin-bottom: 0;\n  font-size: 0.8125rem;\n  font-weight: var(--font-weight-normal);\n  cursor: var(--custom-cursor, default);\n  pointer-events: none;\n  --color-skeleton-background: #2121211a;\n  &:hover,\n  &:focus,\n  &:active {\n    background: none;\n  }\n\n  :global(.icon) {\n    margin-inline-end: 0.25rem;\n  }\n}\n\n.get {\n  cursor: var(--custom-cursor, pointer);\n  font-size: 0.6875rem;\n  margin-inline-start: 0.375rem;\n  border-radius: 1rem;\n  padding: 0.1875rem 0.375rem;\n  pointer-events: all;\n  font-weight: var(--font-weight-medium);\n  transition: 150ms filter ease-in;\n  background: var(--color-background-menu-separator);\n  filter: opacity(0.8);\n\n  &:hover {\n    filter: brightness(1.1);\n  }\n}\n\n.skeleton {\n  height: 0.5rem;\n  width: calc(100% - 2rem);\n  margin: 0.5rem 0;\n  border-radius: 0.25rem;\n}\n\n.transition {\n  height: 1.5rem;\n  width: auto;\n}\n",".MessageContextMenu {\n  position: absolute;\n  font-size: 1rem;\n  user-select: none;\n\n  &_items {\n    overflow: auto;\n    padding: 0.5rem 0;\n    overscroll-behavior: contain;\n\n    &-hidden {\n      opacity: 0;\n      transition: 300ms opacity;\n    }\n  }\n\n  &.compact &_items {\n    padding: 0.25rem 0;\n  }\n\n  .bubble {\n    overflow: initial;\n    padding: 0 !important;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &.with-reactions .bubble {\n    background: none !important;\n    backdrop-filter: none !important;\n    box-shadow: none;\n  }\n\n  &.with-reactions &_items {\n    background: var(--color-background-compact-menu);\n    backdrop-filter: blur(10px);\n    box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);\n    border-radius: var(--border-radius-default);\n    padding: 0.25rem 0;\n\n    @media (min-width: 600px) {\n      margin-inline-end: 2.75rem;\n    }\n\n    body.no-menu-blur & {\n      background: var(--color-background);\n      backdrop-filter: none;\n    }\n  }\n\n  .backdrop {\n    touch-action: none;\n  }\n\n  &--seen-by-label-wrapper {\n    position: relative;\n    flex-grow: 1;\n  }\n\n  &--seen-by-label {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0;\n    right: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: initial;\n  }\n\n  .avatars {\n    padding-inline-start: 1rem;\n  }\n\n  .ReactionSelector {\n    position: absolute;\n    top: 0;\n    transform: translateY(calc(-100% - 0.5rem));\n  }\n}\n\n.ReactionSelector-hidden {\n  opacity: 0;\n  transition: 300ms opacity;\n}\n","// Hack: Increase selector specificity to override Button styles\n.root.root {\n  --custom-emoji-size: 1.25rem;\n  --reaction-background: var(--color-reaction);\n  --reaction-background-hover: var(--hover-color-reaction);\n  --reaction-text-color: var(--text-color-reaction);\n\n  &.chosen {\n    --reaction-background: var(--color-reaction-chosen);\n    --reaction-background-hover: var(--hover-color-reaction-chosen);\n    --reaction-text-color: var(--text-color-reaction-chosen);\n  }\n\n  &.paid {\n    --reaction-background: #FFBC2E33 !important;\n    --reaction-background-hover: #FFBC2E55 !important;\n    --reaction-text-color: #E98111 !important;\n    z-index: 2;\n\n    &.outside {\n      --reaction-text-color: #FFFFFF !important;\n      --reaction-background: #FFBC2E77 !important;\n      --reaction-background-hover: #FFBC2E99 !important;\n    }\n  }\n\n  &.paid.chosen {\n    --reaction-background: #FFB727 !important;\n    --reaction-background-hover: #FFB727CC !important;\n    --reaction-text-color: #FFFFFF !important;\n  }\n\n  display: flex;\n  flex-direction: row;\n  height: 1.875rem;\n  white-space: nowrap;\n  width: auto;\n  padding: 0 0.375rem 0 0.25rem;\n  background-color: var(--reaction-background) !important;\n  border-radius: 1.75rem;\n  font-weight: var(--font-weight-medium);\n  font-variant-numeric: tabular-nums;\n  text-transform: none;\n  color: var(--reaction-text-color);\n  overflow: visible;\n  position: relative;\n  line-height: 1.75rem;\n  z-index: 1;\n\n  gap: 0.125rem;\n\n  transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms !important;\n\n  &:hover {\n    --reaction-background: var(--reaction-background-hover) !important;\n\n    backdrop-filter: var(--reaction-background-hover-filter);\n\n    @supports not (backdrop-filter: var(--reaction-background-hover-filter)) {\n      filter: var(--reaction-background-hover-filter);\n    }\n  }\n}\n\n.animated-emoji {\n  margin: 0.25rem;\n}\n\n.tag.tag {\n  position: relative;\n  margin-right: 1rem;\n  padding-inline: 0;\n  justify-content: start;\n\n  border-radius: 0.375rem;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n\n  // SVG has problems with backdrop-filter\n  &:hover {\n    backdrop-filter: unset;\n    filter: var(--reaction-background-hover-filter);\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    right: -0.5rem;\n    top: 50%;\n    transform: translateY(-50%);\n\n    width: 0.375rem;\n    height: 0.375rem;\n    border-radius: 50%;\n    background-color: var(--text-color-reaction-chosen);\n    opacity: 0.4;\n  }\n\n  .animated-emoji {\n    margin: 0.25rem 0 0.25rem 0.25rem;\n  }\n}\n\n.tail {\n  height: 100%;\n  position: absolute;\n  right: -0.9375rem;\n  z-index: -1;\n\n  .is-safari & {\n    // Safari subpixel rendering be damned. May cause slight overlap, but it's better than a gap.\n    /* stylelint-disable-next-line plugin/whole-pixel */\n    right: -14.8px;\n  }\n}\n\n.tail-fill {\n  fill: var(--reaction-background);\n  transition: fill 150ms;\n}\n\n.tag-text {\n  display: flex;\n  gap: 0.25rem;\n  font-size: 1rem;\n  margin-inline-end: 0.375rem;\n}\n\n.counter {\n  margin-inline-end: 0.125rem;\n  font-weight: var(--font-weight-semibold);\n}\n\n.disabled {\n  opacity: 0.5;\n}\n\n.paidCounter {\n  font-family: var(--font-family-rounded);\n  font-size: 2.5rem;\n  font-variant-numeric: tabular-nums;\n  color: #FFBC2E;\n\n  position: absolute;\n  top: -150%;\n  right: 50%;\n  transform: translateX(50%);\n  -webkit-text-stroke: 1px #E58E0D;\n  z-index: 1;\n}\n",".subtitle {\n  margin-bottom: 1rem;\n}\n",".Reactions {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  flex-wrap: wrap;\n  gap: 0.375rem;\n  margin-top: 0.25rem;\n  margin-bottom: 0.1875rem;\n  overflow: visible;\n  max-width: calc(var(--max-width) + 2.25rem);\n\n  &.is-outside {\n    margin-top: 0.25rem;\n  }\n\n  .is-forwarded.is-inverted-media & {\n    margin-top: 0.5rem;\n    margin-bottom: 0.125rem;\n  }\n\n  &.is-service {\n    justify-content: center;\n    max-width: 19rem;\n    margin-top: 0.3125rem;\n  }\n\n  .own &.is-outside {\n    flex-direction: row-reverse;\n  }\n\n  .theme-light &.is-outside .message-reaction {\n    --reaction-background: var(--pattern-color);\n    --reaction-background-hover: var(--pattern-color);\n    --reaction-background-hover-filter: brightness(115%);\n    --reaction-text-color: white;\n\n    &.chosen {\n      --reaction-background: rgb(255, 255, 255, 0.6);\n      --reaction-background-hover: rgb(255, 255, 255, 0.75);\n      --reaction-text-color: rgb(62 62 62);\n    }\n  }\n}\n",".root {\n  font-size: 0.75rem;\n  line-height: 1;\n  border-radius: 1em;\n  padding: 0.25em 0.5em;\n  background-color: var(--accent-background-active-color);\n  color: var(--accent-color);\n\n  filter: brightness(1);\n  transition: 150ms filter ease-in;\n}\n\n.clickable {\n  cursor: var(--custom-cursor, pointer);\n\n  &:hover {\n    filter: brightness(1.1);\n  }\n}\n",".root {\n  --percent: calc(var(--progress, 0.5) * 100%);\n  display: flex;\n  position: relative;\n  height: 2rem;\n  background: var(--color-background-menu-separator);\n  border-radius: 0.625rem;\n}\n\n.withBadge {\n  margin-top: 3rem;\n}\n\n.badgeContainer {\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  top: -1.5rem;\n  left: 0;\n  right: 0;\n  transform: translate(calc(var(--shift-x) * 100% - 50%), -20px);\n  transition: transform 0.2s ease-in-out;\n  animation: slide-in 0.5s ease-in-out;\n}\n\n@keyframes slide-in {\n  from {\n    transform: translate(-50%, -20px);\n  }\n\n  to {\n    transform: translate(calc(var(--shift-x) * 100% - 50%), -20px);\n  }\n}\n\n.floating-badge-wrapper {\n  animation: rotate-in 0.5s ease-in-out;\n  border-radius: 0.5rem;\n  height: 2.6875rem;\n  position: relative;\n  overflow: hidden;\n}\n\n@keyframes rotate-in {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  50% {\n    // Rotate more if progress is higher\n    transform: rotate(calc(-20deg * var(--progress)));\n  }\n\n  100% {\n    transform: rotate(0deg);\n  }\n}\n\n.floating-badge {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #ffffff;\n  padding: 0.25rem 0.75rem;\n  border-radius: 1rem;\n  background-color: #7E85FF;\n  position: relative;\n  z-index: 1;\n}\n\n.floating-badge-triangle {\n  display: inline-block;\n  position: absolute;\n  bottom: -4px;\n  left: calc(var(--tail-position, 0.5) * 100%);\n  transform: translateX(-50%);\n}\n\n.floating-badge-icon {\n  font-size: 1.25rem;\n  margin-right: 0.25rem;\n}\n\n.floating-badge-value {\n  font-size: 16px;\n  font-weight: var(--font-weight-medium);\n}\n\n.left, .right {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  font-weight: var(--font-weight-medium);\n}\n\n.left {\n  left: 0.75rem;\n}\n\n.right {\n  right: 0.75rem;\n}\n\n.progress {\n  --multiplier: calc(1 / var(--progress) - 1);\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: max(var(--percent), 0.625rem);\n  border-top-left-radius: 0.625rem;\n  border-bottom-left-radius: 0.625rem;\n  background-image: var(--premium-gradient);\n  background-size: calc(1 / var(--progress) * 100%) 100%;\n\n  .left, .right {\n    color: white;\n    white-space: nowrap;\n  }\n\n  .right {\n    right: calc(-100% * var(--multiplier) + 0.75rem);\n  }\n}\n\n.fullProgress {\n  border-radius: 0.625rem;\n}\n\n.primary {\n  .progress {\n    background-image: none;\n    background-color: var(--color-primary);\n  }\n\n  .floating-badge {\n    background-color: var(--color-primary);\n  }\n}\n"],"names":[],"sourceRoot":""}