body {
    --bg-color: #f4f4f4;
    --text-color: #333;
    --tab-bg: #f0f0f0;
    --tab-hover-bg: #ddd;
    --tab-active-bg: #fff;
    --border-color: #ccc;
    --code-bg: #eee;
    --code-text-color: #333;
}

body.dark-mode {
    --bg-color: #1e1e1e;
    --text-color: #d4d4d4;
    --tab-bg: #252526;
    --tab-hover-bg: #353536;
    --tab-active-bg: #1e1e1e;
    --border-color: #444;
    --code-bg: #2b2b2b;
    --code-text-color: #f0f0f0;
}

.tab-content pre.src:before {
    color: unset !important;
    background-color: unset !important;
    position: unset !important;
    top: unset !important;
    right: unset !important;
    padding: unset !important;
    content: unset !important;
}

.tab-content pre {
    padding-left: 25px;
    border: none;
    border-radius: 0px 0px 8px 8px;
    margin: 0px;
    line-height: 2;
    color: #333;
    background-color: #eee;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.tab-content pre.dark-mode {
    background-color: rgb(39, 40, 34);
    color: #f0f0f0;
    border-color: #444;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.tab-content pre code {
    font-size: 14px;
}

.code-tabs {
    border: 1px solid #ccc;
    border-radius: 8px 8px 8px 8px;
}

.tab-controls {
    display: flex;
    padding-left: 20px;
}

.tab-controls button {
    font-size: 15px;
    margin-right: 10px;
    padding: 10px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.tab-controls button:last-child {
    border-right: none;
}

.tab-controls button:hover {
    border-bottom: 3px solid #bcbcbc;
}

.tab-controls button.active {
    color: #1769e0;
    border-bottom: 3px solid #1769e0;
}

.tab-content {
    display: none;
    border-top: 1px solid #ccc;
}

.tab-content.active {
    display: block;
}

.theme-toggle-icon {
    line-height: 1;
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--tab-bg);
    cursor: pointer;
    z-index: 2;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.tab-content pre .theme-toggle-icon::before {
    content: url('./icon_theme.svg');
}

.tab-content pre.dark-mode .theme-toggle-icon::before {
}

/* .theme-toggle-icon:hover { */
/*     background-color: var(--tab-hover-bg); */
/* } */
