@import './mixins/scrollbar.scss';

:root {
	--active-sidebar-link: var(--theme-530);
	--active-sidebar-link-hover: var(--theme-500);
}

.sidebar {
	--c-bg-scrollbar: #ededed;
	top: 4rem;
	font-size: 14px;
	border-right-width: 0;
	transition: transform 0.2s ease;
	@include customScrollbar();

	@media (max-width: 719px) {
		top: 0;
		padding-top: 4rem;
	}

	.navbar-links {
		@media (max-width: 959px) {
			display: block;
			padding: 0.5rem;
		}

		.navbar-links-item {
			@media (max-width: 959px) {
				margin-left: 0;
				padding-left: 1.25rem;

				& > a {
					margin-bottom: 0;
					border-bottom-width: 0;

					&:hover,
					&.router-link-active {
						color: var(--c-text-accent);
						border-bottom-width: 0;
					}
				}
			}
		}
	}

	& > .sidebar-links {
		padding: 1.25rem 0.5rem;

		@media (max-width: 719px) {
			padding: 0.5rem;
		}

		.sidebar-group {
			&.sidebar-group-collapsed {
				.sidebar-heading .menu-icon {
					transform: rotate(-90deg);
				}
			}
		}

		.sidebar-heading {
			font-weight: 700;
			font-size: 1em;
			border-left-width: 0;
			text-transform: uppercase;
		}

		button.sidebar-heading {
			background: none;
			display: inline-flex;
			align-items: center;
			border: none;
			cursor: pointer;

			.menu-icon {
				width: 1.5em;
				height: 1.5em;
			}
		}

		.sidebar-item:not(.sidebar-heading) {
			border-radius: 0.125rem 0 0 0.125rem;

			&.active {
				color: var(--active-sidebar-link);
				border-left-width: 0.25rem;
				border-left-color: var(--active-sidebar-link);
			}

			&:hover,
			&.active:hover {
				color: var(--active-sidebar-link-hover);
				border-left-color: var(--active-sidebar-link-hover);
			}
		}
	}
}

html.dark .sidebar {
	--c-bg-scrollbar: #171717;
}
