/* @import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"); */
@import url("https://cdn.jsdelivr.net/npm/fontsource-roboto-mono@3.0.3/400.css");
@import url("https://cdn.jsdelivr.net/npm/fontsource-roboto-mono@3.0.3/700.css");

@import url("juliamono.css");

/*  */

jltree,
jlpair {
    font-family: JuliaMono, monospace;
    font-size: 0.75rem;
}
jltree {
    color: hsl(0, 0%, 25%, 0.7);
    white-space: pre;
    cursor: pointer;
}

jltree * {
    cursor: auto;
}

jltree::before {
    display: inline-block;
    position: relative;
    content: "";
    background-size: 100%;
    height: 1em;
    width: 1em;
    bottom: -2px;
    opacity: 0.5;
    cursor: pointer;
    background-image: url(https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.0.0/src/svg/caret-down-outline.svg);
}

jltree.collapsed jltree::before {
    display: none;
}

jltree.collapsed::before {
    background-image: url(https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.0.0/src/svg/caret-forward-outline.svg);
}

jltree r {
    display: block;
}

jltree.collapsed r {
    display: inline-block;
}

jltree r > v {
    display: inline-flex;
    color: hsl(0, 0%, 25%, 1);
}

jltree.collapsed jlarray > r > k,
jltree.collapsed jlstruct > r > k {
    display: none;
}

/*  */

jltree r {
    margin-left: 1em;
}

jltree.collapsed r:first-child {
    margin-left: 0;
}

jltree jlarray > r > k {
    margin-right: 1em;
    opacity: 0.5;
    user-select: none;
}

/*  */

jltree jlarray::before {
    content: "[";
}

jltree jlarray::after {
    content: "]";
}

jltree jlarray.Tuple::before,
jltree jldict::before,
jltree jlstruct::before {
    content: "(";
}

jltree jlarray.Tuple::after,
jltree jldict::after,
jltree jlstruct::after {
    content: ")";
}

/*  */

jltree jlarray > r > k::after {
    content: ":";
}

jlpair > r > k::after,
jltree jldict > r > k::after {
    content: " => ";
}

jltree jldict.NamedTuple > r > k::after,
jltree jlstruct > r > k::after {
    content: " = ";
}

jltree.collapsed r::after {
    content: ",";
}

jltree.collapsed r:last-child::after {
    content: "";
}

jlmore {
    display: inline-block;
    padding: 0.6em 0em;
    cursor: pointer;
    /* this only affects jlmore inside a table */
    width: 100%;
    white-space: nowrap;
}

jlmore::before {
    margin-left: 0.2em;
    margin-right: 0.5em;
    bottom: -0.1em;
    display: inline-block;
    position: relative;
    content: "";
    background-size: 100%;
    height: 1em;
    width: 1em;
    opacity: 0.5;
    background-image: url(https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.0.0/src/svg/ellipsis-vertical.svg);
}

jlmore.loading::before {
    background-image: url(https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.0.0/src/svg/sync-outline.svg);
    animation: loadspin 3s ease-in-out infinite;
}

@keyframes loadspin {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(180deg);
    }
    50% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

jltree.collapsed jlmore {
    margin: 0em;
}
jltree.collapsed jlmore::before {
    background-image: url(https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.0.0/src/svg/ellipsis-horizontal.svg);
}

/*  */

jltree.collapsed img,
jltree.collapsed svg {
    max-width: 4rem;
    max-height: 4rem;
}

jltree img,
jltree svg {
    max-width: 12rem;
    max-height: 8rem;
}

/*  */

jlerror {
    font-size: 0.75rem;
    font-family: "Space Mono", monospace;
}

jlerror > header {
    color: #330000;
}
jlerror > header > p {
    margin-block-end: 0.2em;
}
jlerror > header > p:first-child {
    font-weight: bold;
}
jlerror > section > ol > li > mark {
    background: #f3f2f1;
    border-radius: 6px;
    font-family: JuliaMono, monospace;
    font-variant-ligatures: none;
}
jlerror > section > ol > li > em > a {
    background: #f5efd9;
    border-radius: 4px;
    padding: 1px 7px;
    text-decoration: none;
    border-left: 3px solid #9a7575;
}
jlerror > section > ol > li > span {
    opacity: 0.8;
    padding: 0px 1em;
}

table.pluto-table {
    table-layout: fixed;
}

table.pluto-table td {
    max-width: 300px;
    overflow: hidden;
}

table.pluto-table .schema-types {
    color: rgba(0, 0, 0, 0.4);
    font-family: "JuliaMono", monospace;
    font-size: 0.75rem;
    opacity: 0;
}

table.pluto-table .schema-types th {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    background-color: white;
    height: 2rem;
}

table.pluto-table thead:hover .schema-types {
    opacity: 1;
}

table.pluto-table .schema-names th {
    transform: translate(0, 0.5em);
    transition: transform 0.1s ease-in-out;
}
table.pluto-table .schema-names th:first-child,
table.pluto-table .schema-types th:first-child {
    z-index: 2;
    left: -10px;
}

table.pluto-table .schema-names th,
table.pluto-table .schema-types th:first-child {
    background-color: white;
    position: sticky;
    top: calc(0.25rem - var(--pluto-cell-spacing));
    height: 2rem;
    z-index: 1;
}

table.pluto-table thead:hover .schema-names th {
    transform: translate(0, 0);
}

table.pluto-table tbody th:first-child {
    background-color: white;
    position: sticky;
    left: -10px; /* padding-left of pluto-output*/
}

table.pluto-table .jlmore-td {
    text-align: left;
    overflow: unset;
}

table.pluto-table .jlmore-td jlmore {
    overflow: unset;
    position: sticky;
    left: 0;
    top: 2rem;
    max-width: 650px;
}