// Color Variables
$sidebar-bg-color: #1a1a1a;
$sidebar-text-color: #f0f0f0;
$sidebar-link-hover-bg-color: #333;
$sidebar-border-color: #444;
$sidebar-author-color: #bfbfbf;
$stat-bg-color: #333;
$stat-text-color: #f0f0f0;
$stat-count-color: #f0f0f0;
$settings-link-hover-bg-color: #333;

@mixin sidbar-left-nav-links {
	display: flex;
	align-items: center;
	gap: 10px;
	color: $sidebar-text-color;
	text-decoration: none;
	font-size: 15px;
	padding: 0.75em 12px;
	border-left: 2px solid rgba(0,0,0,0);

	&:hover {
		background-color: $sidebar-link-hover-bg-color;
		border-left: 2px solid wheat;
	}

	i {
		font-size: 1em;
		width: 1em;
		height: 1em;
		text-align: center;
	}
}

.sidebar-right {
	width: 250px;
	background-color: $sidebar-bg-color;
	color: $sidebar-text-color;
	padding: 0;
	display: flex;
	flex-direction: column;

	.repo-info {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 8px 12px;
		border-bottom: 2px solid cadetblue;

		.repo-logo {
			//background-color: #f0f0f0;
			width: 39px;
			height: 39px;
			border-radius: 50%;
			display: flex;
			padding: 2px;
			background-color: black;

			img {
				width: 35px;
				height: 35px;
				border-radius: 50%;
				//color: green;
				line-height: 35px;
				text-align: center;
				font-size: 23px;

				font-family: 'Font Awesome 6 Free';
				font-style: normal;
				font-weight: 400;
				font-display: block;
				src: url('../fonts/fa-regular-400.woff2') format('woff2'),
				url('../fonts/fa-regular-400.ttf') format('truetype');
			}
		}

		.repo-details {
			.repo-author {
				font-size: 0.9rem;
				color: $sidebar-author-color;
				display: block;
			}

			.repo-name {
				font-size: 1.1rem;
				font-weight: bold;
				display: block;
			}
		}

		&:hover {
			.repo-logo {
				//border: 2px solid #9b9b9b;
				background-color: #9b9b9b;
			}
		}
	}

	.repo-nav {
		display: flex;
		flex-direction: column;
		//gap: 0.3rem;

		.nav-link {
			@include sidbar-left-nav-links;
		}
	}

	.repo-stats {
		display: flex;
		gap: 0.5rem;
		padding: 7px 12px;

		.stat-item {
			display: flex;
			align-items: center;
			gap: 3px;
			background-color: $stat-bg-color;
			padding: 0.3rem 0.5rem;
			border-radius: 1rem;
			color: $stat-text-color;
			font-size: 0.8rem;
			height: 1.4rem;

			.stat-icon {
				font-size: 0.9em;
			}

			.stat-count {
				color: $stat-count-color;
				min-width: 4ch;
				text-align: right;
			}

			&:hover {
				background-color: #444;
				color:#1b97ff;
			}
		}
	}

	.settings-link {
		@include sidbar-left-nav-links;
		margin-top: auto;

	}
}