@import "~scss/_vars";
@mixin cnt-2 { width: 260px; }
@mixin cnt-3 { width: 172px; }
@mixin cnt-4 { width: 128px; }

.blocks {
	.block.blockChat { @include text-common; }
	.block.blockChat {
		.wrap.isDraggingOver { opacity: 0.5; cursor: copy; }

		.scrollWrapper { display: flex; flex-direction: column; min-height: 206px; justify-content: flex-end; }
		.scrollWrapper {
			.scroll { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px 0px; padding: 0px 0px 16px 0px; }
		}

		.chatEmptyState { 
			display: flex; flex-direction: column; align-items: center; justify-content: center; flex-grow: 1; color: var(--color-text-secondary); 
			margin: 64px 0px;
		}
		.chatEmptyState {
			.inner { display: flex; flex-direction: column; gap: 10px 0px; }

			.title { @include text-paragraph; font-weight: 600; text-align: center; }
			.item { display: flex; flex-direction: row; align-items: center; gap: 0px 12px; }
			.item {
				.icon { width: 20px; height: 20px; flex-shrink: 0; }
				.icon.infinity { background-image: url('~img/icon/chat/empty/infinity.svg'); }
				.icon.wifi { background-image: url('~img/icon/chat/empty/wifi.svg'); }
				.icon.key { background-image: url('~img/icon/chat/empty/key.svg'); }
			}

			.buttons { display: flex; justify-content: center; margin-top: 8px; }
		}

		.sectionDate { display: flex; justify-content: center; z-index: 10; pointer-events: none; opacity: 0; }
		.sectionDate {
			.label { 
				@include text-small; padding: 3px 10px; background: var(--color-bg-primary-90); border-radius: 13px; color: var(--color-text-secondary); 
				font-weight: 500; backdrop-filter: blur(5px);
			}

			&.anim { transition: opacity $transitionChatMessageTime ease-in-out; }
			&.show { opacity: 1; }
		}

		markupmention.withImage {
			smile, .space { display: none; }
		}

		@import "./chat/attachment";
		@import "./chat/message";
		@import "./chat/form";
	}
}
