/**
 * Inspector Controls - 詳細設定
 * 基本設定、表示設定、スタイル設定、背景設定、フォント設定、
 * アイコン設定、サムネイル設定、スペーシング設定、レイアウト設定
 */

// ==================================
// 共通スタイル
// ==================================
// padding: 16px 0 が設定されている要素内の *-title 要素の margin-bottom をリセット
.zenblocks-inspector-display-setting,
.zenblocks-inspector-font-text-shadow,
.zenblocks-inspector-styling-radius,
.zenblocks-inspector-styling-opacity,
.zenblocks-inspector-style-transition {

	[class*="-title"] {
		margin-bottom: 0 !important;
	}
}

// ==================================
// 詳細設定内のパネル
// 編集画面での表示順に並べる
// ==================================

// ----------------------------------
// 基本設定
// ----------------------------------
// テキスト設定、タグ設定など
// 現在は特にカスタムスタイルなし

// ----------------------------------
// 表示設定
// ----------------------------------
.zenblocks-inspector-display-setting {
	padding: 16px 0;

	&__visibility-toggle {
		margin-bottom: 0 !important;
	}
}

// ----------------------------------
// スタイル設定
// ----------------------------------

// 文字色
// ColorPaletteのスタイルは共通カラーピッカーを参照

// テキストシャドウ
.zenblocks-inspector-font-text-shadow {
	padding: 16px 0;

	& > .components-base-control {
		margin-bottom: 0;
	}

	& > .components-base-control + div {
		margin-top: 10px;
	}
}

// ボーダー
.zenblocks-inspector-styling-border {

	& > .components-base-control {
		margin-bottom: 0;
	}

	& > .components-base-control + div {
		margin-top: 10px;
	}

	&__width-control {
	}

	&__style-select {
	}

	&__box-sizing {
	}

	&__color-control {
	}
}

// 角丸
.zenblocks-inspector-styling-radius {
	padding: 16px 0;

	&__use-individual-toggle {
	}

	&__control {

		.components-base-control {
			padding-top: 0 !important;
			margin-bottom: 0.5em !important;
		}

		.components-base-control .components-base-control {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}
	}

	&__label {
		margin-bottom: 8px;
		font-size: 11px;
		font-weight: 500;
		text-transform: uppercase;
		color: #1e1e1e;
	}

	&__controls {
		display: flex;
		align-items: flex-start;
		gap: 8px;

		.components-range-control {
			flex: 1;
			margin-bottom: 0;
		}

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

	&__unit-select {
		flex: 0 0 70px;
		margin-bottom: 0;

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

// シャドウ
.zenblocks-inspector-styling-shadow {

	& > .components-base-control {
		margin-bottom: 0;
	}

	& > .components-base-control + div {
		margin-top: 10px;
	}

	&__color-control {
	}

	&__horizontal-control {
	}

	&__vertical-control {
	}

	&__blur-control {
	}

	&__spread-control {
	}
}

.zenblocks-inspector-styling-inner-shadow {
	padding: 16px 0;

	& > .components-base-control {
		margin-bottom: 0;
	}

	& > .components-base-control + div {
		margin-top: 10px;
	}

	&__color-control {
	}

	&__horizontal-control {
	}

	&__vertical-control {
	}

	&__blur-control {
	}

	&__spread-control {
	}
}

// 透明度
.zenblocks-inspector-styling-opacity {
	padding: 16px 0;

	&__opacity-control {
	}

	&__blend-mode-select {
	}
}

// ----------------------------------
// 背景設定
// ----------------------------------

// カラー
.zenblocks-inspector-background-color {

	.components-color-picker {
		width: 100%;
		padding-bottom: 10px;

		.react-colorful {
			width: 100%;

			.react-colorful__last-control {
				width: 96%;
			}
		}

		.react-colorful + div {

			& > .components-flex {
				padding-left: 0;
				padding-right: 0;

				.components-base-control {
					margin-bottom: 0;

					.components-flex {
						margin-left: 0;
					}
				}
			}
		}
	}

	&__gradient-picker {
	}

	&__color-picker {
		padding: 0;
	}

	&__opacity-control {
	}

	&__blend-mode-select {
	}

	&__reset-button {
		justify-content: center !important;
	}
}

// 画像
.zenblocks-inspector-background-image {

	&__button-container {
		display: flex;
		margin-bottom: 10px;
		gap: 5px;
	}

	&__set-button {
		flex: 1 1 50%;
		justify-content: center !important;
		background-color: #2669e6 !important;
		border-color: #2669e6 !important;
		color: #fff !important;

		&:hover:not(:disabled) {
			background-color: #1f52bf !important;
			border-color: #1f52bf !important;
		}
	}

	&__remove-button {
		flex: 1 1 50%;
		justify-content: center !important;
		background-color: transparent !important;
		border-color: #2669e6 !important;
		color: #2669e6 !important;

		&:hover:not(:disabled) {
			background-color: rgba(38, 105, 230, 0.08) !important;
			border-color: #1f52bf !important;
			color: #1f52bf !important;
		}
	}

	&__settings {
	}

	&__repeat-select {
	}

	&__size-select {
	}

	&__custom-size {

		button {
			height: 32px;
		}
	}

	&__width-controls {
	}

	&__height-controls {
		margin-bottom: 12px;
	}

	&__unit-control {
	}
}

// パターン
.zenblocks-inspector-background-pattern {

	.components-color-picker {
		width: 100%;
		padding-bottom: 10px;

		.react-colorful {
			width: 100%;

			.react-colorful__last-control {
				width: 96%;
			}
		}

		.react-colorful + div {

			& > .components-flex {
				padding-left: 0;
				padding-right: 0;

				.components-base-control {
					margin-bottom: 0;

					.components-flex {
						margin-left: 0;
					}
				}
			}
		}
	}

	&__type-select {
	}

	&__color-picker {
	}

	&__opacity-control {
	}

	&__size-control {
		// padding-bottom: 20px;
	}

	&__rotate-control {
	}

	&__reset-button {
		justify-content: center !important;
	}
}

// ----------------------------------
// フォント設定
// ----------------------------------

// フォントファミリー
.zenblocks-inspector-font-family {

	&__select {
	}

	&__message {
		color: #757575;
		font-size: 12px;
		font-style: normal;
		margin: 0;
		text-align: center;
	}
}

// フォントサイズ
.zenblocks-inspector-font-size {

	&__select {
	}

	&__controls {
		display: flex;
		align-items: flex-end;
		gap: 8px;
		margin-top: 8px;
	}

	&__number {
		flex: 1;
		margin-bottom: 0;
	}

	&__number + .components-base-control {

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

	&__unit-select {
		min-width: 80px;
	}
}

// フォントウェイト
.zenblocks-inspector-font-weight {

	&__select {
	}
}

// 行間
.zenblocks-inspector-font-line-height {

	&__select {
	}

	&__controls {
		display: flex;
		align-items: flex-end;
		gap: 8px;
		margin-top: 8px;
	}

	&__number {
		flex: 1;
		margin-bottom: 0;
	}

	&__number + .components-base-control {

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

	&__unit-select {
		min-width: 80px;
	}
}

// 文字間
.zenblocks-inspector-font-letter-spacing {

	&__select {
	}

	&__controls {
		display: flex;
		align-items: flex-end;
		gap: 8px;
		margin-top: 8px;
	}

	&__number {
		flex: 1;
		margin-bottom: 0;
	}

	&__number + .components-base-control {

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

	&__unit-select {
		min-width: 80px;
	}
}

// ----------------------------------
// アイコン設定
// ----------------------------------

// アイコン選択
.svg-icon-setting {
}

.icon-selection-button {
	justify-content: center;
	outline: 1px solid #0000;
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;

	&:not(.has-icon) {
		background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #2669e6));
		color: var(--wp-components-color-accent-inverted, #fff);
	}

	&.has-icon {
		background: #fff;
		color: #1e1e1e;
		border: 1px solid #949494;
	}
}

// アイコンサイズ
// .zenblocks-inspector-icon-size は共通paddingで対応

// アイコン位置
// .zenblocks-inspector-icon-position は共通paddingで対応

// アイコンフレーム
// .zenblocks-inspector-icon-frame は共通paddingで対応
// .zenblocks-inspector-icon-frame-size は共通paddingで対応
// .zenblocks-inspector-icon-frame-border は共通paddingで対応
// .zenblocks-inspector-icon-frame-radius は共通paddingで対応

// ----------------------------------
// サムネイル設定
// ----------------------------------

// 画像
.zenblocks-inspector-thumbnail-image {

	&__button-container {
		display: flex;
		margin-bottom: 10px;
		gap: 5px;
	}

	&__set-button {
		flex: 1 1 50%;
		justify-content: center !important;
		background-color: #2669e6 !important;
		border-color: #2669e6 !important;
		color: #fff !important;

		&:hover:not(:disabled) {
			background-color: #1f52bf !important;
			border-color: #1f52bf !important;
		}
	}

	&__remove-button {
		flex: 1 1 50%;
		justify-content: center !important;
		background-color: transparent !important;
		border-color: #2669e6 !important;
		color: #2669e6 !important;

		&:hover:not(:disabled) {
			background-color: rgba(38, 105, 230, 0.08) !important;
			border-color: #1f52bf !important;
			color: #1f52bf !important;
		}
	}

	&__settings {
	}

	&__object-fit-select {
	}

	&__custom-size {

		button {
			height: 32px;
		}
	}

	&__width-controls {
	}

	&__height-controls {
	}
}

// カラー
.zenblocks-inspector-thumbnail-color {

	.components-color-picker {
		width: 100%;
		padding-bottom: 10px;

		.react-colorful {
			width: 100%;

			.react-colorful__last-control {
				width: 96%;
			}
		}

		.react-colorful + div {

			& > .components-flex {
				padding-left: 0;
				padding-right: 0;

				.components-base-control {
					margin-bottom: 0;

					.components-flex {
						margin-left: 0;
					}
				}
			}
		}
	}

	&__gradient-picker {
	}

	&__color-picker {
		padding: 0;
	}

	&__opacity-control {
	}

	&__blend-mode-select {
	}

	&__reset-button {
	}
}

// サイズ
.zenblocks-inspector-thumbnail-size {

	&__controls {
	}
}

// 角丸
.zenblocks-inspector-thumbnail-radius {

	&__controls {
	}
}

// 位置
.zenblocks-inspector-thumbnail-position {

	&__controls {
	}
}

// ----------------------------------
// スペーシング設定
// ----------------------------------
// パディング、マージンは共通paddingで対応

// ----------------------------------
// レイアウト設定
// ----------------------------------
// 横幅、高さ、ポジションは共通paddingで対応