/**
 * modular styles for gautodoc, this file should generally be repurposable for most
 * webpages.
 */

/* vars */
.gautodoc {
    --fg: #EEE;
    --bg: #222;
    --border: #AAA;

    --syntax-none: #EA0;
    --syntax-var: #0EA;
    --syntax-type: #E0A;

    --spacing: 5px;
    --header-font: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    --code-font: 'Courier New', Courier, monospace;
}

/* sensible defaults for styles */
.gautodoc, .gautodoc * {
    border: none;
    padding: 0px;
    margin: 0px;
}

.gautodoc {
    display: flex;
    flex-direction: row;
    align-items: top;

    width: 100%;
    height: 100%;

    margin: var(--spacing);
    padding: calc(2 * var(--spacing));

    color: var(--fg);
    background-color: var(--bg);
}

.gautodoc .doc {
    display: flex;
    flex-direction: row;
    align-items: left;
    
    width: 100%;

    margin: var(--spacing);
    padding: var(--spacing);

    white-space: pre-wrap;
    font-size: small;
    font-family: var(--code-font);
}

/* containers --------------------------------------------------------------- */

.gautodoc .modules {
    display: flex;
    flex-direction: column;
    align-items: left;

    margin: auto;
    padding: calc(2 * var(--spacing));
}

.gautodoc .error,
.gautodoc .module,
.gautodoc .class,
.gautodoc .function {
    display: flex;
    flex-direction: column;
    align-items: left;

    border: 1px solid var(--border);
    border-radius: var(--spacing);
    margin: var(--spacing);
    padding: var(--spacing);
}

.gautodoc .error {
    color: #F00;
}

/* syntax ------------------------------------------------------------------- */

/* the box that contains a decl */
.gautodoc .decl {
    display: flex;
    flex-direction: row;
    align-items: left;
    flex-wrap: wrap;
    
    width: 100%;
}

.gautodoc .decl > * {
    display: inline-flex;
    flex-direction: row;

    font-family: var(--code-font);
    white-space: pre;
}

.gautodoc .decl > .none {
    color: var(--syntax-none);
}

.gautodoc .decl > .var {
    color: var(--syntax-var);
}

.gautodoc .decl > .type {
    color: var(--syntax-type);
}

/* index -------------------------------------------------------------------- */

.gautodoc .index {
    display: flex;
    flex-direction: column;
    align-items: left;

    left: absolute 0px;
    width: 25%;

    border: 1px solid var(--border);
    border-radius: var(--spacing);
    margin: var(--spacing);
    padding: var(--spacing);

    font: var(--code-font);
    font-size: small;
}

.gautodoc .index .index-node {
    display: flex;
    flex-direction: column;
    align-items: left;

    margin: 1px;
    padding-left: 20px;
}

.gautodoc .index .index-node .decl {
    flex-wrap: nowrap;
    overflow: hidden;
}