@use 'components/scroll-hint/styles/table' as scroll-hint;

/*      mixin
/*-------------------------------------------*/
// 縦積み
@mixin cell-vertical-table {

	table {
	
		:is(th, td) {
			width: 100%;
			display: block;
			border-top-color: transparent;
			box-sizing: border-box;
			/* 最後のセルには border-bottom: none を適用 */
			&:last-of-type:not(:last-child) {
				border-bottom: none;
			}
		}
	}
	
	/* 最初の行を除外するためのスタイル */
	&:not(.is-style-stripes) tr:first-of-type :is(th, td):first-of-type{
		border-top: 1px solid;
		border-top-color:inherit;
	}
	/* 最初の行の最初の th, td に適用されるスタイル */
	&:not(.is-style-stripes) table:where(:not(.has-border-color)) tr:first-of-type :is(th, td):first-of-type {
		border-top-color: inherit;
	}
	/* 枠線の色が設定してある場合の th, td のスタイル */
	.has-border-color tr :is(th, td){
		border-left:none;
		border-right:none;
	}
	/* 枠線の色が設定してある場合の最初の行の最初の th, td に適用されるスタイル */
	.has-border-color tr:first-of-type :is(th, td):first-of-type{
		border-top:none;
	}
	/* 枠線の色が設定してある場合の行の最後の th, td に適用されるスタイル */
	.has-border-color tr :is(th, td):last-of-type{
		border-bottom: none;
	}

	&.is-style-vk-table {     
		&-border-top-bottom,
		&-border,
		&-border-stripes {
			// theme.json のあるファイルでテーブルの線の色指定がない場合のみ適用
			table:not(.has-border-color) {
				tr:first-of-type :is(th, td):first-of-type {
					border-top: 1px solid;
					border-top-color:inherit;
				}
			}
		}
	}
}

/*      フロントエンド
/*-------------------------------------------*/
.wp-block-table {
	thead th, tfoot td {
		font-weight: bold;
	}

	&.is-style-vk-table {     
		&-border-top-bottom,
		&-border,
		&-border-stripes {
			// theme.json のあるファイルでテーブルの線の色指定がない場合のみ適用
			table:where(:not(.has-border-color)) {
				:where(th, td) {
					border: 1px solid;
					border-color:inherit;
				}
			}
		}

		&-border-top-bottom {
			table,
			th,
			td {
				border-left: none;
				border-right: none;
			}
		}

		&-border {
			// theme.json のあるファイルでテーブルの線の色指定がない場合のみ適用
			table:where(:not(.has-border-color)) {
				th, td {
					border: 1px solid;
					border-color: inherit;
				}
			}
		}

		&-border-stripes {
			tbody tr:nth-child(2n+1) {
				background-color: #f0f0f0;
			}
			// theme.json のあるファイルでテーブルの線の色指定がない場合のみ適用
			table:where(:not(.has-border-color)) {
				th, td {
					border: 1px solid;
					border-color: inherit;
				}
			}
		}
	}

	&.is-style-vk-table-cell-vertical {

		&[data-cell-vertical-breakpoint="table-cell-vertical-mobile"] {
			@media (max-width: 575.98px) {
				@include cell-vertical-table;
			}
		}

		&[data-cell-vertical-breakpoint="table-cell-vertical-tablet"] {
			@media (max-width: 991.98px) {
				@include cell-vertical-table;
			}
		}

		&[data-cell-vertical-breakpoint="table-cell-vertical-pc"] {
			@include cell-vertical-table;
		}
	}
}

/*      編集画面
/*-------------------------------------------*/
.editor-styles-wrapper {
	.wp-block-table {
		&.is-style-regular { //デフォルトのボーダーカラー
			th, td {
				border-color: var(--vk-color-border-hr);
			}
		}

		&.is-style-vk-table-cell-vertical {

			/* 最初の行を除外するためのスタイル */
			&:not(.is-style-stripes) table:not(.has-border-color) {
				tr:first-of-type :is(th, td):first-of-type {
					border-top: 1px solid;
					border-top-color:inherit;
				}
			}
	
			&[data-cell-vertical-breakpoint="table-cell-vertical-mobile"] {
				@media (max-width: 575.98px) {
					@include cell-vertical-table;
				}
			}
	
			&[data-cell-vertical-breakpoint="table-cell-vertical-tablet"] {
				@media (max-width: 991.98px) {
					@include cell-vertical-table;
				}
			}
	
			&[data-cell-vertical-breakpoint="table-cell-vertical-pc"] {
				@include cell-vertical-table;
			}
		}
	}
}