:host {
	display: none;
	position: absolute;
	top: 0;
	right: 4px;
	cursor: pointer;
	z-index: 999;
	height: 20px;
	width: 64px;

	button {
		cursor: pointer;
		border: none;
		outline: none;
		padding: 0;
		user-select: none;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		background-color: #666;
		height: 100%;
		width: 100%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: auto;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="silver" class="bi bi-box-arrow-in-down-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M9.636 2.5a.5.5 0 0 0-.5-.5H2.5A1.5 1.5 0 0 0 1 3.5v10A1.5 1.5 0 0 0 2.5 15h10a1.5 1.5 0 0 0 1.5-1.5V6.864a.5.5 0 0 0-1 0V13.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/> <path fill-rule="evenodd" d="M5 10.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 0-1H6.707l8.147-8.146a.5.5 0 0 0-.708-.708L6 9.293V5.5a.5.5 0 0 0-1 0z"/> </svg>');
		transition: all 0.3s ease;
	}
	button:hover {
		background-color: #777;            /* 진한 배경으로 강조 */
		box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* 입체감 glow */
		transform: scale(1.05);            /* 약간 확대 */
	}
}


@keyframes bounceInUp {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateY(-20px);
		opacity: 0;
	}
}

:host(.nx-expand) {
	display: inline-block;
	animation: bounceInUp 0.4s ease-out forwards;
}

@keyframes bounceDown {
	0% {
		transform: translateY(-20px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

:host(.nx-collapse) {
	display: inline-block;
	animation: bounceDown 0.7s ease-out forwards;
}