// clean-this-file
:root {
	--sidebar-hover-color: #f3f3f3;
	--sidebar-active-color: rgba(255, 255, 255, 1);
	--sidebar-border-color: #ededed;
	--divider-color: rgba(237, 237, 237, 1);
	--sidebar-width: 220px;
}
[data-theme="dark"] {
	--sidebar-hover-color: rgba(43, 43, 43, 1);
	--sidebar-active-color: rgba(66, 66, 66, 1);
	--sidebar-border-color: #232323;
	--divider-color: rgba(52, 52, 52, 1);
}

// sidebar-item states
@mixin hover-mixin {
	background-color: var(--sidebar-hover-color);
	border-radius: 8px;
	text-decoration: none;
}

.body-sidebar-container {
	display: flex;
	flex-direction: column;
	height: fit-content;
	width: fit-content;

	.body-sidebar-placeholder {
		display: none;
		width: 50px;
		height: 100vh;
	}
}

.body-sidebar {
	position: relative;
	width: 50px;
	background: var(--surface-menu-bar);
	border-right: 1px solid var(--sidebar-border-color);
	transition-property: all;
	transition-duration: 0.3s;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	// @include transition(all, 0.3s ,cubic-bezier(0.4, 0, 0.2, 1));

	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100vh;
	z-index: 1020;
	padding: 8px 8px 10px 8px;

	.body-sidebar-top {
		flex: 1 1;
		padding: 1px;
		width: auto;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		flex-wrap: nowrap;

		gap: 2px;
		overflow-y: auto;
		position: static;
		font-size: var(--text-base);
		@include transition(all, 0.3s, cubic-bezier(0.4, 0, 0.2, 1));
		// transition: width 200ms;
		.sidebar-items {
			width: 100%;
			@include transition(all, 0.3s, cubic-bezier(0.4, 0, 0.2, 1));
		}
	}

	.body-sidebar-bottom {
		padding: 0px;
		width: 100%;
	}

	.divider {
		margin: var(--margin-xs) 0;
		border-top: 1px solid var(--gray-300);
		width: 100%;
	}

	.standard-sidebar-item {
		display: flex;
		position: relative;
		@include transition(all, 0.3s, cubic-bezier(0.4, 0, 0.2, 1));

		margin-bottom: 1px;
		.sidebar-item-control {
			.drop-icon {
				width: 28px;
				height: 28px;
				text-align: center;
			}
		}

		&:not(.active-sidebar):has(a:not(.section-break)):hover {
			@include hover-mixin();
		}

		.sidebar-item-label {
			@include truncate();
			font-size: var(--text-sm);
			display: block;
			flex: 1 1 auto;
			align-items: center;
			@include transition(all, 0.3s, cubic-bezier(0.4, 0, 0.2, 1));
			cursor: pointer;
		}
		.item-anchor {
			@include truncate();
			display: flex;
			gap: 2px;
			align-items: center;
			// padding: 3px 0px 3px 11px;
			flex: 1;
			height: 30px;
			color: var(--ink-gray-8);
			text-decoration: none;
			@include transition(all, 0.3s, cubic-bezier(0.4, 0, 0.2, 1));
			.sidebar-item-icon {
				padding: 7px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.promotional-banners {
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin: var(--margin-sm) 0;
	}

	.onboarding-sidebar,
	.promotional-banner {
		text-decoration: none;
		font-size: var(--text-sm);
		display: flex;
		align-items: center;
		svg {
			margin: 0px;
			flex: 0 0 auto;
		}
		span {
			margin-left: 10px;
			@include truncate();
		}
	}

	.nav-item {
		padding: 4px 0px;
	}

	.standard-items-sections {
		.dropdown-notifications {
			.notifications-list {
				left: 100%;
			}
		}
	}
}

@mixin body-sidebar-expanded {
	.body-sidebar {
		// make it an overlay on hover
		position: absolute;
		width: var(--sidebar-width);

		.collapse-sidebar-link {
			text-decoration: none;
			font-size: var(--text-sm);
			display: flex;
			align-items: center;
			svg {
				margin: 0px;
				flex: 0 0 auto;
			}
			span {
				margin-left: 10px;
				@include truncate();
			}
			@include transition(all, 0.3s, cubic-bezier(0.4, 0, 0.2, 1));
		}

		.nav-item {
			padding: 4px 8px;
		}

		.dropdown-navbar-user {
			&:hover {
				@include hover-mixin();
			}

			.sidebar-user-button {
				border-radius: var(--border-radius-sm);
			}
		}
	}

	// show placeholder so that main section remains static
	.body-sidebar-placeholder {
		display: flex;
		width: var(--sidebar-width);
	}
	.sidebar-resize-handle {
		cursor: w-resize;
	}
}

.body-sidebar-container.expanded {
	@include body-sidebar-expanded();
}

@include media-breakpoint-down(sm) {
	// body sidebar hidded in mobile view
	.body-sidebar-container {
		.body-sidebar {
			padding: 0px;
			width: 0px;
			overflow: hidden;
			transition-property: none;
			.standard-items-sections {
				.dropdown-notifications {
					.notifications-list {
						left: 0;
					}
				}
			}
		}
	}

	// expands when navbar-brand is clicked
	.body-sidebar-container.expanded {
		position: relative;
		.body-sidebar {
			padding: 8px 8px 10px 8px;
			width: var(--sidebar-width);
			height: 100%;
			position: absolute;
			bottom: 0;
			top: 0;
		}
		.overlay {
			display: block;
			position: absolute;
			width: calc(100vw - var(--sidebar-width));
			height: 100%;
			z-index: 1021;
			left: var(--sidebar-width);
			overflow: auto;
			background-color: rgba(128, 128, 128, 0.5);
		}

		// acts a overlay when in mobile view
		.body-sidebar-placeholder {
			display: flex;
			width: 0px;
		}
	}
}

.hover {
	@include hover-mixin();
}

.active-sidebar {
	background: var(--sidebar-active-color);
	box-shadow: var(--shadow-sm);
	border-radius: 8px;
	:hover {
		text-decoration: none;
	}
}

.overlay {
	display: none;
}

.sidebar-resize-handle {
	position: absolute;
	top: 0;
	right: -4px;
	width: 8px;
	height: 100%;
	z-index: 1022;
	cursor: e-resize;

	&::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		width: 2px;
		height: 100%;
		background: transparent;
		transition: background 0.15s ease;
	}

	&:hover::after {
		background: var(--ink-gray-2);
	}
}
.section-break {
	color: var(--ink-gray-5) !important;
	margin-left: 7px;
	gap: 0px !important;
}
.section-item {
	.standard-sidebar-item {
		align-items: center;
	}
}
.bottom-edit-controls {
	display: flex;
	gap: 35%;
}
.body-sidebar-container[data-mode="edit"] {
	.standard-sidebar-item:hover {
		& .sidebar-item-edit-controls {
			visibility: visible;
		}
	}
	.promotional-banners,
	.dropdown-navbar-user {
		display: none;
	}
}
.sidebar-item-edit-controls {
	visibility: hidden;
	position: absolute;
	right: 0;
	display: flex;
	gap: 6px;
}
.standard-sidebar-item[data-name="add-sidebar-item"] {
	margin-top: 5px;
	width: 100%;
	& .sidebar-item-label {
		color: var(--ink-gray-5) !important;
	}
}

.menu-icon {
	margin: 0px !important;
}
.indent {
	.sidebar-item-control {
		margin-left: auto;
	}
}
.indent + .nested-container {
	margin-left: 16px;
}
.sidebar-item-suffix {
	margin-left: auto;
	padding: 7px;
	.keyboard-shortcut {
		color: var(--ink-gray-4, #999999);
		font-size: var(--text-sm);
		line-height: 1.15;
		letter-spacing: 0.02em;
		font-weight: 420;
	}
}
