@import "variant-internal.css";


html {
    color-scheme: only var(--INTERNAL-BROWSER-theme);
}

body {
    background-color: var(--INTERNAL-MAIN-BG-color);
    color: var(--INTERNAL-MAIN-TEXT-color);
    font-family: var(--INTERNAL-MAIN-font);
}

a,
.anchor,
.topbar-button button,
#R-searchresults .autocomplete-suggestion {
    color: var(--INTERNAL-MAIN-LINK-color);
}

a:hover,
a:active,
a:focus,
.anchor:hover,
.anchor:active,
.anchor:focus,
.topbar-button button:hover,
.topbar-button button:active,
.topbar-button button:focus {
    color: var(--INTERNAL-MAIN-LINK-HOVER-color);
}

#R-sidebar {
    background: var(--INTERNAL-MAIN-BG-color);
}

#R-header-wrapper {
    background-color: transparent;
    color: var(--INTERNAL-MENU-SEARCH-color);
}

.searchbox {
    border-color: var(--INTERNAL-MENU-SEARCH-BORDER-color);
    background-color: var(--INTERNAL-MENU-SEARCH-BG-color);
}

#R-sidebar .searchbox > :first-child,
#R-sidebar .searchbox > :last-child {
    color: var(--INTERNAL-MENU-SEARCH-color);
}

.searchbox input::-webkit-input-placeholder,
.searchbox input::placeholder {
    color: var(--INTERNAL-MENU-SEARCH-color);
}

#R-sidebar .collapsible-menu label,
#R-sidebar .menu-control,
#R-sidebar :is(a, span) {
    color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
}

#R-sidebar select:hover,
#R-sidebar .collapsible-menu li:not(.active) > label:hover,
#R-sidebar .menu-control:hover,
#R-sidebar a:hover {
    color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
}

#R-sidebar ul.enlarge > li.parent,
#R-sidebar ul.enlarge > li.active {
    background-color: var(--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color);
}

#R-sidebar li.active > label,
#R-sidebar li.active > a {
    color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);
}

#R-sidebar li.active > a {
    background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color);
}

#R-sidebar ul li > a .read-icon {
    color: var(--INTERNAL-MENU-VISITED-color);
}

#R-sidebar .nav-title {
    color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
}

#R-content-wrapper hr {
    border-color: var(--INTERNAL-MENU-SECTION-SEPARATOR-color);
}

#R-footer {
    color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
}

mark {
    background-color: var(--INTERNAL-ACCENT-color);
}

/* Headers */
h1 { color: var(--INTERNAL-MAIN-TITLES-H1-color); font-family: var(--INTERNAL-MAIN-TITLES-H1-font); }
h2 { color: var(--INTERNAL-MAIN-TITLES-H2-color); font-family: var(--INTERNAL-MAIN-TITLES-H2-font); }
h3, .article-subheading { color: var(--INTERNAL-MAIN-TITLES-H3-color); font-family: var(--INTERNAL-MAIN-TITLES-H3-font); }
h4 { color: var(--INTERNAL-MAIN-TITLES-H4-color); font-family: var(--INTERNAL-MAIN-TITLES-H4-font); }
h5 { color: var(--INTERNAL-MAIN-TITLES-H5-color); font-family: var(--INTERNAL-MAIN-TITLES-H5-font); }
h6 { color: var(--INTERNAL-MAIN-TITLES-H6-color); font-family: var(--INTERNAL-MAIN-TITLES-H6-font); }

/* Generic box styling */
div.notices.cstyle {
    border-radius: 8px; /* Rounded corners */
    padding: 1rem;
    margin: 1rem 0;
    font-family: var(--INTERNAL-MAIN-font);
    font-size: 14px;
    display: flex;
    align-items: center; /* Aligns icon and text */
    gap: 0.75rem; /* Spacing between icon and content */

    /* Variables */
    background-color: var(--VARIABLE-BOX-color);
    color: var(--VARIABLE-BOX-TEXT-color);
    border: 1px solid var(--VARIABLE-BOX-color);
}

/* Label and content styles */
div.notices.cstyle > .box-label {
    font-weight: bold;
    color: var(--VARIABLE-BOX-TEXT-color);
}

div.notices.cstyle > .box-content {
    color: var(--VARIABLE-BOX-TEXT-color);
}


/* CUSTOM Box variants */
.cstyle.info {
    --VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color);
}

.cstyle.warning {
    --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color);
}

.cstyle.note {
    --VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color);
}

.cstyle.tip {
    --VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color);
}

.cstyle.primary {
    --VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-PRIMARY-TEXT-color);
}

.cstyle.secondary {
    --VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-SECONDARY-TEXT-color);
}

.cstyle.accent {
    --VARIABLE-BOX-color: var(--INTERNAL-ACCENT-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-ACCENT-TEXT-color);
}

/* Additional box styles */
.cstyle.blue { --VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color); }
.cstyle.green { --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color); }
.cstyle.grey { --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color); }
.cstyle.orange { --VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-ORANGE-TEXT-color); }
.cstyle.red { --VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color); }

/* Code styles */
.cstyle.code {
    --VARIABLE-BOX-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
    --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-CODE-BLOCK-color);
    --VARIABLE-BOX-BG-color: var(--INTERNAL-CODE-BLOCK-BG-color);
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-CODE-BLOCK-color);
}

.cstyle.transparent {
    --VARIABLE-BOX-color: transparent;
    --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
    --VARIABLE-BOX-BG-color: transparent;
    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
}

/* Code elements */
code, kbd, pre:not(.mermaid), samp {
    font-family: var(--INTERNAL-CODE-font);
}

code {
    background-color: var(--INTERNAL-CODE-INLINE-BG-color);
    border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
    color: var(--INTERNAL-CODE-INLINE-color);
}

pre:not(.mermaid) {
    background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
    border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
    color: var(--INTERNAL-CODE-BLOCK-color);
}

/* Copy to clipboard button styles */
.copy-to-clipboard-button {
    background-color: var(--INTERNAL-CODE-INLINE-BG-color);
    border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
    color: var(--INTERNAL-CODE-INLINE-color);
    font-family: var(--INTERNAL-CODE-font);
}

.copy-to-clipboard-button:hover {
    background-color: var(--INTERNAL-CODE-INLINE-color);
    color: var(--INTERNAL-CODE-INLINE-BG-color);
}

div.highlight pre:not(.mermaid) + .copy-to-clipboard-button,
pre:not(.mermaid) .copy-to-clipboard-button {
    border-color: transparent;
    color: var(--INTERNAL-MAIN-LINK-color);
}

div.highlight pre:not(.mermaid) + .copy-to-clipboard-button:hover,
pre:not(.mermaid) .copy-to-clipboard-button:hover {
    background-color: var(--INTERNAL-MAIN-LINK-color);
    border-color: var(--INTERNAL-MAIN-LINK-color);
    color: var(--INTERNAL-CODE-BLOCK-BG-color);
}

/* Button styles */
.btn {
    background-color: var(--VARIABLE-BOX-color);
}

.btn > * {
    border-color: var(--VARIABLE-BOX-color);
    color: var(--VARIABLE-BOX-CAPTION-color);
}

.btn.interactive > *:hover,
.btn.interactive > *:active,
.btn.interactive > *:focus {
    background-color: var(--VARIABLE-BOX-BG-color);
    color: var(--VARIABLE-BOX-TEXT-color);
}