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

.wp-block-tablestack-tablewrapper {

	table.wp-block-tablestack-table {
		border: 1px solid #ccc;
		border-collapse: collapse;
		margin: 0;
		padding: 0;
		width: 100%;

		td, th {
			border: 1px solid;
			word-wrap: break-word;
			div.cell-container {
				display: flex;
				flex-direction: column;
				align-items: var(--tablestack-cell-horizontal-alignment);

				p {
					padding: 0;
					margin: 0;
				}

				ul, ol {
					margin: 0;
				}
			}
		}

		td, th {
			vertical-align: var(--tablestack-cell-vertical-alignment);
			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 */
		}

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

		tr:not(.header-row):nth-child(even) {
			background-color: var(--tablestack-even-row-bg-color);
		}
		tr:not(.header-row):nth-child(odd) {
			background-color: var(--tablestack-odd-row-bg-color);
		}
		tr.header-row {
			background-color: var(--tablestack-header-row-bg-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;
			text-transform: uppercase;
		}

		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;
					text-transform: uppercase;
				}
				div.cell-container {
					align-items: end;
				}
			}
		}

	}
}