/**
 * Inspector Controls - デザイン設定
 * デザイン関連パネルのスタイル定義
 *
 * 対象パネル:
 * - 基本設定
 * - スタイル設定
 * - 背景設定
 * - フォント設定
 * - アイコン設定
 * - サムネイル設定
 * - スペーシング設定
 * - レイアウト設定
 */

// ==================================
// 変数定義（共通）
// ==================================
$dot-size: 1px;
$dot-spacing: 3px;
$dot-color: rgba(255, 255, 255, 0.75);

// ==================================
// 第1レベル - 親パネル
// ==================================
.zenblocks-panel--level-1 {

	> .components-panel__body-title {
		margin-left: 0;
		margin-right: 0;
		background-color: #f4f4f4 !important;

		.components-button {
			padding: 19px 48px 19px 16px;

			&:hover {
				color: inherit;
				background-color: transparent;
			}
		}
	}

	&.is-opened {
		padding: 16px 0 0;
		border-radius: 0 !important;

		> .components-panel__body-title {
			margin-bottom: 0;
			border-bottom: 1px solid rgba(#fff, 0.3);
		}
	}
}

// ==================================
// 第2レベル - 設定パネル
// ==================================
.zenblocks-panel--level-2 {
	// margin-left: -16px !important;
	// margin-right: -16px !important;
	background-color: #e9e9e9 !important;
	color: #000;

	> .components-panel__body-title {
		background-color: #ddd !important;
		background-image: radial-gradient(circle, $dot-color $dot-size, transparent $dot-size) !important;
		background-size: $dot-spacing $dot-spacing !important;
		background-position: 0 0 !important;

		.components-button {
			padding: 12px 48px 12px 16px;

			&:hover {
				color: inherit;
				background-color: transparent;
			}
		}
	}

	&.is-opened {
		padding: 16px 16px 0;
		border-radius: 0 !important;
		border-bottom: 1px solid rgba(#fff, 0.3);

		> .components-panel__body-title {
			margin-bottom: 0 !important;
			border-bottom: 1px solid rgba(#fff, 0.3);
		}
	}
}

// ==================================
// 第3レベル - サブパネル
// ==================================
.zenblocks-panel--level-3 {
	margin-left: -16px !important;
	margin-right: -16px !important;
	background-color: #e0e0e0 !important;
	color: #000;

	> .components-panel__body-title {
		background-color: #d7d7d7 !important;
		background-image: none !important;
		background-size: $dot-spacing $dot-spacing !important;
		background-position: 0 0 !important;

		.components-button {
			padding: 11px 48px 11px 16px;

			&:hover {
				color: inherit;
				background-color: transparent;
			}
		}
	}

	&.is-opened {
		padding: 12px 16px 12px;
		border-radius: 0 !important;
		border-bottom: 1px solid rgba(#fff, 0.2);

		> .components-panel__body-title {
			margin-bottom: 0 !important;
			border-bottom: 1px solid rgba(#fff, 0.2);
		}
	}
}

// ==================================
// 第4レベル - 深いネストパネル
// ==================================
.zenblocks-panel--level-4 {
	margin-left: -16px !important;
	margin-right: -16px !important;
	background-color: #c8c8c8 !important;
	color: #000;

	> .components-panel__body-title {
		background-color: #bfbfbf !important;
		background-image: none !important;
		margin-bottom: 0 !important;

		.components-button {
			padding: 8px 48px 8px 16px;

			&:hover {
				color: inherit;
				background-color: transparent;
			}
		}
	}

	&.is-opened {
		padding: 12px 16px 12px;
		border-radius: 0 !important;
		border-bottom: 1px solid rgba(#fff, 0.15);

		> .components-panel__body-title {
			margin-bottom: 0 !important;
			border-bottom: 1px solid rgba(#fff, 0.15);
		}
	}
}

// ==================================
// 設定モジュール共通padding
// ==================================

// 基本設定
.zenblocks-inspector-text-setting,
.zenblocks-inspector-tag-setting,
// 表示設定
.zenblocks-inspector-display-setting,
// スタイル設定
.zenblocks-inspector-font-color,
.zenblocks-inspector-font-text-shadow,
.zenblocks-inspector-styling-border,
.zenblocks-inspector-styling-radius,
.zenblocks-inspector-styling-shadow,
.zenblocks-inspector-styling-opacity,
// 背景設定
.zenblocks-inspector-background-color,
.zenblocks-inspector-background-image,
.zenblocks-inspector-background-pattern,
.zenblocks-inspector-background-base-color,
// フォント設定
.zenblocks-inspector-font-family,
.zenblocks-inspector-font-size,
.zenblocks-inspector-font-weight,
.zenblocks-inspector-font-line-height,
.zenblocks-inspector-font-letter-spacing,
// アイコン設定
.zenblocks-inspector-icon-select,
.zenblocks-inspector-icon-color,
.zenblocks-inspector-icon-size,
.zenblocks-inspector-icon-position,
.zenblocks-inspector-icon-frame,
.zenblocks-inspector-icon-frame-size,
.zenblocks-inspector-icon-frame-color,
.zenblocks-inspector-icon-frame-border,
.zenblocks-inspector-icon-frame-radius,
.zenblocks-inspector-icon-frame-transition,
// サムネイル設定
.zenblocks-inspector-thumbnail-image,
.zenblocks-inspector-thumbnail-image-base-color,
.zenblocks-inspector-thumbnail-overlay,
.zenblocks-inspector-thumbnail-size,
.zenblocks-inspector-thumbnail-border,
.zenblocks-inspector-thumbnail-radius,
.zenblocks-inspector-thumbnail-position,
.zenblocks-inspector-thumbnail-opacity,
// バンド設定
.zenblocks-inspector-band-pattern,
.zenblocks-inspector-band-overlay,
.zenblocks-inspector-band-image,
.zenblocks-inspector-band-image-base-color,
.zenblocks-inspector-band-size,
.zenblocks-inspector-band-border,
.zenblocks-inspector-band-radius,
.zenblocks-inspector-band-position,
.zenblocks-inspector-band-opacity,
.zenblocks-inspector-band-transform,
// スペーシング設定
.zenblocks-inspector-spacing-padding,
.zenblocks-inspector-spacing-margin,
// レイアウト設定
.zenblocks-inspector-layout-width,
.zenblocks-inspector-layout-height,
.zenblocks-inspector-layout-position,
.zenblocks-inspector-layer-order {
	padding: 16px 0;
}

// ==================================
// パネルタイトル - 特殊クラス
// ==================================
.zenblocks-panel-title--no-margin {
	margin-bottom: 0 !important;
}

// ==================================
// ボーダー表示位置ボタングループ
// ==================================
.border-side-button-group {

	.border-side-button {
		flex: 1;
		height: 32px;
		padding: 0 12px;
		font-size: 11px;
		font-weight: 500;
		border: 1px solid #ddd;
		border-radius: 4px;
		background: #fff;
		color: #1e1e1e;
		cursor: pointer;
		transition: all 0.2s ease;

		&:hover:not(.is-checked) {
			background: #f0f0f0;
			border-color: #999;
		}

		&.is-checked {
			background: $color-primary;
			border-color: $color-primary;
			color: #fff;

			&:hover {
				background: $color-primary-hover;
				border-color: $color-primary-hover;
			}
		}
	}
}

// ==================================
// スタイル付きトグル（共通）
// ==================================
.zenblocks-styled-toggle,
.zenblocks-responsive-toggle-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.zenblocks-styled-toggle__label,
.zenblocks-responsive-toggle-label {
	font-size: 11px;
	font-weight: 500;
	color: #1e1e1e;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.zenblocks-styled-toggle__buttons,
.zenblocks-responsive-toggle-buttons {
	display: inline-flex;
	background: #fff;
	border-radius: 6px;
	padding: 3px;
	gap: 2px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	border: 1px solid #e0e0e0;
}

.zenblocks-styled-toggle__button,
.zenblocks-responsive-toggle-button {
	min-width: 40px;
	height: 28px;
	padding: 0 10px;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: #757575;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: all 0.15s ease;

	&:hover:not(.is-active) {
		background: #f0f0f0;
		color: #1e1e1e;
	}

	&.is-active {
		background: #1e1e1e;
		color: #fff;
	}
}

// ==================================
// タグセレクター（HTMLタグ切替）
// ==================================
.zenblocks-tag-selector {
	margin-bottom: 16px;

	&__label {
		display: block;
		font-size: 11px;
		font-weight: 500;
		color: #1e1e1e;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		margin-bottom: 8px;
	}

	&__buttons {
		display: flex;
		gap: 2px;
		background: #fff;
		border-radius: 6px;
		padding: 4px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
		border: 1px solid #e0e0e0;
	}

	&__button {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		height: 40px;
		padding: 0 12px;
		border: none;
		border-radius: 4px;
		background: transparent;
		color: #757575;
		font-size: 12px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.15s ease;

		&:hover:not(.is-active) {
			background: #f0f0f0;
			color: #1e1e1e;
		}

		&.is-active {
			background: #1e1e1e;
			color: #fff;
		}

		svg {
			flex-shrink: 0;
		}
	}
}

// ==================================
// レスポンシブタブ（PC/TB/SP切替）
// ==================================
.zenblocks-responsive-tab-panel {

	.components-tab-panel__tabs,
	.zenblocks-responsive-tab-list {
		display: flex;
		gap: 2px;
		border-bottom: none;
		margin-bottom: 16px;
		background: #fff;
		border-radius: 6px;
		padding: 4px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
		border: 1px solid #e0e0e0;

		.components-button,
		.zenblocks-tab {
			flex: 1;
			min-width: 36px;
			height: 36px !important;
			justify-content: center;
			font-size: 13px;
			font-weight: 500;
			border-radius: 0;
			border: none;
			transition: all 0.15s ease;
			background: transparent;
			color: #757575;
			cursor: pointer;

			&:first-child {
				border-radius: 4px 0 0 4px;
			}

			&:last-child {
				border-radius: 0 4px 4px 0;
			}

			&:hover:not(:disabled):not(.is-active):not(.zenblocks-tab--active) {
				background: #f0f0f0;
				color: #1e1e1e;
			}

			&.is-active,
			&.zenblocks-tab--active {
				background: #1e1e1e;
				color: #fff;
				box-shadow: none;

				&:hover:not(:disabled) {
					background: #1e1e1e;
					color: #fff;
				}
			}
		}
	}

	.components-tab-panel__tab-content,
	.zenblocks-responsive-tab-content {
		animation: fadeIn 0.2s ease;
	}

	@keyframes fadeIn {

		from {
			opacity: 0;
			transform: translateY(-4px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

// ==================================
// focal-point-pickerのz-index制限
// ==================================
.components-focal-point-picker__icon_container {
	z-index: auto !important;
}

// ==================================
// トランジション設定内の警告Notice
// ==================================
.zenblocks-inspector-style-transition,
.zenblocks-inspector-icon-transition {

	.components-notice.is-warning {
		margin-bottom: 16px;
	}
}

// ==================================
// 位置設定コントロール（共通）
// ==================================
.zenblocks-position-control {
	margin-bottom: 16px;

	&__label {
		display: block;
		font-size: 11px;
		font-weight: 500;
		color: #1e1e1e;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		margin-bottom: 8px;
	}

	&__row {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	&__input {
		width: 100px;
		flex-shrink: 0;
	}
}

.zenblocks-origin-buttons {
	display: inline-flex;
	background: #fff;
	border-radius: 4px;
	padding: 3px;
	gap: 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	border: 1px solid #e0e0e0;
}

.zenblocks-origin-button {
	width: 44px;
	height: 28px;
	padding: 0;
	border: none;
	background: transparent;
	color: #757575;
	cursor: pointer;
	transition: all 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: center;

	&--first {
		border-radius: 4px 0 0 4px;
	}

	&--middle {
		border-radius: 0;
	}

	&--last {
		border-radius: 0 4px 4px 0;
	}

	&:hover:not(.is-active):not(:disabled) {
		background: #f0f0f0;
		color: #1e1e1e;
	}

	&.is-active {
		background: #1e1e1e;
		color: #fff;
	}

	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;

		&.is-active {
			background: #1e1e1e;
			color: #fff;
		}
	}
}

.zenblocks-origin-buttons.is-disabled {
	opacity: 0.6;
	cursor: not-allowed;

	.zenblocks-origin-button {
		pointer-events: none;
	}
}