/* Custom classes and overrides */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent; 
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #30363D; 
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #484F58; 
}

/* Grid Cell Styles */
.git-cell {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    outline: 1px solid rgba(27, 31, 35, 0.06);
    outline-offset: -1px;
    transition: transform 0.1s ease-out, filter 0.2s, background-color 0.1s;
    user-select: none;
    -webkit-user-drag: none;
}

.dark .git-cell {
    outline: 1px solid rgba(255, 255, 255, 0.05); /* very subtle dark mode outline */
}

.git-cell:hover {
    transform: scale(1.15);
    z-index: 10;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.git-cell.is-off-year {
    opacity: 0.1;
    pointer-events: none; /* Can't paint outside the year's boundary depending on layout, though GitHub grid is roughly 53 weeks starting Sunday */
}

/* Base states */
.git-cell[data-level="0"] { @apply bg-level0; } /* usually #ebedf0 in light mode, #161b22 in dark */
.git-cell[data-level="1"] { @apply bg-level1; }
.git-cell[data-level="2"] { @apply bg-level2; }
.git-cell[data-level="3"] { @apply bg-level3; }
.git-cell[data-level="4"] { @apply bg-level4; }

html:not(.dark) .git-cell[data-level="0"] { background-color: #ebedf0; }
html:not(.dark) .git-cell[data-level="1"] { background-color: #9be9a8; }
html:not(.dark) .git-cell[data-level="2"] { background-color: #40c463; }
html:not(.dark) .git-cell[data-level="3"] { background-color: #30a14e; }
html:not(.dark) .git-cell[data-level="4"] { background-color: #216e39; }

/* Code syntax highlghts */
.token-comment { color: #8b949e; }
.token-command { color: #79c0ff; }
.token-string { color: #a5d6ff; }
.token-punct { color: #c9d1d9; }