// Gutenberg
[data-type="arkhe-blocks/tab"] {

	position: relative;
	padding-top: 1px;

	&.is-selected,
	&.has-child-selected {
		padding-top: 32px;
	}

	// tab-bodyを追加するボタンは非表示に。
	.arkb-tabBody > .block-list-appender {
		display: none !important;
	}

	&[data-is-example] {

		.arkb-tabBody__content:first-child {
			display: block;
		}
	}

	// タブ追加ボタン
	&:not(.is-selected) {

		> .arkb-tabList > .arkb-tabList__item--add {
			visibility: hidden;
			pointer-events: none;
		}
	}
}


// タブコンテンツ
[data-type="arkhe-blocks/tab-body"] {

	display: none;
	margin-top: 0 !important;
	margin-bottom: 0 !important;

	// &[data-open] {
	// 	display: block;
	// }

}


[data-type^="arkhe-blocks"] {

	.arkb-tabList {
		position: relative;
		margin: 0;
		padding: 0;
	}


	// スクロール可能時、overflow:hidden的な感じになるので調整
	&.-scrollable-pc {

		@include pc {

			.arkb-tabList {
				margin-top: -28px;
				padding-top: 28px;
			}
		}

	}


	// タブ追加ボタン
	.arkb-tabList__item--add {
		position: relative;
		// left: 8px;
		z-index: 1;
		display: flex;
		flex-basis: auto;
		align-items: center;
		justify-content: center;
		// width: 0;
		margin: 0;
		margin-right: 0;
		padding: 4px;
		list-style: none !important;

		// デバイスプレビュー時に横にはみ出してしまうのを防ぐ
		// @include sp {
		// 	left: 6px;
		// }

		.arkb-tabBtn--add {
			padding: 2px;
			border-radius: 50%;
		}

		svg {
			display: block;
			width: 20px;
			height: 20px;
		}
	}

	&:not(.is-selected):not(.has-child-selected) {

		.arkb-tabList__item--add {
			display: none;
		}
	}


	.arkb-tabList__item {
		position: relative;
		display: flex;
		align-items: center;
		margin-top: 0 !important;
		list-style: none !important;
		cursor: pointer;

		p {
			line-height: inherit; // buttonの1を受け継ぐ
			cursor: text;
		}
	}


	// タブブロックが選択 or タブボディが選択してる時だけ表示。かつ、アクティブなタブのみ表示。
	&:not(.is-selected):not(.has-child-selected),
	.arkb-tabList__item:not(.is-active) {

		.arkb-tab__tooltips {
			display: none;
		}
	}

	.arkb-tabList__button {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		text-align: center;
		cursor: pointer;

		> .rich-text {
			width: 100%;
			margin: 0 !important;
		}
	}

}


.arkb-tabBtn--add,
.arkb-tabBtn--remove,
.arkb-tabBtn--moveUp,
.arkb-tabBtn--moveDown {
	display: block;
	color: #000;
	background: #fff;
	border: solid 1px #000;
	cursor: pointer;
	transition: border-color .25s, opacity .25s;
}

.arkb-tabBtn--add {

	&:hover {
		color: #fff;
		background: #000;
	}
}

.arkb-tabBtn--remove,
.arkb-tabBtn--moveUp,
.arkb-tabBtn--moveDown {

	&:not(:hover) {
		border-color: transparent;
		opacity: .5;
	}
}

// 各種ボタン
.arkb-tab__tooltips {
	position: absolute;
	top: -28px;
	left: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	width: 100%;
	width: auto;
	color: #000;
	transform: translateX(-50%);
	cursor: auto;

	[class^="arkb-tabBtn"] {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 26px;
		height: 26px;
		margin-right: 1px;
		padding: 0;
		color: #000;
		background: #fff;
		border-radius: 4px;

		svg {
			display: block;
			width: 20px;
			height: 20px;
			margin: 0 auto;
		}
	}
}


// .arkb-tabBtn--remove,
// .arkb-tabBtn--moveUp,
// .arkb-tabBtn--moveDown {

// }


.arkb-tabBtn--moveUp,
.arkb-tabBtn--moveDown {

	&[data-active="false"] {
		opacity: .1 !important;
		pointer-events: none;
	}

}