/* =================================================================== */
/* 既存の共通スタイルとアイコンの基本設定 */
/* =================================================================== */

/* 個々のアイコンの基本スタイル */
span.haup-block-toolbar-icons {
	border: 1px solid #eee;
	padding: 2px;
	font-size: 24px;
	font-weight: 500;
}

/* ドロップダウンメニュー内のボタンの最小幅調整 */
.haup-custom-icon-panel .components-button.has-icon.is-next-40px-default-size {
	min-width: 24px;
}

/* フォーカス時のアウトラインリセット */
.haup-custom-icon-panel .components-button:focus:not(:disabled) {
	box-shadow: none;
	outline: unset;
}

/* 特定アイコンのサイズ調整 */
.components-dropdown.components-dropdown-menu .icon-cat09 {
	font-size: 28px;
}

.components-dropdown.components-dropdown-menu .icon-ha-cat06 {
	font-size: 40px;
}

/* =================================================================== */
/* グループボタンの横展開とアニメーション (①, ②) */
/* =================================================================== */

/* ツールバー内のグループコンテナ */
.components-toolbar .haup-icon-group {
	width: 28px; 
	transition: width 0.25s ease-out; 
	background: transparent;
	position: relative; 
}

/* 展開前の代表アイコン (::before) の見た目 */
.components-toolbar .haup-icon-group::before {
	content: "\e921";
	font-family: hauicon;
	font-size: 24px;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 100%;

	position: absolute; 
	left: 0; 
	opacity: 1;
	cursor: pointer;
	pointer-events: auto;
	transition: opacity 0.25s ease-out, transform 0.25s ease-out; 
}

/* 各グループボタン（子ボタン）の初期状態 (非表示) */
/* ここは変更なし */
.components-toolbar .haup-icon-group .components-dropdown-menu__toggle {
	font-size: 24px;

	opacity: 0;
	pointer-events: none; 
	transition: opacity 0.25s ease-out;
	display: flex;
}

/* ホバー時の親ボタンコンテナの状態 */
.components-toolbar .haup-icon-group:hover {
	width: auto;
	z-index: 1000;
	background: #e4f8b3;
	border: 1px solid;
}

/* ホバー時に代表アイコン（::before）を移動させて隠す */
.components-toolbar .haup-icon-group:hover::before {
	opacity: 0;
	pointer-events: none;
	transform: translateX(28px); 
}

/* ホバー時に各グループボタンをゆっくり表示 */
.components-toolbar .haup-icon-group:hover .components-dropdown-menu__toggle {
	opacity: 1;
	pointer-events: auto;
}

/* ★★★ 最重要修正箇所：最初の DropdownMenu 全体を左にずらし、重なりを解消 ★★★ */
.components-toolbar .haup-icon-group:hover 
.components-dropdown-menu:first-child {
	/* DropdownMenu のコンテナ自体に負のマージンを適用 */
	margin-left: -2px; 
}

.components-toolbar.haup-icon-group {
	width: 48px;
	left: 8px;
}

/* =================================================================== */
/* ドロップダウンメニュー（アイコン一覧）の開閉アニメーション (③, ④) */
/* =================================================================== */

.haup-custom-icon-panel-small .components-popover__content {
	width: 480px;
	display: flex;
	flex-wrap: wrap;

	/* 開閉をスムーズにするための初期状態 */
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
}

/* Popover が開いた状態のアニメーション */
.components-popover.is-open .haup-custom-icon-panel-small .components-popover__content {
	max-height: 500px; /* コンテンツが収まる十分な高さ */
	padding-top: 10px;
	padding-bottom: 10px;
}

.haup-icon-group .components-dropdown.components-dropdown-menu:hover {
	color: #fff;
	background: #7fa12d;
}

.haup-icon-group button.components-button.components-dropdown-menu__toggle.has-icon:hover {
	color: #fff;
}