@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --body-font-family: 'Roboto', sans-serif;;;
    --block-font-family: 'Roboto', serif;
    --code-font-family: 'JetBrains Mono', monospace;
    --body-font-size: 16px;
    --code-font-size: 16px;
}

/* Color variables */
@media (prefers-color-scheme: light) {
    :root {
        --background-color: #ffffff;
        --detail-background-color: #f5f8fa;
        --body-background-color: var(--background-color);
        --search-input-background-color: var(--background-color);
        --section-background-color: #f8f8f8;
        --toc-background-color: var(--section-background-color);
        --navbar-background-color: var(--detail-background-color);
        --subnav-background-color: #f9f9f9;
        --selected-background-color: var(--detail-background-color);

        --text-color: #141414;
        --secondary-text-color: #434c5d;
        --block-text-color: #474747;
        --body-text-color: var(--secondary-text-color);
        --title-color: #2c4557;
        --link-color: cornflowerblue;
        --link-color-active: #4c6b87;
        --search-input-text-color: var(--text-color);
        --search-input-placeholder-color: var(--placeholder-color);
        --selected-text-color: var(--text-color);
        --selected-link-color: var(--link-color);

        --table-border-color: var(--text-color);

        --border-color: #dfe3e5;
        --placeholder-color: #a3a5a7;
        --highlight-color: #f5f8fa;
        --snippet-highlight-color: var(--highlight-color);
        --search-tag-highlight-color: var(--highlight-color);
        --deprecation-color: #ffe9e9;
        --secondary-border-color: #b4b4b4;

        --invalid-tag-background-color: var(--detail-background-color);
        --invalid-tag-text-color: var(--text-color);

        --shadow: rgba(0, 0, 0, 0.05) 0px 6px 9px 0px;
    }
}

/* Color variables */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #141414;
        --detail-background-color: #1a1a1a;
        --body-background-color: var(--detail-background-color);
        --search-input-background-color: var(--background-color);
        --section-background-color: var(--detail-background-color);
        --toc-background-color: var(--section-background-color);
        --navbar-background-color: var(--detail-background-color);
        --subnav-background-color: var(--detail-background-color);
        --selected-background-color: var(--detail-background-color);
        --snippet-background-color: var(--detail-background-color);

        --text-color: #cecece;
        --secondary-text-color: #afb0b1;
        --block-text-color: #aeaeae;
        --body-text-color: var(--secondary-text-color);
        --title-color: #a9b4cc;
        --link-color: #7bb3df;
        --link-color-active: #4992c9;
        --navbar-text-color: var(--text-color);
        --search-input-text-color: var(--text-color);
        --search-input-placeholder-color: var(--placeholder-color);
        --selected-text-color: var(--text-color);
        --selected-link-color: var(--link-color);
        --snippet-text-color: var(--text-color);

        --table-border-color: var(--text-color);

        --border-color: #434c5d;
        --placeholder-color: #a3a5a7;
        --highlight-color: #1a1a1a;
        --snippet-highlight-color: var(--highlight-color);
        --search-tag-highlight-color: var(--highlight-color);
        --deprecation-color: #5c2a2a;
        --secondary-border-color: #434c5d;

        --invalid-tag-background-color: var(--detail-background-color);
        --invalid-tag-text-color: var(--text-color);

        --shadow: rgba(255, 255, 255, 0.05) 0px 6px 9px 0px;
    }
}

:focus-visible {
    outline: 1px solid var(--title-color);
}

.roboto-font {
    font-family: var(--body-font-family);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.jetbrains-mono-font {
    font-family: var(--code-font-family);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.main-grid {
    display: block;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--body-font-family);
    font-size: 100%;
    margin: 0;
}

dl.notes > dd, code, #class-description > div.block {
    font-family: var(--body-font-family);
}

body > div.flex-box > div > main {
    max-width: 1080px;
    min-width: 800px;
    width: 90%;
    box-shadow: var(--shadow);
    border-radius: 5px;
    margin: 0 auto;
    margin-top: 20px;
}

.top-nav {
    background: var(--background-color);
}

#navbar-top-firstrow > li:not(a) {
    background: var(--navbar-background-color);
}

#navbar-top-firstrow > li {
    color: var(--link-color);
}

.nav-bar-cell1-rev {
    background-color: rgba(0, 0, 0, 0);
    font-weight: bold;
}

.about-language {
    display: flex;
    gap: 10px;
    align-items: center;
    vertical-align: middle;
    float:right;
    overflow:hidden;
    margin-top: -4px;
}

.about-language a {
    background: var(--navbar-background-color);
    color: var(--link-color) !important;
    text-decoration: none;
    padding: 5px 10px;
}

.about-language a:hover {
    color: var(--link-color-active) !important;
}

/* A - LINKS */
a:link, a, #navbar-top-firstrow > li > a {
    color: var(--link-color);
    font-weight: normal;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
}

a:link:visited, a:visited {
    color: var(--link-color);
    text-decoration: none;
}

a:link:hover, a:hover,
#navbar-top-firstrow > li > a:hover, 
body > div.flex-box > div > main > div.header > div > a:hover,
body > div.flex-box > header > nav > div.sub-nav > div:nth-child(1) > ul:nth-child(1) > li > a:hover,
#class-description > div.block > a:hover > code,
body > div.flex-box > div > main > div.inheritance > a:hover,
#class-description > div.type-signature > span.extends-implements > a:hover {
    color: var(--link-color-active);
    border-bottom: 1px solid var(--link-color-active);
}
a:link:focus, a:focus {
    color: var(--link-color);
    font-weight: bold;
    text-decoration: none;
}
a:link:active, a:active {
    color: var(--link-color-active);
    text-decoration: none;
}
a[name] {
    color: var(--text-color);
}
a[name]:hover {
    color: var(--text-color);
    text-decoration: none;
}

/* details navigation links */
body > div.flex-box > header > nav > div.sub-nav > div:nth-child(1) > ul:nth-child(2),
body > div.flex-box > header > nav > div.sub-nav > div:nth-child(1) > ul:nth-child(1) > li:nth-child(2), #navbar-top-firstrow > li:nth-child(7),
#class-description > hr,
body > div.flex-box > div > main > div.inheritance {
    display: none;
}
.sub-nav {
    border-top: 1px solid var(--border-color);
    background-color: var(--background-color);
    box-shadow: var(--shadow);
    float: left;
    overflow: hidden;
    width: 100%;
    
}

#page-search-input, #search-input {
    background: var(--background-color);
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    color: var(--placeholder-color);
    margin-right: 15px;
    box-shadow: var(--shadow);
}

body > div.flex-box > header > nav > div.sub-nav > div.nav-list-search > label {
    display: none;
}
body > div.flex-box > header > nav > div.sub-nav > div:nth-child(1) {
    margin-top: 2px;
}
#page-search-reset, #search-reset {
    background: var(--highlight-color);
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    margin-right: 15px;
    box-shadow: var(--shadow);
}

#reset-button {
    padding: 5px 10px;
    margin-top: 4px;
    margin-right: 15px;
}

#page-search-reset:hover, #search-reset:hover {
    background: var(--subnav-background-color);
    color: var(--secondary-text-color);
    outline: 1px solid var(--title-color);
}

.sub-nav div {
    clear: left;
    float: left;
    padding: 0 0 5px 6px;
}

.type-signature, pre {
    background: var(--highlight-color);
    padding: 10px;
    border-radius:6px;
    font-family: var(--code-font-family);
}

section#field-summary, section#constructor-summary, section#method-summary, section#nested-class-summary {
    background: var(--background-color);
    border: none;
    margin-left: -10px;
}

section#field-detail, section#constructor-detail, section#method-detail,
#field-summary > div.caption,
#constructor-summary > div.caption,
#nested-class-summary > div.caption,
#all-packages-table > div.caption > span,
#class > div.caption > span,
#method > div.caption > span {
    display: none;
}

#field-summary > h2, #constructor-summary > h2, #method-summary > h2, #nested-class-summary > h2 {
    font-style: normal;
}

/* Inheritance declarations */
body.class-declaration-page .summary h3,
body.class-declaration-page .details h3,
body.class-declaration-page .summary .inherited-list h2 {
    background: none;
    border: none;
    font-weight: normal;
    font-size: 20px;
}

.table-header, .odd-row-color, .odd-row-color .table-header {
    background: var(--highlight-color);
    border: none;
}

.even-row-color, .even-row-color .table-header {
    background: var(--background-color);
    border: none;
}

.summary-table {
    border: none;
    border-radius: 6px;
}

.summary-table div, body > div.flex-box > div > main > dl > dd > div {
    font-family: var(--body-font-family);
}

code a:link:not(:hover), .summary-table div > code > a:not(:hover) {
    color: var(--secondary-text-color);
    border-bottom: 1px solid var(--secondary-border-color);
}

main a[href*="://"]::after {
    display: none;
}

div.table-tabs > button.active-table-tab, #related-package-summary > div.caption > span, #class-summary > div.caption > span {
    background: var(--highlight-color);
    color: var(--secondary-text-color);
    font-weight: normal;
    border-radius: 6px;
    padding-top: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-left: 0px;
}
div.table-tabs > button.table-tab {
    background: var(--background-color);
    color: var(--secondary-text-color);
    font-weight: normal;
}

.deprecation-block {
    background: var(--deprecation-color);
    padding: 2px 6px;
    border: none;
    border-radius: 6px;
    font-weight: normal;
    font-family: var(--body-font-family);
}

#ui-id-1 .ui-state-active {
    background: var(--highlight-color);
    border-color: var(--highlight-color);
}

#ui-id-1 {
    border-radius: 6px;
    overflow-x: hidden;
    border: none;
}

/* Search results */
ul.ui-autocomplete li {
    background: var(--background-color);
    color: var(--secondary-text-color);
    font-family: var(--body-font-family);
}
