/**
 * No.04 サイドバー開閉ボタン（btn-sidebar）。
 *
 * Figma: btn--sidebar（903:16126）
 * - sticky-head / bottom: SP 用黒帯。data-state=close|open|none でアイコン切替。
 * - sidebar / left|right: PC 用コーナ三角形。none=menu（灰）、hover=angles（青）。
 *   left: menu が右へ退出（枠外+opacity:0）、angles-right が左から入場。
 *   right: menu が左へ退出（枠外+opacity:0）、angles-left が右から入場。
 */

.btn-sidebar {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--base-white);
	font: inherit;
	line-height: 0;
	cursor: pointer;
	appearance: none;
}

.btn-sidebar:focus {
	outline: none;
}

.btn-sidebar .icon,
.btn-sidebar .btn-sidebar__glyph {
	top: 0;
	inline-size: 100%;
	block-size: 100%;
	color: inherit;
}

/* --- sticky-head（SP） --- */

.btn-sidebar[data-type="sticky-head"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--atom--xs);
	min-width: 4rem;
	min-height: 1.5rem;
	padding: var(--wp--custom--atom--xs) var(--wp--custom--molecule--rg);
	border: 1px solid var(--wp--preset--color--base-black);
	border-top-width: 0;
	background-color: var(--wp--preset--color--base-black);
}

.btn-sidebar[data-type="sticky-head"] .btn-sidebar__icon {
	display: block;
	inline-size: 1rem;
	block-size: 1rem;
}

/* close/open 両出力: data-state で切替（ドロワーサブメニューの plus/minus と同型） */
.btn-sidebar[data-type="sticky-head"] .btn-sidebar__icon--open {
	display: none;
}

.btn-sidebar[data-type="sticky-head"][data-state="open"] .btn-sidebar__icon--close {
	display: none;
}

.btn-sidebar[data-type="sticky-head"][data-state="open"] .btn-sidebar__icon--open {
	display: block;
}

/* --- sidebar（PC） --- */

.btn-sidebar[data-type="sidebar"] {
	position: relative;
	display: block;
	width: 3.75rem;
	height: 3.75rem;
	overflow: hidden;
	color: var(--wp--preset--color--base-white);
}

.btn-sidebar[data-type="sidebar"] .btn-sidebar__shape {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: color-mix(
		in srgb,
		var(--wp--preset--color--base-black) 20%,
		var(--wp--preset--color--base-white)
	);
	transition: color var(--hover-duration, 0.3s);
	pointer-events: none;
}

.btn-sidebar[data-type="sidebar"] .btn-sidebar__shape-svg {
	display: block;
	width: 3.75rem;
	height: 3.75rem;
	transform: rotate(-90deg);
	transform-origin: center;
}

.btn-sidebar[data-type="sidebar"][data-position="left"] .btn-sidebar__shape-svg {
	transform: rotate(-90deg) scaleY(-1);
}

/*
 * 初期 HTML は position=right 向け angles-left。
 * 開閉で position=left にしたとき左右反転して angles-right 相当にする。
 */
.btn-sidebar[data-type="sidebar"][data-position="left"] .btn-sidebar__icon--angles {
	transform: scaleX(-1);
}

.btn-sidebar[data-type="sidebar"][data-state="hover"] .btn-sidebar__shape {
	color: var(--wp--preset--color--logo-blue);
}

.btn-sidebar[data-type="sidebar"] .btn-sidebar__track {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.btn-sidebar[data-type="sidebar"] .btn-sidebar__icon {
	position: absolute;
	top: 0.5rem;
	display: block;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	opacity: 1;
	transition:
		left var(--hover-duration, 0.3s),
		opacity var(--hover-duration, 0.3s),
		transform var(--hover-duration, 0.3s);
}

/*
 * SVG 三角形は矩形ボックスの一部のみ塗りつぶすため、枠内の透明域に
 * アイコンが残ると見える。退出側は overflow 外へ逃がし + opacity:0。
 */

/* left: menu 11→60 / angles -27→7 */
.btn-sidebar[data-type="sidebar"][data-position="left"] .btn-sidebar__icon--menu {
	left: 0.6875rem;
}

.btn-sidebar[data-type="sidebar"][data-position="left"] .btn-sidebar__icon--angles {
	left: -1.6875rem;
	opacity: 0;
}

.btn-sidebar[data-type="sidebar"][data-position="left"][data-state="hover"] .btn-sidebar__icon--menu {
	left: 3.75rem; /* 60px: アイコン幅ぶん完全に枠外 */
	opacity: 0;
}

.btn-sidebar[data-type="sidebar"][data-position="left"][data-state="hover"] .btn-sidebar__icon--angles {
	left: 0.4375rem;
	opacity: 1;
}

/* right: menu 35→-18 / angles 69→35 */
.btn-sidebar[data-type="sidebar"][data-position="right"] .btn-sidebar__icon--menu {
	left: 2.1875rem;
}

.btn-sidebar[data-type="sidebar"][data-position="right"] .btn-sidebar__icon--angles {
	left: 4.3125rem;
	opacity: 0;
}

.btn-sidebar[data-type="sidebar"][data-position="right"][data-state="hover"] .btn-sidebar__icon--menu {
	left: -1.125rem; /* -18px: アイコン幅ぶん完全に枠外 */
	opacity: 0;
}

.btn-sidebar[data-type="sidebar"][data-position="right"][data-state="hover"] .btn-sidebar__icon--angles {
	left: 2.1875rem;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.btn-sidebar[data-type="sidebar"] .btn-sidebar__shape,
	.btn-sidebar[data-type="sidebar"] .btn-sidebar__icon {
		transition: none;
	}
}

/* :focus-visible（常時有効） */
.btn-sidebar:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

.btn-sidebar[data-type="sidebar"]:focus-visible .btn-sidebar__shape {
	color: var(--wp--preset--color--logo-blue);
}

.btn-sidebar[data-type="sidebar"][data-position="left"]:focus-visible .btn-sidebar__icon--menu {
	left: 3.75rem; /* 60px: アイコン幅ぶん完全に枠外 */
	opacity: 0;
}

.btn-sidebar[data-type="sidebar"][data-position="left"]:focus-visible .btn-sidebar__icon--angles {
	left: 0.4375rem;
	opacity: 1;
}

.btn-sidebar[data-type="sidebar"][data-position="right"]:focus-visible .btn-sidebar__icon--menu {
	left: -1.125rem; /* -18px: アイコン幅ぶん完全に枠外 */
	opacity: 0;
}

.btn-sidebar[data-type="sidebar"][data-position="right"]:focus-visible .btn-sidebar__icon--angles {
	left: 2.1875rem;
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	.btn-sidebar[data-type="sidebar"]:hover .btn-sidebar__shape {
		color: var(--wp--preset--color--logo-blue);
	}

	.btn-sidebar[data-type="sidebar"][data-position="left"]:hover .btn-sidebar__icon--menu {
		left: 3.75rem; /* 60px: アイコン幅ぶん完全に枠外 */
		opacity: 0;
	}

	.btn-sidebar[data-type="sidebar"][data-position="left"]:hover .btn-sidebar__icon--angles {
		left: 0.4375rem;
		opacity: 1;
	}

	.btn-sidebar[data-type="sidebar"][data-position="right"]:hover .btn-sidebar__icon--menu {
		left: -1.125rem; /* -18px: アイコン幅ぶん完全に枠外 */
		opacity: 0;
	}

	.btn-sidebar[data-type="sidebar"][data-position="right"]:hover .btn-sidebar__icon--angles {
		left: 2.1875rem;
		opacity: 1;
	}

}