/*༻✿.clickdion, .hoverdion：CSS
࿐༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶❀༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶༄ */
/* コンテンツ部分の基本設定（高さの開閉はJSがアニメーションさせる） */
:is(.clickdion, .hoverdion) :is(.dion-content, .sub-menu):not(.is-opened) {
	margin-block: 0 !important;
	padding-block: 0 !important;
	border-block-width: 0 !important;
}

:is(.clickdion, .hoverdion) :is(.dion-content, .sub-menu) {
	overflow: hidden;
	height: 0;
}


/* ━━━━━━━━━━━━━━━━━━━
カーソル制御
༻❧⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶❀༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶☙༺*/

/* リンク内のスイッチがある場合、リンク自体は無効化 */
:is(.clickdion, .hoverdion) a:has(.dion-switch) {
	pointer-events: none;
	cursor: default;
}

/* スイッチ自体はクリック可能 */
:is(.clickdion, .hoverdion) .dion-switch {
	pointer-events: auto;
	cursor: pointer;
}

/* ━━━━━━━━━━━━━━━━━━━
トリガー部分（.dion-summary, >a）の配置
༻❧⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶❀༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶☙༺*/

:is(.clickdion, .hoverdion) :is(.dion-summary, .menu-link) {
	position: relative;
}

/* スイッチ・ステータスアイコンの共通配置 */
:is(.clickdion, .hoverdion) :is(.dion-summary, .menu-link) :is(.dion-switch, .dion-status) {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 44px;
	height: 44px;
}

:is(.clickdion, .hoverdion) :is(.dion-summary, .menu-link) :is(.dion-switch, .dion-status)::before {
	position: relative;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 0;
	height: 0;
	font-size: 133.3%;
	/* Material Symbols */
	font-family: "Material Symbols Sharp";
	font-variation-settings: "FILL" 0, "wght" 200;
}

/* ━━━━━━━━━━━━━━━━━━━
.dion-switch アイコン（矢印）
༻❧⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶❀༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶☙༺*/

:is(.clickdion, .hoverdion) :is(.dion-summary, .menu-link) .dion-switch::before {
	content: "\e313";
	transition: rotate 0.3s ease-out;
}

:is(.clickdion, .hoverdion) :is(.dion-summary, .menu-link) .dion-switch.is-active::before {
	rotate: -180deg;
}

/* ━━━━━━━━━━━━━━━━━━━
.dion-status アイコン（+/-）
༻❧⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶❀༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶☙༺*/

:is(.clickdion, .hoverdion) .dion-switch .dion-status::before {
	content: "\e145";
}

:is(.clickdion, .hoverdion) .dion-switch.is-active .dion-status::before {
	content: "\e15b";
}

/* ━━━━━━━━━━━━━━━━━━━
.dion-label ラベル付けする文字列
༻❧⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶❀༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶☙༺*/

:is(.clickdion, .hoverdion) .dion-switch .dion-label::before {
	content: attr(data-closed);
}

:is(.clickdion, .hoverdion) .dion-switch.is-active .dion-label::before {
	content: attr(data-opened);
}