@import url('https://fonts.googleapis.com/css?family=Lato');
body {
    font-family: 'Lato', sans-serif;
}

:root {
    /* Light */
    --light-color-background: #fcfcfc;
    --light-color-background-secondary: #eff0f1;
    --light-color-icon-background: var(--light-color-background);
    --light-color-accent: #c5c7c9;
    --light-color-text: #222;
    --light-color-text-aside: #707070;
    --light-color-link: #4da6ff;
    --light-color-ts: #db1373;
    --light-color-ts-interface: #139d2c;
    --light-color-ts-enum: #9c891a;
    --light-color-ts-class: #2484e5;
    --light-color-ts-function: #572be7;
    --light-color-ts-namespace: #b111c9;
    --light-color-ts-private: #707070;
    --light-color-ts-variable: #4d68ff;
    --light-external-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='10' height='10'><path fill-opacity='0' stroke='%23000' stroke-width='10' d='m43,35H5v60h60V57M45,5v10l10,10-30,30 20,20 30-30 10,10h10V5z'/></svg>");
    --light-color-scheme: light;
    --light-color-header-background: #000;
    --light-color-header-text: #f8c300;

    /* Dark */
    --dark-color-background: #2b2e33;
    --dark-color-background-secondary: #1e2024;
    --dark-color-icon-background: var(--dark-color-background-secondary);
    --dark-color-accent: #9096a2;
    --dark-color-text: #f5f5f5;
    --dark-color-text-aside: #dddddd;
    --dark-color-link: #00aff4;
    --dark-color-ts: #ff6492;
    --dark-color-ts-interface: #6cff87;
    --dark-color-ts-enum: #f4d93e;
    --dark-color-ts-class: #61b0ff;
    --dark-color-ts-function: #9772ff;
    --dark-color-ts-namespace: #e14dff;
    --dark-color-ts-private: #e2e2e2;
    --dark-color-ts-variable: #4d68ff;
    --dark-external-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='10' height='10'><path fill-opacity='0' stroke='%23fff' stroke-width='10' d='m43,35H5v60h60V57M45,5v10l10,10-30,30 20,20 30-30 10,10h10V5z'/></svg>");
    --dark-color-scheme: dark;
    --dark-color-header-background: #000;
    --dark-color-header-text: #f8c300;
}

@media (prefers-color-scheme: light) {
    :root {
        --color-background: var(--light-color-background);
        --color-background-secondary: var(--light-color-background-secondary);
        --color-icon-background: var(--light-color-icon-background);
        --color-accent: var(--light-color-accent);
        --color-text: var(--light-color-text);
        --color-text-aside: var(--light-color-text-aside);
        --color-link: var(--light-color-link);
        --color-ts: var(--light-color-ts);
        --color-ts-interface: var(--light-color-ts-interface);
        --color-ts-enum: var(--light-color-ts-enum);
        --color-ts-class: var(--light-color-ts-class);
        --color-ts-function: var(--light-color-ts-function);
        --color-ts-namespace: var(--light-color-ts-namespace);
        --color-ts-private: var(--light-color-ts-private);
        --color-ts-variable: var(--light-color-ts-variable);
        --external-icon: var(--light-external-icon);
        --color-scheme: var(--light-color-scheme);
        --color-header-background: var(--light-color-header-background);
        --color-header-text: var(--light-color-header-text);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-background: var(--dark-color-background);
        --color-background-secondary: var(--dark-color-background-secondary);
        --color-icon-background: var(--dark-color-icon-background);
        --color-accent: var(--dark-color-accent);
        --color-text: var(--dark-color-text);
        --color-text-aside: var(--dark-color-text-aside);
        --color-link: var(--dark-color-link);
        --color-ts: var(--dark-color-ts);
        --color-ts-interface: var(--dark-color-ts-interface);
        --color-ts-enum: var(--dark-color-ts-enum);
        --color-ts-class: var(--dark-color-ts-class);
        --color-ts-function: var(--dark-color-ts-function);
        --color-ts-namespace: var(--dark-color-ts-namespace);
        --color-ts-private: var(--dark-color-ts-private);
        --color-ts-variable: var(--dark-color-ts-variable);
        --external-icon: var(--dark-external-icon);
        --color-scheme: var(--dark-color-scheme);
        --color-header-background: var(--dark-color-header-background);
        --color-header-text: var(--dark-color-header-text);
    }
}

:root[data-theme="light"] {
    --color-background: var(--light-color-background);
    --color-background-secondary: var(--light-color-background-secondary);
    --color-icon-background: var(--light-color-icon-background);
    --color-accent: var(--light-color-accent);
    --color-text: var(--light-color-text);
    --color-text-aside: var(--light-color-text-aside);
    --color-link: var(--light-color-link);
    --color-ts: var(--light-color-ts);
    --color-ts-interface: var(--light-color-ts-interface);
    --color-ts-enum: var(--light-color-ts-enum);
    --color-ts-class: var(--light-color-ts-class);
    --color-ts-function: var(--light-color-ts-function);
    --color-ts-namespace: var(--light-color-ts-namespace);
    --color-ts-private: var(--light-color-ts-private);
    --color-ts-variable: var(--light-color-ts-variable);
    --external-icon: var(--light-external-icon);
    --color-scheme: var(--light-color-scheme);
    --color-header-background: var(--light-color-header-background);
    --color-header-text: var(--light-color-header-text);
}

:root[data-theme="dark"] {
    --color-background: var(--dark-color-background);
    --color-background-secondary: var(--dark-color-background-secondary);
    --color-icon-background: var(--dark-color-icon-background);
    --color-accent: var(--dark-color-accent);
    --color-text: var(--dark-color-text);
    --color-text-aside: var(--dark-color-text-aside);
    --color-link: var(--dark-color-link);
    --color-ts: var(--dark-color-ts);
    --color-ts-interface: var(--dark-color-ts-interface);
    --color-ts-enum: var(--dark-color-ts-enum);
    --color-ts-class: var(--dark-color-ts-class);
    --color-ts-function: var(--dark-color-ts-function);
    --color-ts-namespace: var(--dark-color-ts-namespace);
    --color-ts-private: var(--dark-color-ts-private);
    --color-ts-variable: var(--dark-color-ts-variable);
    --external-icon: var(--dark-external-icon);
    --color-scheme: var(--dark-color-scheme);
    --color-header-background: var(--dark-color-header-background);
    --color-header-text: var(--dark-color-header-text);
}

.tsd-page-toolbar {
    background-color: var(--color-header-background);
}

.tsd-toolbar-contents a.title{
    color: var(--color-header-text);
}

.tsd-page-toolbar {
    border-bottom: 2px solid #f8c300;
}

#lightningchart-logo img {
    width: 140px;
    height: 40px;
    vertical-align: middle;
    padding-right: 10px;
}

#lightningchart-logo:hover {
    text-decoration: none;
}