.code-block {
	--php: #6d2cf5;
	--js: #FFEB3B;
	--css: #ff8ce5;
	--html: #99e83d;
	
	position: relative;
	background: #262828;
	border-radius: 1em;
	padding: 1rem;
	margin: 1em 0;
	font-family: "Fira Code", monospace;
	color: #dcdcdc;
}

.code-block pre {
    margin: 0.5em 0 0 0;
    white-space: pre;
    counter-reset: line;
    font-size: 0.85em;
    line-height: 1.3em;
}

.code-block code {
    display: block;
    overflow: auto;
}

.code-block code span {
    display: inline-block;
    counter-increment: line;
    padding-left: 3em;
}
.code-block-preview code span {
    display: block;
}

.code-block code span::before {
    content: counter(line);
    display: inline-block;
    width: 2em;
    margin-right: 1em;
    color: #888;
    background: rgb(38 40 40 / 80%);
    text-align: right;
    position: absolute;
    left: 1em;
    user-select: none;
}

.code-header{
    position: sticky;
    top: 1em;
    left: 0;
    height: 27px;
    z-index: 9;
}

.code-header{
	top: calc(var(--g44-header-height) + 1em);
	-webkit-transition: top 0.6s ease 0s;
	-moz-transition: top 0.6s ease 0s;
	-o-transition: top 0.6s ease 0s;
	-ms-transition: top 0.6s ease 0s;
	transition: top 0.6s ease 0s;
}
body.scrolled .code-header{
	top: calc(var(--g44-header-height) - var(--g44-topbar-height) + 1em);
}
body :has(.header.hide:not(.alpha-on-scroll)) .code-header{
	top: 1em;
}

.copy-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: #4d4d4d;
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.1;
    cursor: pointer;
    transition: background 0.2s;
}
.copy-btn:hover {
    background: #6e6e6e;
}
.copy-btn:active {
    background: var(--g44-primary-color);
}

.code-block .type {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--g44-secondary-color);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.1;
    font-family: sans-serif;
    user-select: none;
}
.code-block[data-type="html"] .type{
    background: var(--html);
    color: #000;
}
.code-block[data-type="php"] .type,
.code-block[data-type="functions.php"] .type{
    background: var(--php);
    color: #fff;
}
.code-block[data-type="js"] .type,
.code-block[data-type="scripts.js"] .type{
    background: var(--js);
    color: #000;
}
.code-block[data-type="css"] .type,
.code-block[data-type="style.css"] .type{
    background: var(--css);
    color: #000;
}


/* Lihgt */
.code-block.code-light {
	background: #ecf0f4;
	color: #141516;
}
.code-block.code-light code span::before {
    color: #9b9b9b;
    background: rgb(236 240 244 / 80%);
}
.code-light .copy-btn {
    background: #a0a2a8;
    color: #fff;
}
.code-light .copy-btn:hover {
    background: #86888e;
}