/*<meta />*/

/*Styles used to slide left nav in and out. Use with side-nav theme and tiled landing pages*/
/*Use in conjunction with js/slide-nav.js*/

@import url('../css-variables.css');

/* Toggle button container styling */

.toggle-container
{
	position: absolute;
	top: 8px;
	right: -44px;
	width: 32px;
	height: 32px;
	z-index: 10;
	padding: 8px;
	background-color: var(--background-neutral-weakest);
	border: 1px solid var(--border-neutral-default);
	border-radius: 4px;
}

/* Menu toggle icon styling */

.menu-toggle
{
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
	color: var(--icon-neutral-default);
}

.menu-toggle svg
{
	transition: transform 0.3s ease;
	display: block;
	transform: scaleX(-1);
	/* Start flipped by default */
}

.menu-toggle svg path
{
	fill: currentColor;
}

/* Remove transform when closed */

.sidebar-outer.closed .menu-toggle svg
{
	transform: none;
}

.sidebar-outer
{
	width: 25%;
	max-width: 400px;
	position: relative;
	transition: width 0.25s;
}

.sidebar-outer.closed
{
	width: 0;
	overflow: visible;
}

.sidebar-outer.closed .toggle-container
{
	right: -44px;
}

/* Keep submenu toggles visible and positioned correctly */

.sidebar-outer.closed .submenu-toggle-container
{
	position: absolute;
	right: -24px;
	/* Adjust based on your design */
}

.tree-node .is-accordion-submenu-parent:first-child
{
	margin-top: 10px;
}

/* Media queries for responsive behavior */

@media only screen and (max-width: 1279px)
{
	.toggle-container
	{
		display: none;
	}
}