.arkb-menu__customTable {

	@include pc {
		padding-left: 8px;
	}

	.__table {
		--the-table-spacing: 20px;
		margin: calc(0px - var(--the-table-spacing));
		vertical-align: top;
		border-collapse: separate;
		border-spacing: var(--the-table-spacing);

		th,
		td {
			position: relative;
		}
	}

	@include sp {

		.__table {
			--the-table-spacing: 10px;
			font-size: 13px;
		}

		.components-text-control__input {
			min-height: 2.5em;
			font-size: 13px;
		}
	}

	.components-base-control.has-error .components-text-control__input {
		border-color: $error_color;
	}

	.components-base-control__field {
		margin-bottom: 0;
	}

	.__error {
		position: absolute;
		top: 50%;
		left: -28px;
		min-width: auto;
		height: auto;
		padding: 0;
		border: none;
		box-shadow: none;
		transform: translateY(-50%);
	}

	.__errorPopover {
		white-space: nowrap;

		.components-popover__content {
			padding: 12px;
			overflow: hidden;
			font-weight: bold;
			border: none;
			border-radius: 2px;
			box-shadow: 0 2px 16px rgba(0, 0, 0, .2);
		}

		ul {
			margin: 0;
			padding-left: 1.5em;
			font-weight: bold;
			list-style: disc outside;
		}

		li {
			margin: 0;
			line-height: 1.6;
		}
	}

	// 移動 / 削除
	.__rowControls {
		display: flex;
		gap: 7px;
		align-items: center;
		padding-left: 4px;

		.components-button {
			width: 28px;
			min-width: 28px;
			height: 28px;
			padding: 0;
			border-radius: 50%;
		}

		@include mobile {

			// 移動ボタンはスマホでは非表示（狭くなるので）
			.components-button.is-secondary {
				display: none;
			}
		}
	}

	// add / reset
	.__controls {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		align-items: center;
		margin-top: 20px;
		padding: 4px 0;

		.disabled-element-wrapper {
			cursor: not-allowed;
		}

		.components-button {
			padding: 6px 12px;

			&.-add {
				margin-right: auto;
			}

			svg {
				width: 1.5em;
				height: 1.5em;
				margin-right: .5em;
				margin-left: -.25em;
			}
		}

		input[type="file"] {
			display: none;
		}

		.__errorText--max {
			width: 100%;
			margin: 0;
		}

		.__noticeText--changed {
			position: absolute;
			top: 100%;
			width: 100%;
			margin: 0;
			font-size: 12px;
			text-align: right;
		}
	}

	.__table + .arkb-menu-help {
		margin-top: 1.5em;
	}

	.arkb-menu-help + .arkb-menu-help {
		margin-top: .25em;

		@include mobile {
			display: none;
		}
	}


	.__classNameArea {
		display: flex;
		justify-content: flex-start;

		.__classPrefix {
			font-size: 12px;
		}

		.components-base-control__field {
			display: flex;
			align-items: center;

			label {
				order: 1;
			}

			&::before {
				flex-shrink: 0;
				order: 2;
				margin: 0 1px;
				padding: 3px 5px 2px;
				font-size: 12px;
				font-family: Consolas, Monaco, monospace;
				direction: ltr;
				unicode-bidi: embed;
				background: #f0f0f1;
			}

			.components-text-control__input {
				order: 3;
			}
		}

		.components-text-control__input {
			max-width: 10em;
		}
	}

	.__textContentInput {
		width: 550px;
	}

	.__editCode {
		width: auto !important;
		min-width: 6.5em !important;
		margin-right: 2px;
		padding: 0px 8px !important;
		border-radius: 2px !important;

		svg {
			width: 1.5em;
			height: 1.5em;
			margin-right: 2px;
			margin-left: -2px;
		}
	}

	td.__editor {
		padding-bottom: 2em;
		padding-left: 1.5em !important;

		.__editor__label {
			margin-bottom: .25em;
		}
	}

	.__previewArea {
		padding: 4px;
	}

}

.arkb-menu__customFormat .__classNameArea .components-base-control__field::before {
	content: "arkb-format-";
}

.arkb-menu__customBlockStyle .__classNameArea .components-base-control__field::before {
	content: "is-style-";
}


//sp でもtable維持
.arkb-menu__customTable[data-sp="table"] {

	@include mobile {

		// 移動ボタンはスマホでは非表示（狭くなるので）
		.__rowControls .components-button.is-secondary {
			display: none;
		}
	}


}

.arkb-menu__customTable[data-sp="block"] {

	@include pc {

		.components-base-control__label {
			display: none;
		}
	}

	@include sp {

		table,
		tbody,
		tr,
		td,
		th {
			display: block;
		}

		.__table {
			margin: 0 !important;
		}

		thead {
			display: none;
		}

		td {
			padding: 6px 0;
		}

		tr {
			margin-bottom: 12px;
			padding-bottom: 12px;
			border-bottom: dashed 1px #ededed;
		}

		.components-base-control__field {
			display: flex;
			align-items: center;
		}

		.components-base-control__label {
			min-width: 4em;
			margin-right: .5em;
			margin-bottom: 0;
			font-size: 12px;
			white-space: nowrap;
		}

		.__textContentInput {
			width: 100%;
		}

		.__rowControls {
			justify-content: flex-end;
			padding-left: 0;

			.components-button.is-secondary {
				display: block !important;
			}
		}
	}
}