.wp-block-create-block-table-stack {
	background-color: #21759b;
	color: #fff;
	padding: 2px;
}


.wp-block-tablestack-tablewrapper {
	
	.wp-block-tablestack-table {
		border-style: var(--tablestack-table-border-style);
		border-color: var(--tablestack-table-border-color);
		border-width: var(--tablestack-table-border-width);
		border-radius: var(--tablestack-table-border-radius);
		overflow: hidden;
		table {
			border: unset;
			border-collapse: collapse;
			margin: 0;
			padding: 0;
			width: 100%;
		
			tr {
				&:not(:last-child) {
					td, th {
						border-bottom-style: var(--tablestack-table-border-style);
						border-bottom-color: var(--tablestack-table-border-color);
						border-bottom-width: var(--tablestack-table-border-width);
					}
				}
		
				&:not(.header-row) {
					&:nth-child(even) {
						background-color: var(--tablestack-even-row-bg-color);
						color: var(--tablestack-even-row-text-color);
					}
		
					&:nth-child(odd) {
						background-color: var(--tablestack-odd-row-bg-color);
						color: var(--tablestack-odd-row-text-color);
					}
				}
		
				&.header-row {
					background-color: var(--tablestack-header-row-bg-color);
					color: var(--tablestack-header-row-text-color);
				}
			}
		
			td, th {
				white-space: normal; /* Allow text to wrap inside the cell */
				vertical-align: var(--tablestack-cell-vertical-alignment);
				word-wrap: break-word;
				padding: var(--tablestack-padding-top) var(--tablestack-padding-right) 
						var(--tablestack-padding-bottom) var(--tablestack-padding-left);
		
				&:not(:last-child) {
					border-right-style: var(--tablestack-table-cell-border-style);
					border-right-color: var(--tablestack-table-cell-border-color);
					border-right-width: var(--tablestack-table-cell-border-width);
				}
		
				div.cell-container {
					display: flex;
					flex-direction: column;
					align-items: var(--tablestack-cell-horizontal-alignment);
		
					p {
						padding: 0;
						margin: 0;
						width: 100%;
		
						span {
							font-size: 14px;
						}
					}
		
					ul, ol {
						margin: 0;
					}
				}
			}
		
			th {
				font-size: 0.85em;
				letter-spacing: 0.1em;
			}
		
			caption {
				font-size: 1.5em;
				margin: 0.5em 0 0.75em;
			}
		
			tbody.body-loading {
				opacity: 0.5; /* Adjust opacity value as needed */
				transition: opacity 0.7s ease-in;
			}
		}
	}
	

	// table.wp-block-tablestack-table {
	// 	border: unset;
	// 	border-collapse: collapse;
	// 	margin: 0;
	// 	padding: 0;
	// 	width: 100%;

	// 	// td + td { 
	// 		// border-left:1px solid #202832;
	// 		// border-left-style: var(--tablestack-column-only-border-style);
	// 		// border-left-color: var(--tablestack-column-only-border-color);
	// 		// border-left-width: var(--tablestack-column-only-border-width);
	// 	// }
	// 	tr:not(:last-child) td, 
	// 	tr:not(:last-child) th {
	// 		border-bottom-style: var(--tablestack-table-border-style);
	// 		border-bottom-color: var(--tablestack-table-border-color);
	// 		border-bottom-width: var(--tablestack-table-border-width);
	// 	}
		
	// 	td, th {
			
	// 		// word-wrap: break-word; /* Break long words */
	// 		// word-break: break-word; /* Ensure words break inside the cell */
	// 		white-space: normal; /* Allow text to wrap inside the cell */
	// 		vertical-align: var(--tablestack-cell-vertical-alignment);

	// 		&:not(:last-child) {
	// 			border-right-style: var(--tablestack-table-cell-border-style);
	// 			border-right-color: var(--tablestack-table-cell-border-color);
	// 			border-right-width: var(--tablestack-table-cell-border-width);
	// 		}
	// 		word-wrap: break-word;
	// 		div.cell-container {
	// 			display: flex;
	// 			flex-direction: column;
	// 			align-items: var(--tablestack-cell-horizontal-alignment);

	// 			p {
	// 				padding: 0;
	// 				margin: 0;
	// 				width: 100%;
	// 				span {
	// 					font-size: 14px;
	// 				}
	// 			}

	// 			ul, ol {
	// 				margin: 0;
	// 			}
	// 		}
	// 	}

	// 	// td, th {
			
	// 	// }

	// 	caption {
	// 		font-size: 1.5em;
	// 		margin: .5em 0 .75em;
	// 	}

	// 	tr:not(.header-row):nth-child(even) {
	// 		background-color: var(--tablestack-even-row-bg-color);
	// 		color: var(--tablestack-even-row-text-color)
	// 	}
	// 	tr:not(.header-row):nth-child(odd) {
	// 		background-color: var(--tablestack-odd-row-bg-color);
	// 		color: var(--tablestack-odd-row-text-color)
	// 	}
	// 	tr.header-row {
	// 		background-color: var(--tablestack-header-row-bg-color);
	// 		color: var(--tablestack-header-row-text-color)
	// 	}

	// 	th, td {
	// 		padding-top: var(--tablestack-padding-top);
	// 		padding-bottom: var(--tablestack-padding-bottom);
	// 		padding-left: var(--tablestack-padding-left);
	// 		padding-right: var(--tablestack-padding-right);
	// 	}

	// 	th {
	// 		font-size: .85em;
	// 		letter-spacing: .1em;
	// 	}

	// 	tbody.body-loading {
	// 		opacity: 0.5; /* Adjust opacity value as needed */
	// 		transition: opacity 0.7s ease-in;
	// 	}
	// }

	@media screen and (max-width: 600px) {
		table.wp-block-tablestack-table {
			border: 0;
			border-collapse: collapse;

			caption {
				font-size: 1.3em;
			}

			tr.header-row {
				border: none;
				clip: rect(0 0 0 0);
				height: 1px;
				margin: -1px;
				overflow: hidden;
				padding: 0;
				position: absolute;
				width: 1px;
			}

			tr {
				// border-bottom: 3px solid #ddd;
				display: block;
			}

			td {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: .8em;
				text-align: right;

				&::before {
					content: attr(data-label);
					float: left;
					font-weight: bold;
				}
				div.cell-container {
					align-items: end;
				}
			}
		}

	}
}