.sd-codetabs {
	overflow: hidden;
	margin-bottom: 20px;
	padding: 32px;
	border-radius: var(--sd-radius-sm);
	background: var(--sd-code-bg);
}

@media (max-width: 768px) {
	.sd-codetabs {
		padding: 16px 12px;
	}
}

.sd-codetabs__bar {
	display: flex;
	overflow-x: auto;
	align-items: center;
	margin-bottom: 16px;
	padding: 2px;
	background: transparent;
	gap: 16px;
}

.sd-codetabs__tab {
	font: inherit;
	font-size: 14px;
	line-height: 1;
	padding: 12px 16px;
	cursor: pointer;
	white-space: nowrap;
	color: var(--sd-text-soft);
	border: 1px solid var(--sd-border-strong);
	border-radius: 8px;
	background: transparent;
}

.sd-codetabs__tab:hover {
	color: var(--sd-text);
}

.sd-codetabs__tab.is-active {
	color: var(--sd-text-inverse);
	background: var(--sd-accent);
	border-color: var(--sd-accent);
}

.sd-codetabs__copy {
	font: inherit;
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	padding: 0;
	cursor: pointer;
	color: var(--sd-text-soft);
	border: 0;
	border-radius: 6px;
	background: transparent;
	gap: 6px;
}

.sd-codetabs__copy:hover svg {
	color: var(--sd-accent);
}

.sd-codetabs__copy.is-copied svg {
	color: var(--sd-post);
}

.sd-codetabs__copy-label {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	white-space: nowrap;
	border: 0;
	clip-path: inset(50%);
}

.sd-codetabs__copy.is-copied .sd-codetabs__copy-label {
	font-size: 14px;
	position: static;
	overflow: visible;
	width: auto;
	height: auto;
	margin: 0;
	clip-path: none;
}

.sd-codetabs__copy.is-copied {
	color: var(--sd-post);
}

.sd-codetabs__status {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	white-space: nowrap;
	border: 0;
	clip-path: inset(50%);
}

.sd-codetabs__panels {
	overflow-x: auto;
	min-height: 100%;
}

.sd-codetabs__panel {
	display: none;
	overflow-x: auto;
	margin: 0;
	background: transparent;
}

.sd-codetabs__panel.is-active {
	display: block;
}

.sd-codetabs__panel code {
	font-family: var(--sd-mono);
	font-size: 14px;
	line-height: 1.6;
	padding: 0;
	color: var(--sd-text);
	background: none;
}

.sd-docs .hljs {
	padding: 0;
	color: var(--sd-text);
	background: transparent;
}

.sd-docs .hljs-doctag,
.sd-docs .hljs-keyword,
.sd-docs .hljs-meta .hljs-keyword,
.sd-docs .hljs-template-tag,
.sd-docs .hljs-template-variable,
.sd-docs .hljs-type,
.sd-docs .hljs-variable.language_ {
	color: #CF222E;
}

.sd-docs .hljs-title,
.sd-docs .hljs-title.class_,
.sd-docs .hljs-title.class_.inherited__,
.sd-docs .hljs-title.function_ {
	color: #8250DF;
}

.sd-docs .hljs-attr,
.sd-docs .hljs-attribute,
.sd-docs .hljs-literal,
.sd-docs .hljs-meta,
.sd-docs .hljs-number,
.sd-docs .hljs-operator,
.sd-docs .hljs-selector-attr,
.sd-docs .hljs-selector-class,
.sd-docs .hljs-selector-id,
.sd-docs .hljs-variable {
	color: #0550AE;
}

.sd-docs .hljs-meta .hljs-string,
.sd-docs .hljs-regexp,
.sd-docs .hljs-string {
	color: #0A3069;
}

.sd-docs .hljs-built_in,
.sd-docs .hljs-symbol {
	color: #953800;
}

.sd-docs .hljs-code,
.sd-docs .hljs-comment,
.sd-docs .hljs-formula {
	color: #57606A;
}

.sd-docs .hljs-name,
.sd-docs .hljs-quote,
.sd-docs .hljs-selector-pseudo,
.sd-docs .hljs-selector-tag {
	color: #116329;
}

.sd-docs .hljs-punctuation,
.sd-docs .hljs-subst {
	color: var(--sd-text);
}

.sd-docs .hljs-section {
	font-weight: 700;
	color: #0550AE;
}

.sd-docs .hljs-bullet {
	color: #7D4E00;
}

.sd-docs .hljs-emphasis {
	font-style: italic;
	color: var(--sd-text);
}

.sd-docs .hljs-strong {
	font-weight: 700;
	color: var(--sd-text);
}

.sd-docs .hljs-addition {
	color: #116329;
	background-color: #DAFBE1;
}

.sd-docs .hljs-deletion {
	color: #82071E;
	background-color: #FFEBE9;
}

.sd-codetabs__bar,
.sd-codetabs__panels,
.sd-codetabs__panel,
.sd-codetabs pre {
	--sd-surface: transparent;
	--sd-border: var(--sd-text-muted);
	scrollbar-width: thin;
	scrollbar-color: var(--sd-text-muted) transparent;
}

@supports selector(::-webkit-scrollbar) {
	.sd-codetabs__bar::-webkit-scrollbar,
	.sd-codetabs__panels::-webkit-scrollbar,
	.sd-codetabs__panel::-webkit-scrollbar,
	.sd-codetabs pre::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}

	.sd-codetabs__bar::-webkit-scrollbar-track,
	.sd-codetabs__panels::-webkit-scrollbar-track,
	.sd-codetabs__panel::-webkit-scrollbar-track,
	.sd-codetabs pre::-webkit-scrollbar-track {
		background-color: transparent;
	}

	.sd-codetabs__bar::-webkit-scrollbar-thumb,
	.sd-codetabs__panels::-webkit-scrollbar-thumb,
	.sd-codetabs__panel::-webkit-scrollbar-thumb,
	.sd-codetabs pre::-webkit-scrollbar-thumb {
		background-color: var(--sd-text-muted);
		border-radius: 999px;

		&:hover {
			background-color: var(--sd-purple);
		}
	}
}