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

@layer components {
    .btn-primary {
        @apply bg-primary hover:bg-blue-600 text-white px-4 py-2 rounded-md font-medium text-sm transition-colors shadow-sm;
    }

    .btn-secondary {
        @apply bg-slate-700 hover:bg-slate-600 text-slate-200 px-4 py-2 rounded-md font-medium text-sm transition-colors flex items-center gap-2;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Tree View Styles */
details {
    @apply ml-4 relative;
}

details>summary {
    @apply cursor-pointer select-none list-none -ml-4 pl-4;
}

details>summary::-webkit-details-marker {
    display: none;
    /* Hide default arrow */
}

/* Custom Arrow using before pseudoelement on summary */
details>summary::before {
    content: '▶';
    @apply absolute left-0 text-slate-500 text-[10px] top-[0.4rem] transition-transform duration-200;
}

details[open]>summary::before {
    transform: rotate(90deg);
}

details>summary:hover {
    @apply bg-white/5 rounded-sm;
}

/* Base level details shouldn't have indent on the container itself or arrow */
#tree-output>details {
    @apply ml-0;
}

#tree-output>details>summary {
    @apply pl-4;
}

/* Code coloring */
.json-key {
    @apply text-[#38bdf8] font-medium;
}

/* Light Blue */
.json-string {
    @apply text-[#a3e635];
}

/* Lime */
.json-number {
    @apply text-[#f472b6];
}

/* Pink */
.json-boolean {
    @apply text-[#fbbf24] font-medium;
}

/* Amber */
.json-null {
    @apply text-[#94a3b8] italic;
}

/* Slate */
.json-bracket {
    @apply text-slate-400;
}

.json-comma {
    @apply text-slate-500;
}

/* Tree Vertical Line */
.tree-line {
    @apply border-l border-slate-700 hover:border-slate-500 transition-colors ml-1.5 pl-3;
}