:root {
    --sl-content-width: 50rem;
    --sl-text-5xl: 3.5rem;
    --sl-font-system-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", "Roboto Mono", "Source Code Pro", monospace;
}

:root[data-theme='light'] {
    --badge-bg-default: #eef2f7;
    --badge-border-default: #cbd5e1;
    --badge-text-default: #0f172a;

    --badge-bg-selected: #e0e7ff;
    --badge-border-selected: #4f46e5;
    --badge-text-selected: #1e293b;

    --badge-get-bg: #dbeafe;
    --badge-get-border: #3b82f6;
    --badge-get-text: #1e40af;

    --badge-post-bg: #dcfce7;
    --badge-post-border: #22c55e;
    --badge-post-text: #166534;

    --badge-put-bg: #e9d5ff;
    --badge-put-border: #a855f7;
    --badge-put-text: #6b21a8;

    --badge-patch-bg: #fef3c7;
    --badge-patch-border: #f59e0b;
    --badge-patch-text: #92400e;

    --badge-delete-bg: #fee2e2;
    --badge-delete-border: #ef4444;
    --badge-delete-text: #991b1b;

    --sl-openapi-method-bg-get: var(--badge-get-bg) !important;
    --sl-openapi-method-border-get: var(--badge-get-border) !important;
    --sl-openapi-method-bg-post: var(--badge-post-bg) !important;
    --sl-openapi-method-border-post: var(--badge-post-border) !important;
    --sl-openapi-method-bg-put: var(--badge-put-bg) !important;
    --sl-openapi-method-border-put: var(--badge-put-border) !important;
    --sl-openapi-method-bg-patch: var(--badge-patch-bg) !important;
    --sl-openapi-method-border-patch: var(--badge-patch-border) !important;
    --sl-openapi-method-bg-delete: var(--badge-delete-bg) !important;
    --sl-openapi-method-border-delete: var(--badge-delete-border) !important;
}

:root[data-theme='dark'] {
    --badge-bg-default: #111827;
    --badge-border-default: #374151;
    --badge-text-default: #e5e7eb;

    --badge-bg-selected: #1f2937;
    --badge-border-selected: #818cf8;
    --badge-text-selected: #e5e7eb;

    --badge-get-bg: #0c4a6e;
    --badge-get-border: #38bdf8;
    --badge-get-text: #bae6fd;

    --badge-post-bg: #052e16;
    --badge-post-border: #22c55e;
    --badge-post-text: #bbf7d0;

    --badge-put-bg: #4c1d95;
    --badge-put-border: #a78bfa;
    --badge-put-text: #ddd6fe;

    --badge-patch-bg: #78350f;
    --badge-patch-border: #fbbf24;
    --badge-patch-text: #fde68a;

    --badge-delete-bg: #7f1d1d;
    --badge-delete-border: #f87171;
    --badge-delete-text: #fecaca;

    --sl-openapi-method-bg-get: var(--badge-get-bg) !important;
    --sl-openapi-method-border-get: var(--badge-get-border) !important;
    --sl-openapi-method-bg-post: var(--badge-post-bg) !important;
    --sl-openapi-method-border-post: var(--badge-post-border) !important;
    --sl-openapi-method-bg-put: var(--badge-put-bg) !important;
    --sl-openapi-method-border-put: var(--badge-put-border) !important;
    --sl-openapi-method-bg-patch: var(--badge-patch-bg) !important;
    --sl-openapi-method-border-patch: var(--badge-patch-border) !important;
    --sl-openapi-method-bg-delete: var(--badge-delete-bg) !important;
    --sl-openapi-method-border-delete: var(--badge-delete-border) !important;
}

.sl-badge {
    --sl-color-bg-badge: var(--badge-bg-default);
    --sl-color-border-badge: var(--badge-border-default);
    color: var(--badge-text-default);
    font-family: var(--sl-font-system, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif) !important;
    font-weight: 600;
}

.sidebar-content a[aria-current='page'] .sl-badge {
    --sl-color-bg-badge: var(--badge-bg-default) !important;
    --sl-color-border-badge: var(--badge-border-default) !important;
    color: var(--badge-text-default) !important;
}

.sl-openapi-method-get {
    --sl-color-bg-badge: var(--badge-get-bg);
    --sl-color-border-badge: var(--badge-get-border);
    color: var(--badge-get-text);
}

.sl-openapi-method-post {
    --sl-color-bg-badge: var(--badge-post-bg);
    --sl-color-border-badge: var(--badge-post-border);
    color: var(--badge-post-text);
}

.sl-openapi-method-put {
    --sl-color-bg-badge: var(--badge-put-bg);
    --sl-color-border-badge: var(--badge-put-border);
    color: var(--badge-put-text);
}

.sl-openapi-method-patch {
    --sl-color-bg-badge: var(--badge-patch-bg);
    --sl-color-border-badge: var(--badge-patch-border);
    color: var(--badge-patch-text);
}

.sl-openapi-method-delete {
    --sl-color-bg-badge: var(--badge-delete-bg);
    --sl-color-border-badge: var(--badge-delete-border);
    color: var(--badge-delete-text);
}

.sidebar-content a:has(.sl-badge) {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.sidebar-content a:has(.sl-badge) .sl-badge {
    margin-left: auto;
}

:root[data-theme='light'] .method-path .method {
    color: var(--badge-text-default) !important;
}

:root[data-theme='light'] .method-path .method.get {
    color: var(--badge-get-text) !important;
}

:root[data-theme='light'] .method-path .method.post {
    color: var(--badge-post-text) !important;
}

:root[data-theme='light'] .method-path .method.put {
    color: var(--badge-put-text) !important;
}

:root[data-theme='light'] .method-path .method.patch {
    color: var(--badge-patch-text) !important;
}

:root[data-theme='light'] .method-path .method.delete {
    color: var(--badge-delete-text) !important;
}