/* Code Preview Component Styles */

/* Container */
.code-preview {
    @apply border border-gray-200 rounded-lg overflow-hidden bg-white;
}

/* Tab container */
.code-preview-tabs {
    @apply p-3 border-b border-gray-200 bg-gray-50;
}

/* Content area */
.code-preview-content {
    @apply bg-white;
}

/* Preview panel */
.code-preview-panel {
    @apply p-4;
}

/* Code panel specific */
.code-preview-panel pre {
    @apply m-0 p-3 bg-white overflow-x-auto;
}

.code-preview-panel pre code {
    @apply text-sm font-mono;
}

/* Make badges in preview tabs look clickable */
.code-preview-tabs .badge {
    @apply cursor-pointer transition-all;
}

.code-preview-tabs .badge:hover:not(.active) {
    @apply bg-gray-200;
}

/* Active state for preview/code badges */
.code-preview-tabs .badge.active {
    @apply bg-blue-100 text-blue-700 border-blue-200;
}

/* Copy button hover state */
.code-preview-tabs .copy-button:hover {
    @apply bg-gray-200;
}

/* Success state for copy button */
.code-preview-tabs .badge.positive {
    @apply bg-green-100 text-green-700 border-green-200;
}

/* Section spacing */
.example-section {
    @apply mb-8;
}

/* Ensure icon spacing in badges */
.code-preview-tabs .badge .icon {
    @apply mr-1;
}

/* Prism.js overrides for clean look */
.code-preview-panel pre[class*="language-"] {
    @apply bg-white m-0 p-3;
    background: none !important;
}

.code-preview-panel code[class*="language-"] {
    @apply bg-transparent text-gray-800;
    background: none !important;
}

/* Remove any Prism default backgrounds */
.code-preview-panel pre[class*="language-"]::selection,
.code-preview-panel pre[class*="language-"] ::selection,
.code-preview-panel code[class*="language-"]::selection,
.code-preview-panel code[class*="language-"] ::selection {
    background: rgba(59, 130, 246, 0.15);
}

/* Token colors for syntax highlighting */
.token.tag { @apply text-blue-600; }
.token.attr-name { @apply text-purple-600; }
.token.attr-value { @apply text-green-600; }
.token.string { @apply text-green-600; }
.token.punctuation { @apply text-gray-600; }
.token.comment { @apply text-gray-500 italic; }
.token.keyword { @apply text-purple-600 font-semibold; }
.token.function { @apply text-blue-600; }
.token.boolean,
.token.number { @apply text-orange-600; }
.token.selector { @apply text-purple-600; }
.token.property { @apply text-blue-600; }
.token.class-name { @apply text-yellow-600; }