@charset "UTF-8";
@tailwind base;
@tailwind components;


%SELECTION_OVERLAY {
	@apply absolute inset-0 bg-blue-200 opacity-30 pointer-events-none content-[""];
}

%ACTION_BOARD {
	@apply z-[2] bg-stone-200 opacity-30 cursor-pointer hover:opacity-100;
}

%INSERT_ICON {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSI2NCA2NCA4OTYgODk2IiBmaWxsPSIjMDBmIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUxMiA2NEMyNjQuNiA2NCA2NCAyNjQuNiA2NCA1MTJzMjAwLjYgNDQ4IDQ0OCA0NDggNDQ4LTIwMC42IDQ0OC00NDhTNzU5LjQgNjQgNTEyIDY0em0xOTIgNDcyYzAgNC40LTMuNiA4LTggOEg1NDR2MTUyYzAgNC40LTMuNiA4LTggOGgtNDhjLTQuNCAwLTgtMy42LTgtOFY1NDRIMzI4Yy00LjQgMC04LTMuNi04LTh2LTQ4YzAtNC40IDMuNi04IDgtOGgxNTJWMzI4YzAtNC40IDMuNi04IDgtOGg0OGM0LjQgMCA4IDMuNiA4IDh2MTUyaDE1MmM0LjQgMCA4IDMuNiA4IDh2NDh6Ij48L3BhdGg+PC9zdmc+");
}

.wechat-editor-table-wrapper {
	@apply relative max-w-[654px];

	&.ProseMirror-selectednode, .selectedCell {
		&:after {
			@extend %SELECTION_OVERLAY;
		}
	}

	.wechat-editor-table-actions {
		@extend %ACTION_BOARD;

		@apply absolute top-[-12px] left-[-14px] w-[14px] h-[14px] rounded-tl opacity-0;

		&:hover {
			@apply top-[-24px] left-[-24px] w-6 h-6 rounded-tl rounded bg-blue-200 opacity-30;
		}
	}

	.wechat-editor-table-row-actions {
		@extend %ACTION_BOARD;

		@apply absolute flex flex-col top-0 left-[-14px] w-[13px] h-full rounded-bl opacity-0;

		.row-action-overlay {
			@apply w-full border-t border-white;

			.row-action-container {
				@apply relative w-full;

				.row-action-insert-before, .row-action-insert-after {
					@extend %INSERT_ICON;
					@apply z-50 absolute w-3 h-3 opacity-0 cursor-e-resize;
					left: calc(50% - 6px);
				}

				.row-action-insert-before {
					top: -6px;
				}

				.row-action-insert-after {
					bottom: -6px;
				}

				&:hover {
					.row-action-insert-before, .row-action-insert-after {
						opacity: 1;
					}
				}
			}
		}
	}


	table {
		@apply table-fixed border-collapse w-full;

		thead {
			th {
				@apply relative h-0 ;

				&:not(:last-child) {
					@apply border-r border-white;
				}

				.column-action-overlay {
					@extend %ACTION_BOARD;
					@apply absolute top-[-12px] bottom-0 left-0 right-0 h-3 opacity-0 border-b border-white;

					.column-action-container {
						@apply absolute w-1/2 h-full last:left-1/2;
					}
				}

				&:last-child {
					.column-action-overlay {
						border-top-right-radius: 4px;
					}
				}

			}

			.column-action-insert-before, .column-action-insert-after {
				position: absolute;
				top: calc(50% - 6px);
				width: 12px;
				height: 12px;
				z-index: 30;
				opacity: 0;
				@extend %INSERT_ICON;
				cursor: s-resize;
			}

			.column-action-insert-before {
				left: -6px;
			}

			.column-action-insert-after {
				right: -6px;
			}

			.column-action-container:hover {
				.column-action-insert-before, .column-action-insert-after {
					opacity: 1;
				}
			}

		}

		tbody {
			td, th {
				@apply relative align-top;
			}

			.column-resize-handle {
				@apply z-20 absolute top-0 bottom-[-2px] right-[-3px] w-[5px] bg-stone-400 opacity-20 pointer-events-none;
			}
		}

	}

	&:hover {
		.wechat-editor-table-actions, .column-action-overlay, .wechat-editor-table-row-actions {
			opacity: .8;
		}
	}

}

.resize-cursor {
	cursor: col-resize;
}

@tailwind utilities;
