/**
 * Inspector Controls Styles
 * InspectorControls用のスタイル
 *
 * ファイル構成:
 * - _inspector-controls.scss          - 共通スタイル（変数、構造）
 * - _inspector-controls_design.scss   - デザイン設定（レベル別スタイル、パーツ）
 * - _inspector-controls_animation.scss - アニメーション設定
 * - _inspector-controls_advanced.scss  - 詳細設定
 * - _inspector-controls_panels.scss    - パネル分類用クラス（空テンプレート）
 */

// ==================================
// 変数定義
// ==================================
$color-blue-50: #f9fafe;
$color-blue-100: #f4f6fd;
$color-blue-200: #e8edfc;
$color-blue-300: #d4e0fa;
$color-blue-400: #a8c5ff;
$color-blue-500: #2c7fff;
$color-blue-600: #2669e6;
$color-blue-700: #1f52bf;
$color-blue-800: #1a3d99;
$color-blue-900: #132d73;
$color-blue-950: #0d1f4d;

$color-primary: $color-blue-600;
$color-primary-hover: $color-blue-700;

// ==================================
// RangeControl カラーオーバーライド
// ==================================
$color-range-rail: #aac6fa; // 背景バー（未使用部分）の色

.zenblocks-inspector-controls {
	// WordPress標準のアクセントカラーをオーバーライド
	--wp-components-color-accent: #{$color-primary};
	--wp-admin-theme-color: #{$color-primary};

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

	// RangeControlのスライダー色を統一
	.components-range-control {
		// レール（背景バー・未使用部分）
		.components-range-control__rail {
			background-color: $color-range-rail !important;
		}

		// トラック（塗りつぶし部分）
		.components-range-control__track {
			background-color: $color-primary !important;
		}

		// つまみ（サム）- 新しい構造
		.components-range-control__thumb-wrapper {
			background-color: $color-primary !important;
			border-color: $color-primary !important;
		}

		// つまみ（サム）- 従来の構造
		.components-range-control__slider::-webkit-slider-thumb {
			background-color: $color-primary !important;
			border-color: $color-primary !important;
		}

		.components-range-control__slider::-moz-range-thumb {
			background-color: $color-primary !important;
			border-color: $color-primary !important;
		}

		// スライダー背景（トラック全体）- webkit
		.components-range-control__slider::-webkit-slider-runnable-track {
			background: linear-gradient(to right, $color-primary var(--wp-components-range-control__value, 50%), $color-range-rail var(--wp-components-range-control__value, 50%)) !important;
		}

		// スライダー背景（トラック全体）- Firefox
		.components-range-control__slider::-moz-range-track {
			background: $color-range-rail !important;
		}

		.components-range-control__slider::-moz-range-progress {
			background: $color-primary !important;
		}

		// フォーカス時
		.components-range-control__slider:focus::-webkit-slider-thumb {
			box-shadow: 0 0 0 2px #fff, 0 0 0 4px $color-primary !important;
		}

		.components-range-control__thumb-wrapper:focus {
			box-shadow: 0 0 0 2px #fff, 0 0 0 4px $color-primary !important;
		}
	}

	// Emotion CSS対応（動的クラス名）
	[class*="components-range-control__thumb-wrapper"] {
		background-color: $color-primary !important;
		border-color: $color-primary !important;
	}

	[class*="components-range-control__track"] {
		background-color: $color-primary !important;
	}

	[class*="components-range-control__rail"] {
		background-color: $color-range-rail !important;
	}

	// スライダーの背景レール（inputの直後のspan）
	[class*="components-range-control__slider"] + span[aria-hidden="true"] {
		background-color: $color-range-rail !important;
	}
}

// ==================================
// 編集リンクボタン
// ==================================
.zenblocks-edit-link-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #f6f7f7;
	cursor: pointer;
	font-size: 12px;
	color: #1e1e1e;
	text-decoration: none;
	width: 100%;
	box-sizing: border-box;

	&:hover {
		background: #f0f0f0;
		border-color: #c3c4c7;
	}

	&:focus {
		outline: 2px solid $color-primary;
		outline-offset: 1px;
	}

	svg {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}
}

.custom-pattern-empty {
	padding: 0 8px;
}

// ==================================
// InspectorControls 共通スタイル
// ==================================
.block-editor-block-inspector {

	.zenblocks-inspector-controls {
		// ----------------------------------
		// カスタム折りたたみパネル
		// ----------------------------------
		.custom-collapsible-panel {
			background-color: #f4f4f4 !important;
			border-bottom: 1px solid #e0e0e0 !important;

			&:first-child {
				border-top: 1px solid #e0e0e0 !important;
			}

			&.is-opened {
			}

			& > .components-button.custom-panel-toggle {
				padding: 19px 16px 19px 16px;
				background: #fff;
				height: auto !important;
				border-radius: 0 !important;
			}

			.custom-collapsible-panel-content {
				overflow: visible;
			}
		}

		// ----------------------------------
		// ホバータブ（Default/Hover切替）
		// ----------------------------------
		.zenblocks-tab-head-hover {
			position: relative;
			z-index: 1000;
			display: flex;
			width: 100%;
			margin: 0 auto 0;
			padding: 16px 16px 0;
			gap: 4px;
			border-bottom: 1px solid $color-primary;
			background: #fff;

			&.is-sticky {
				z-index: 1001;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				border-bottom: 1px solid $color-primary;
			}

			&::after {
				content: "";
				width: 100%;
				height: 1px;
				border-bottom: 1px solid $color-primary;
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 99;
			}

			.components-button {
				position: relative;
				z-index: 1;
				flex: 1;
				height: 36px;
				justify-content: center;
				font-size: 13px;
				font-weight: 500;
				border-radius: 2px 2px 0 0;
				border-top: 1px solid #ddd;
				border-left: 1px solid #ddd;
				border-right: 1px solid #ddd;
				border-bottom: 0 !important;
				box-shadow: none !important;

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

					&:hover:not(:disabled) {
						background: $color-primary;
						border-color: $color-primary;
					}
				}

				&.is-secondary {
					background: #d5d5d5;
					border-color: #d5d5d5;
					color: #222;

					&:hover:not(:disabled) {
						background: #f6f7f7;
						border-color: #8c8f94;
					}
				}
			}

			.zenblocks-hover-tab-sync-button {
				position: absolute;
				right: 6px;
				top: 50%;
				transform: translateY(-50%);
				flex: 0 0 auto;
				min-width: 22px !important;
				width: 22px !important;
				height: 22px !important;
				padding: 0 !important;
				border: none !important;
				border-radius: 3px;
				background: transparent !important;
				box-shadow: none !important;
				cursor: pointer;
				z-index: 1;
				color: #000;

				&:hover:not(:disabled) {
					background: rgba(0, 0, 0, 0.1) !important;
				}

				svg {
					width: 14px;
					height: 14px;
					fill: currentcolor;
				}
			}

			.is-primary + .zenblocks-hover-tab-sync-button {
				color: #fff;

				&:hover:not(:disabled) {
					background: rgba(255, 255, 255, 0.25) !important;
				}
			}
		}

		// ----------------------------------
		// カスタム折りたたみパネルコンテンツ
		// ----------------------------------
		.custom-panel-content {
			padding: 16px;
		}

		// ----------------------------------
		// PanelBodyWithSync：同期ボタン付きパネル
		// ----------------------------------
		.zenblocks-panel.components-panel__body {
			border: none;
			border-top: 1px solid #e0e0e0;
			margin-top: -1px;
			padding-bottom: 1px;
		}

		.zenblocks-panel-title {
			display: flex;
			align-items: center;
			position: relative;

			.components-panel__body-toggle {
				flex: 1;
			}

			> .zenblocks-sync-button {
				position: absolute;
				right: 42px;
				top: 50%;
				transform: translateY(-50%);
				display: flex;
				align-items: center;
				justify-content: center;
				width: 26px;
				height: 26px;
				padding: 0 !important;
				border: none;
				background: transparent;
				color: inherit;
				cursor: pointer;
				border-radius: 4px;
				transition: all 0.2s ease;
				z-index: 1;

				&:hover {
					background: rgba(0, 0, 0, 0.1);
					color: $color-primary;
				}

				&:focus {
					box-shadow: none;
					outline: none;
				}

				svg {
					width: 17px;
					height: 17px;
					flex-shrink: 0;
					fill: currentcolor;
				}
			}
		}

		.components-panel__body-toggle-icons {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: auto;
			height: 18px;

			.components-panel__arrow {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		// ==================================
		// パネル別スタイルのインポート
		// ==================================
		@import "inspector-controls_design";
		@import "inspector-controls_animation";
		@import "inspector-controls_advanced";
		@import "inspector-controls_panels";

		// ==================================
		// 共通コンポーネントスタイル
		// ==================================
		@import "../blocks/common/components/custom-color-palette";
	}
}

// ==================================
// サイト共通設定：サブパネル共通スタイル
// ==================================
.zenblocks-sidebar-tabs {
	// デザインスタイルをインポート（パネルレベル別スタイル）
	@import "inspector-controls_design";

	.components-panel__body {
		border: none;
		border-top: 1px solid #e0e0e0;
		margin-top: -1px;
		padding-bottom: 1px;

		> .components-panel__body-title {

			.components-button {

				&:hover {
					color: inherit;
				}
			}
		}
	}

	.zenblocks-nested-panel--level-1.components-panel__body {
		margin-left: -16px;
		margin-right: -16px;
		padding: 0;

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

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

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

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

// ==================================
// サイト共通設定：フォント設定（親パネル）
// ==================================
.zenblocks-typography-settings {

	.components-panel__body-title {
		margin-bottom: 0 !important;
	}

	&.components-panel__body {
		border: none;
		border-top: 1px solid #e0e0e0;
		margin-top: -1px;
		padding-bottom: 1px;
	}
}

// ==================================
// サイト共通設定：フォントファミリー設定
// ==================================
.zenblocks-font-family-settings {

	.components-panel__body-title {
		margin-bottom: 0 !important;

		&:hover {
			background: inherit;
			color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #2669e6));
		}
	}

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

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

	&.components-panel__body {
		padding: 0 !important;
	}

	&__content {
		padding: 16px;
	}

	&__empty {
		color: #757575;
	}

	&__list {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	&__item {
		padding: 12px;
		background: #f0f0f0;
		border-radius: 4px;
	}

	&__name {
		font-size: 10px;
		color: #757575;
		margin-bottom: 4px;
	}

	&__preview {
		font-size: 18px;
		line-height: 1.4;
	}

	&__actions {
		border-top: 1px solid #e0e0e0;
		padding-top: 16px;
	}

	&__edit-button {
		width: 100%;
		justify-content: center;
	}
}

// ==================================
// サイト共通設定：フォントサイズ設定
// ==================================
.zenblocks-font-size-settings {

	.components-panel__body-title {
		margin-bottom: 0 !important;

		&:hover {
			background: inherit;
			color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #2669e6));
		}
	}

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

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

	&.components-panel__body {
		padding: 0 !important;
	}

	&__content {
		padding: 16px;
	}

	&__empty {
		color: #757575;
	}

	&__item {
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 10px 12px;
		background: #f0f0f0;
		border-radius: 4px;
	}

	&__name {
		// font-size: 11px;
		// color: #757575;
		font-size: 10px;
		color: #2d2d2d;
	}

	&__size-info {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		color: #555;
	}

	&__min,
	&__max,
	&__fixed {
		font-family: inherit;
		// padding: 4px 7px;
		// border-radius: 3px;
		// background: #e0e0e0;
		// background: #3c3c3c;
		// color: white;
		// padding: 5px 7px;
		font-size: 13px;
		font-weight: 700 !important;
	}

	&__separator {
		color: #999;
	}

	&__actions {
		border-top: 1px solid #e0e0e0;
		padding-top: 16px;
	}

	&__edit-button {
		width: 100%;
		justify-content: center;
	}
}

.zenblocks-font-size-section {

	&__title {
		font-size: 11px;
		font-weight: 500;
		color: #757575;
		margin-bottom: 8px !important;
		display: block;
	}

	&__list {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}
}

// ==================================
// サイト共通設定：カラーパレット設定
// ==================================
.zenblocks-color-settings {

	.components-panel__body-title {
		margin-bottom: 0 !important;

		&:hover {
			background: inherit;
			color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #2669e6));
		}
	}

	& > .components-flex {
		padding-top: 16px;
		padding-bottom: 16px;
	}
}

.zenblocks-color-section {

	&__title {
		font-size: 11px;
		font-weight: 500;
		color: #757575;
		margin-bottom: 8px !important;
		display: block;
	}

	&__palette {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
}

.zenblocks-gradient-indicator {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

// ==================================
// サイト共通設定：レスポンシブ設定
// ==================================
.zenblocks-responsive-settings {
	// チェックボックスのアクセントカラーを統一
	--wp-components-color-accent: #{$color-primary};
	--wp-admin-theme-color: #{$color-primary};

	.components-panel__body-title {
		margin-bottom: 0 !important;

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

	& > .components-flex {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	&__description {
		color: #757575;
		font-size: 12px;
	}

	&__breakpoints {
		background: #f6f7f7;
		padding: 16px;
		border-radius: 4px;
		border: 1px solid #ddd;
	}

	&__row {
		align-items: center;
		justify-content: flex-start !important;
	}

	&__checkbox {
		margin-bottom: 0 !important;

		.components-checkbox-control__input[type="checkbox"]:checked {
			background: $color-primary;
			border-color: $color-primary;
		}
	}

	&__label {
		font-weight: 500;
		width: 32px;
		flex-shrink: 0;
	}

	&__note {
		color: #757575;
		font-size: 12px;
	}

	&__input {
		width: 80px;

		input {
			text-align: center;
			padding-left: 8px !important;
			padding-right: 8px !important;
			border: 1px solid #ddd;
			border-radius: 4px;

			&:focus {
				border-color: $color-primary;
				box-shadow: 0 0 0 1px $color-primary;
			}
		}
	}

	&__ranges {
		background: #f6f7f7;
		padding: 16px;
		border-radius: 4px;
		border: 1px solid #ddd;
	}

	&__ranges-title {
		font-weight: 500;
		margin-bottom: 12px !important;
		display: block;
		font-size: 12px;
	}

	&__ranges-list {
		gap: 8px !important;
	}

	&__range-row {
		align-items: center;
		justify-content: flex-start !important;
	}

	&__range-label {
		font-weight: 500;
		width: 100px;
		font-size: 12px;
		flex-shrink: 0;
	}

	&__range-value {
		color: #555;
		font-size: 12px;
	}

	&__actions {
		border-top: 1px solid #e0e0e0;
		padding-top: 16px;
	}

	&__save-button {
		flex: 1;
		justify-content: center;
		background: $color-primary !important;
		border-color: $color-primary !important;

		&:hover:not(:disabled) {
			background: $color-primary-hover !important;
			border-color: $color-primary-hover !important;
		}

		&:disabled {
			background: #ddd !important;
			border-color: #ddd !important;
			color: #a0a0a0 !important;
		}
	}

	&__reset-button {
		border-color: $color-primary !important;
		color: $color-primary !important;

		&:hover:not(:disabled) {
			background: rgba($color-primary, 0.05) !important;
		}
	}

	&__footer-note {
		color: #757575;
		font-size: 11px;
	}
}

// モーダルスタイル
.zenblocks-responsive-settings-modal {

	.components-modal__content {
		padding: 16px 24px 24px;
	}

	&__note {
		color: #757575;
		font-size: 12px;
	}

	.components-button.is-primary {
		background: $color-primary !important;
		border-color: $color-primary !important;

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

	.components-button.is-secondary {
		border-color: #757575 !important;
		color: #1e1e1e !important;

		&:hover {
			background: #f0f0f0 !important;
		}
	}
}