@import "./SideNavigationGroup.css";

:host(:not([hidden])) {
	display: inline-block;
	height: 100%;
	min-width: var(--_ui5_side_navigation_width);
	width: var(--_ui5_side_navigation_width);
	max-width: 100%;
	transition: width 0.3s, min-width 0.3s;
	font-family: var(--sapFontFamily);
	font-size: var(--sapFontSize);
	background: var(--sapList_Background);
	box-shadow: var(--_ui5_side_navigation_box_shadow);
	border-inline-end: var(--_ui5_side_navigation_border_right);
	box-sizing: border-box;
}

:host([collapsed]) {
	min-width: var(--_ui5_side_navigation_collapsed_width);
	width: var(--_ui5_side_navigation_collapsed_width);
}

@media (width < 600px) {
	:host(:not([hidden])) {
		width: 100%;
	}
}


.ui5-sn-root {
	height: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: inherit;
	border-radius: inherit;
}

.ui5-sn-flexible {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	position: relative;
	box-sizing: border-box;
}

.ui5-sn-fixed {
	position: relative;
}

.ui5-sn-list {
	margin: 0;
	list-style: none;
	box-sizing: border-box;
	overflow: hidden auto;
}

.ui5-sn-list.ui5-sn-flexible {
	padding: var(--_ui5_side_navigation_padding-flexible);
}

.ui5-sn-list.ui5-sn-fixed {
	padding: var(--_ui5_side_navigation_padding-fixed);
}

.ui5-sn-collapsed .ui5-sn-list {
	overflow: visible;
	display: flex;
	flex-direction: column;
}

:host([in-popover]) .ui5-sn-list {
	padding: var(--_ui5_side_navigation_popup_padding);
}

.ui5-sn-item-overflow {
	margin-top: auto;
}