@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .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: #64748B;
    }
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.challenge-item {
    transition: all 0.2s ease;
}

.challenge-item:hover,
.challenge-item.active {
    background-color: #161B22;
}

.challenge-item.active {
    border-left: 3px solid #10B981;
}

.scale-out {
    animation: scaleOut 1.5s ease forwards;
}

@keyframes scaleOut {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    20% {
        transform: scale(1.2);
        opacity: 1;
    }

    80% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

#code-editor {
    tab-size: 2;
}