.bx-im-group-chat-promo__container { --im-group-chat-promo__background-color_separator: rgba(var(--im-color-palette-gray-90-rgb), 0.1); --im-group-chat-promo__font-color_title: var(--im-color-palette-gray-90); --im-group-chat-promo__font-color_text: var(--im-color-palette-gray-70); padding: 23px 20px 20px; } .bx-im-group-chat-promo__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .bx-im-group-chat-promo__title { font: var(--im-font-size-2xl) var(--im-font-family-system); font-weight: var(--im-font-weight-semi-bold); color: var(--im-group-chat-promo__font-color_title); } .bx-im-group-chat-promo__close { width: 24px; height: 24px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.73 6.047L6.16 7.618l4.513 4.514-4.514 4.513 1.571 1.571 4.514-4.513 4.513 4.513 1.571-1.571-4.513-4.513 4.513-4.514-1.57-1.571-4.514 4.513L7.73 6.047z' fill='%23525C69' fill-opacity='.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; cursor: pointer; } .bx-im-group-chat-promo__close:hover { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.73 6.047L6.16 7.618l4.513 4.514-4.514 4.513 1.571 1.571 4.514-4.513 4.513 4.513 1.571-1.571-4.513-4.513 4.513-4.514-1.57-1.571-4.514 4.513L7.73 6.047z' fill='%23525C69' fill-opacity='.7'/%3E%3C/svg%3E"); } .bx-im-group-chat-promo__content { border-radius: var(--im-border-radius-sm); margin-bottom: 19px; } .bx-im-group-chat-promo__content_image { width: 428px; height: 200px; margin-bottom: 18px; border-radius: 8px; } .bx-im-group-chat-promo__content_item { display: flex; margin-bottom: 12px; } .bx-im-group-chat-promo__content_icon { flex-shrink: 0; width: 24px; height: 24px; background-repeat: no-repeat; margin-right: 8px; } .bx-im-group-chat-promo__content_icon.--like-blue { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_23236_390610)'%3E%3Ccircle opacity='.1' cx='12' cy='12' r='12' fill='%232FC6F6'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.372 9.42h-2.83a.205.205 0 01-.19-.121 1.284 1.284 0 01.016-.994 3.65 3.65 0 00.077-2.118c-.192-.48-.243-1.356-1.13-1.397a.915.915 0 00-.66.451.288.288 0 00-.035.144s.04.851 0 1.443c-.041.592-1.174 2.1-1.893 3.057a.28.28 0 01-.185.112c-.27.04-.785.109-.97.133-.044.006-.07.06-.07.086v5.37c0 .02.025.063.067.07.145.024.509.09.876.208.461.148.845.498 1.614.758.04.014.085.02.128.02h3.61c.465-.082.813-.48.836-.96a1.773 1.773 0 00-.155-.772c-.016-.035.005-.071.042-.079.463-.084 1.042-.962.329-1.67-.019-.018-.016-.043.01-.05.393-.1.694-.414.786-.805a.866.866 0 00-.022-.451 1.533 1.533 0 00-.245-.486c-.028-.036-.013-.084.032-.098a.976.976 0 00.658-.933c.044-.417-.29-.917-.697-.918zm-8.977.226H6.349a.17.17 0 00-.169.197l1.189 6.675a.217.217 0 00.214.178h.757a.21.21 0 00.211-.207l.017-6.673a.171.171 0 00-.173-.17z' fill='%237FDEFC'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_23236_390610'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); } .bx-im-group-chat-promo__content_icon.--like-orange { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_23236_390766)'%3E%3Ccircle opacity='.1' cx='12' cy='12' r='12' fill='%23FFA900'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.127 9.537l-2.7.001a.196.196 0 01-.183-.116 1.226 1.226 0 01.017-.95c.223-.65.249-1.354.073-2.02-.183-.458-.232-1.295-1.08-1.334a.873.873 0 00-.629.43.276.276 0 00-.034.138s.04.812 0 1.377c-.038.565-1.12 2.004-1.807 2.918a.268.268 0 01-.176.107 72.46 72.46 0 01-.926.128c-.041.005-.066.057-.066.082v5.125c0 .018.023.06.063.066.14.023.486.087.837.2.44.14.806.475 1.54.723.039.013.082.02.122.02h3.446a.976.976 0 00.799-.917 1.69 1.69 0 00-.149-.737c-.015-.033.005-.068.04-.075.442-.08.995-.92.314-1.595-.018-.017-.014-.04.01-.047.375-.096.662-.396.75-.769a.827.827 0 00-.02-.43 1.464 1.464 0 00-.235-.464c-.026-.035-.011-.08.03-.094a.931.931 0 00.629-.89c.043-.398-.277-.876-.665-.877zm-8.568.217H6.606a.162.162 0 00-.161.187l1.134 6.372c.018.098.104.17.205.17h.722a.2.2 0 00.202-.198l.016-6.37a.163.163 0 00-.165-.161z' fill='%23FFC34D'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_23236_390766'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); } .bx-im-group-chat-promo__content_icon.--chat { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_23236_390620)'%3E%3Ccircle opacity='.1' cx='12' cy='12' r='12' fill='%23FFA900'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.756 6.745h7.653a.74.74 0 01.74.74V12.6a.74.74 0 01-.74.74h-3.826l-2.025 2.025a.3.3 0 01-.512-.212V13.34h-1.29a.74.74 0 01-.74-.74V7.485a.74.74 0 01.74-.74zm11.205 3.044a.74.74 0 01.74.74v4.608a.74.74 0 01-.74.74h-1.289v1.306a.3.3 0 01-.512.212l-1.518-1.518h-3.319a.74.74 0 01-.74-.74v-.782h4.474a1.11 1.11 0 001.11-1.11V9.789h1.794z' fill='%23FFC34D'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_23236_390620'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); } .bx-im-group-chat-promo__content_icon.--group { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_23236_390698)'%3E%3Ccircle opacity='.1' cx='12' cy='12' r='12' fill='%23FFA900'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.417 7.428c1.312-1.462 9.907-1.372 11.082 0 1.175 1.372 1.386 7.004 0 8.288-.263.244-.78.43-1.456.565-.014.829-.075 2.51-.318 2.51-.223 0-1.796-1.372-2.76-2.232-2.756.051-5.828-.29-6.548-.843-1.257-.968-1.312-6.826 0-8.288zm.781 6.415c.45.077 1.073.142 1.792.192.045-.194.102-.417.143-.577.03-.116.05-.2.053-.213.01-.277.383-.524.79-.693a.766.766 0 01-.078-.136.53.53 0 00-.217-.163l-.006-.217.447-.143s.116-.055.127-.055a.527.527 0 00-.05-.095c-.007-.018-.042-.132-.057-.178l-.006-.018c.065.085.141.16.227.225a2.892 2.892 0 01-.199-.441 2.853 2.853 0 01-.07-.447 6.576 6.576 0 00-.144-.814.768.768 0 00-.236-.34 1.08 1.08 0 00-.541-.197H9.15a1.082 1.082 0 00-.541.196.765.765 0 00-.236.341 6.62 6.62 0 00-.144.814 2.93 2.93 0 01-.074.437 3.291 3.291 0 01-.195.452 1.16 1.16 0 00.228-.226s-.042.158-.05.181a.878.878 0 00-.062.11c.01 0 .126.056.126.056l.447.142-.006.217a.527.527 0 00-.216.163.474.474 0 01-.125.18 1.766 1.766 0 00-.31.146 1.32 1.32 0 01-.483.161c-.172.03-.28.312-.28.312l-.03.628zm2.263.221c1.55.089 3.439.11 5.01.042-.092-.387-.174-.704-.174-.704s-.304-.509-.903-.667a2.016 2.016 0 01-.572-.266.517.517 0 01-.032-.23l-.192-.03-.016-.265c.23-.08.207-.546.207-.546.146.083.241-.286.241-.286.174-.513-.086-.482-.086-.482a3.296 3.296 0 000-.945c-.115-1.04-1.853-.758-1.647-.418-.507-.096-.391 1.084-.391 1.084l.11.305c-.153.101-.123.217-.09.347.014.054.03.11.031.17.01.294.187.232.187.232.01.486.245.55.245.55.044.305.017.253.017.253l-.209.025a.86.86 0 01-.016.207c-.121.056-.196.1-.269.143-.075.044-.15.088-.274.144-.47.21-.983.485-1.074.854-.024.1-.062.277-.103.483zm5.483.017c.693-.04 1.305-.1 1.769-.183l-.034-.692s-.108-.28-.278-.31a1.313 1.313 0 01-.48-.16 1.764 1.764 0 00-.308-.144.47.47 0 01-.124-.18.524.524 0 00-.215-.162l-.006-.215.444-.142s.115-.054.126-.054a.883.883 0 00-.061-.11c-.009-.022-.05-.18-.05-.18.064.085.14.16.226.224a3.276 3.276 0 01-.194-.448 2.903 2.903 0 01-.074-.435 6.59 6.59 0 00-.142-.808.76.76 0 00-.235-.338 1.074 1.074 0 00-.538-.195h-.022c-.193.015-.38.082-.537.195a.763.763 0 00-.235.338 6.53 6.53 0 00-.143.808 2.84 2.84 0 01-.07.445c-.053.151-.12.298-.197.438a.982.982 0 00.18-.224s-.009.172-.018.195a.516.516 0 00-.049.095c.011 0 .126.054.126.054l.444.142-.006.216a1.144 1.144 0 00-.293.207c.404.168.776.503.785.778.002.014.024.097.054.214.044.176.109.428.155.631z' fill='%23FFC34D'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_23236_390698'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); } .bx-im-group-chat-promo__content_icon.--camera { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_23236_390756)'%3E%3Ccircle opacity='.1' cx='12' cy='12' r='12' fill='%232FC6F6'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.232 8.624a18.256 18.256 0 00-4.29-.517c-1.436 0-2.901.174-4.395.52a.718.718 0 00-.549.705v5.769a.72.72 0 00.521.697c1.427.395 2.855.592 4.284.592 1.436 0 2.917-.2 4.442-.599a.72.72 0 00.53-.7V9.328a.719.719 0 00-.543-.703zm4.942.247a.221.221 0 00-.013-.077.21.21 0 00-.273-.126L15.7 9.908a.217.217 0 00-.136.203v3.916c0 .09.054.17.136.202l3.19 1.24c.023.01.048.015.074.015a.214.214 0 00.211-.217V8.871zm-9.343 4.032a.692.692 0 100-1.383.692.692 0 000 1.383zm-2.231 0a.692.692 0 100-1.383.692.692 0 000 1.383zm5.156-.692a.692.692 0 11-1.383 0 .692.692 0 011.383 0z' fill='%237FDEFC'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_23236_390756'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); } .bx-im-group-chat-promo__content_icon.--link { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_23236_390760)'%3E%3Ccircle opacity='.1' cx='12' cy='12' r='12' fill='%239DCF00'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.434 11.507l-1.971 1.97a2.786 2.786 0 01-3.94 0 2.784 2.784 0 01-.424-.561l.916-.916c.043-.044.097-.07.148-.099.064.217.174.421.344.592a1.395 1.395 0 001.97 0l1.971-1.97a1.394 1.394 0 00-1.97-1.972l-.701.702a3.496 3.496 0 00-1.778-.194l1.494-1.493a2.787 2.787 0 013.941 3.941zm-5.21 3.24l-.702.702a1.396 1.396 0 01-1.97 0 1.395 1.395 0 010-1.971l1.97-1.97a1.394 1.394 0 011.97 0c.17.17.28.374.345.59.052-.03.105-.054.148-.098l.916-.915a2.741 2.741 0 00-.423-.563 2.787 2.787 0 00-3.941 0l-1.97 1.97a2.787 2.787 0 003.94 3.942l1.494-1.493a3.494 3.494 0 01-1.778-.194z' fill='%23BBDE4D'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_23236_390760'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); } .bx-im-group-chat-promo__content_icon.--channel { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_23236_390614)'%3E%3Ccircle opacity='.1' cx='12' cy='12' r='12' fill='%239DCF00'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.309 10.09l.005-.001 9.714-2.055a.45.45 0 01.544.44v7.042a.45.45 0 01-.566.435l-3.726-.985v1.193a.75.75 0 01-.75.75H9.024a.75.75 0 01-.75-.75v-2.516l-.964-.255h-.004a.225.225 0 01-.069.034l-1.351.41a.225.225 0 01-.29-.216V9.859c0-.151.145-.26.29-.215l1.351.409c.027.008.05.02.072.037zm4.985 4.616l-3.033-.802v1.899c0 .124.1.225.225.225h2.583c.124 0 .225-.1.225-.225v-1.097z' fill='%23BBDE4D'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_23236_390614'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); } .bx-im-group-chat-promo__content_text { font: var(--im-font-size-xs)/16px var(--im-font-family-system); color: var(--im-group-chat-promo__font-color_text); } .bx-im-group-chat-promo__separator { width: 100%; height: 1px; background-color: var(--im-group-chat-promo__background-color_separator); margin-bottom: 21px; } .bx-im-group-chat-promo__button-panel { display: flex; align-items: center; justify-content: center; } .bx-im-group-chat-promo__button-panel .bx-im-button__container + .bx-im-button__container { margin-left: 18px; margin-right: 18px; }