.wp-block-table {

	&:where(.is-style-regular, :not([class*="is-style-"])) {

		table {
			width: 100%;
			vertical-align: middle;
			background-color: var(--wp--preset--color--white);

			th,
			td {
				padding: 1rem;
				border: 1px solid var(--wp--preset--color--alto-10);
				@media (width < 600px) {
					padding: 0.5rem;
				}
			}

			th {
				font-weight: 500;
				text-align: center;

				@media (width < 600px) {
					width: 30%;
				}
			}

			td {

				+ td {
					@media (width < 600px) {
						margin-block-start: 0;
					}
				}
			}

			thead {
				border: 1px solid var(--wp--preset--color--alto-10);

				th {
					color: var(--wp--preset--color--light-01);
					background-color: var(--wp--preset--color--primary);
				}
			}

			tbody {

				&:not(:has(tr th)) {

					tr {

						td {

							&:nth-of-type(1) {
								text-align: center;
								vertical-align: middle;
								background-color: var(--wp--preset--color--primary-medium);
							}
						}
					}
				}

				tr {

					/* &:not(:has(th)) {

						td {

							&:nth-of-type(1) {
								text-align: center;
								vertical-align: middle;
								background-color: var(--wp--preset--color--primary-medium);
							}
						}
					} */
				}

				th {
					background-color: var(--wp--preset--color--alto-03);
				}

				td {
					vertical-align: top;
				}
			}
		}

		figcaption {
			margin-block-start: 0.5rem;
			color: var(--wp--preset--color--dark-01);
			font-size: var(--wp--preset--font-size--small);
		}

		&.js-scrollable {

			table {
				@media (width < 600px) {
					width: 600px;
				}
			}
		}
	}

		&.is-style-history {

		table {
			width: 100%;
			vertical-align: middle;
			background-color: var(--wp--preset--color--white);

			th,
			td {
				padding: 1rem;
				border: 1px solid var(--wp--preset--color--alto-10);
				@media (width < 600px) {
					display: block;
					width: 100%;
					padding: 0.5rem;
				}
			}

			th {
				font-weight: 500;
				text-align: center;

				@media (width < 600px) {
					width: 30%;
				}
			}

			td {

				+ td {
					@media (width < 600px) {
						margin-block-start: 0;
					}
				}
			}

			thead {
				border: 1px solid var(--wp--preset--color--alto-10);

				th {
					color: var(--wp--preset--color--light-01);
					background-color: var(--wp--preset--color--primary);
				}
			}

			tbody {

				&:not(:has(tr th)) {

					tr {

						td {

							&:nth-of-type(1) {
								text-align: center;
								vertical-align: middle;
								background-color: var(--wp--preset--color--primary-medium);
							}
						}
					}
				}

				th {
					width: 20%;
					background-color: var(--wp--preset--color--primary-medium);
					@media (width < 600px) {
						width: 100%;
					}
				}

				td {
					vertical-align: top;
				}

				@media (width < 600px) {
					display: block;
					width: 100%;
				}
			}
		}

		figcaption {
			margin-block-start: 0.5rem;
			color: var(--wp--preset--color--dark-01);
			font-size: var(--wp--preset--font-size--small);
		}
	}

	&.is-style-stripes {

		table {
			@media (width < 600px) {
				min-width: 600px;
			}
		}
	}
}

.js-scrollable {
	position: relative;
	word-break: auto-phrase;

	&:has(.is-left-scrollable) {


		&::before {
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
			content: "";
			pointer-events: none;
			inset: 0 auto auto 0;
		}
	}

	&:has(.is-right-scrollable) {

		&::after {
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			background: linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
			content: "";
			pointer-events: none;
			inset: 0 auto auto 0;
		}
	}

	.is-left-scrollable,
	.is-right-scrollable {
		background: none !important;
	}

	.scroll-hint-icon {
		display: none;
	}

	.is-scrollable {

		.scroll-hint-icon {
			display: block;
		}
	}

}