// 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: 0.95rem;
            padding: 0.5em 12px;
            border-right: 2px solid rgba(0,0,0,0);
            height: 3em;

            &:hover {
                background-color: $sidebar-link-hover-bg-color;
                border-right: 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: 20px 0;
    display: flex;
    flex-direction: column;
    //gap: 1rem;

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

        .repo-logo {
            //background-color: #f0f0f0;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            border: 2px solid #7390df;

            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;
            }
        }
    }

    .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;

    }
}