/* Icons are from Open Iconic <https://useiconic.com/open/>.
   Licensed under the MIT License. */
:root {
    --icon-filter: invert(0);
    --icon-highlight: var(--secondary-color);
    --elapsed-color: #666;
}
/* @media (prefers-color-scheme: dark) { */
[data-theme="dark"] {
    --icon-filter: invert(1);
    --icon-highlight: #a39990;
    --elapsed-color: #999;
}
/* Containers */
.suite, .test, #errors, #errors .messages {
    border-color: #ccc; /* Fallback value */
    border-color: var(--secondary-color);
    border-width: 1px;
    border-style: solid;
    padding: 5px;
    margin-top: 5px;
}
.test {
    border-style: dashed;
}
.messages {
    width: 100%;
    border-spacing: 0;
    padding: 0 5px;
}
.children {
    display: none;
    margin-left: 18px;
    margin-top: 2px;
}
#errors .children {
    margin-left: 22px;
}
.suite, .test {
    margin-left: -5px;
}
#s1, #errors {
    margin: 0;
}
/* Suite, test and kw headers */
.element-header {
    display: flex;
    align-items: center;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 2px;
}
.element-header:hover {
    cursor: pointer;
    background-color: #eee; /* Fallback value */
    background-color: var(--highlight-color);
    border-color: #ccc; /* Fallback value */
    border-color: var(--secondary-color);
}
.element-header-toggle {
    margin: 0 4px 0 2px;
    height: 11px;
    width: 11px;
    min-width: 11px;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCA4IDgiPgogIDxwYXRoIGQ9Ik0wIDB2Mmg4di0yaC04eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAzKSIgLz4KPC9zdmc+), none;
    filter: var(--icon-filter);
    border-color: #ccc; /* Fallback value */
    border-color: var(--icon-highlight);
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
}
.closed > .element-header-toggle {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCA4IDgiPgogIDxwYXRoIGQ9Ik0zIDB2M2gtM3YyaDN2M2gydi0zaDN2LTJoLTN2LTNoLTJ6IiAvPgo8L3N2Zz4=), none;
}
.element-header:hover > .element-header-toggle {
    background-color: #ccc; /* Fallback value */
    background-color: var(--icon-highlight);
}
.element-header-menu:hover ~ .element-header-toggle {
    background-color: transparent;
}
.element-header-menu {
    margin: 0 2px 0 4px;
    cursor: default;
}
.name, .arg, .assign {
    margin-left: 7px;
    white-space: pre-wrap;
}
.name {
    font-weight: bold;
}
.elapsed {
    margin-left: auto;
    padding-left: 0.5em;
    color: #666; /* Fallback value */
    color: var(--elapsed-color);
    font-size: 0.9em;
}
/* https://stackoverflow.com/questions/75238633 */
@supports (-moz-appearance: none) {
    .name, .arg, .assign, .elapsed {
        padding-top: 3px;
    }
}
.link {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCA4IDgiPgogIDxwYXRoIGQ9Ik01Ljg4LjAzYy0uMTguMDEtLjM2LjAzLS41My4wOS0uMjcuMS0uNTMuMjUtLjc1LjQ3YS41LjUgMCAxIDAgLjY5LjY5Yy4xMS0uMTEuMjQtLjE3LjM4LS4yMi4zNS0uMTIuNzgtLjA3IDEuMDYuMjIuMzkuMzkuMzkgMS4wNCAwIDEuNDRsLTEuNSAxLjVjLS40NC40NC0uOC40OC0xLjA2LjQ3LS4yNi0uMDEtLjQxLS4xMy0uNDEtLjEzYS41LjUgMCAxIDAtLjUuODhzLjM0LjIyLjg0LjI1Yy41LjAzIDEuMi0uMTYgMS44MS0uNzhsMS41LTEuNWMuNzgtLjc4Ljc4LTIuMDQgMC0yLjgxLS4yOC0uMjgtLjYxLS40NS0uOTctLjUzLS4xOC0uMDQtLjM4LS4wNC0uNTYtLjAzem0tMiAyLjMxYy0uNS0uMDItMS4xOS4xNS0xLjc4Ljc1bC0xLjUgMS41Yy0uNzguNzgtLjc4IDIuMDQgMCAyLjgxLjU2LjU2IDEuMzYuNzIgMi4wNi40Ny4yNy0uMS41My0uMjUuNzUtLjQ3YS41LjUgMCAxIDAtLjY5LS42OWMtLjExLjExLS4yNC4xNy0uMzguMjItLjM1LjEyLS43OC4wNy0xLjA2LS4yMi0uMzktLjM5LS4zOS0xLjA0IDAtMS40NGwxLjUtMS41Yy40LS40Ljc1LS40NSAxLjAzLS40NC4yOC4wMS40Ny4wOS40Ny4wOWEuNS41IDAgMSAwIC40NC0uODhzLS4zNC0uMi0uODQtLjIyeiIKICAvPgo8L3N2Zz4=), none;
}
.expand {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCA4IDgiPgogIDxwYXRoIGQ9Ik0xLjUgMGwtMS41IDEuNSA0IDQgNC00LTEuNS0xLjUtMi41IDIuNS0yLjUtMi41eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgLz4KPC9zdmc+), none;
}
.collapse {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCA4IDgiPgogIDxwYXRoIGQ9Ik00IDBsLTQgNCAxLjUgMS41IDIuNS0yLjUgMi41IDIuNSAxLjUtMS41LTQtNHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMSkiIC8+Cjwvc3ZnPg==), none;
}
.expand, .collapse, .link {
    float: left;
    display: block;
    visibility: hidden;
    margin: 0 3px;
    height: 14px;
    width: 14px;
    background-size: 8px 8px;
    background-repeat: no-repeat;
    background-position: center;
    filter: var(--icon-filter);
    border-color: #ccc; /* Fallback value */
    border-color: var(--icon-highlight);
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
}
.link {
    background-size: 10px 10px;
}
.element-header:hover a {
    visibility: visible;
}
.expand:hover, .collapse:hover, .link:hover {
    background-color: #ccc; /* Fallback value */
    background-color: var(--icon-highlight);
}
/* Messages and errors */
.message-row {
    height: 20px;
}
.messages .time, .messages .message {
    font-family: monospace;
    font-size: 1.1em;
}
.messages .time {
    width: 7.5em;
}
#errors .time {
    width: 12.5em;
    white-space: nowrap;
}
.level {
    width: 5em;
    text-align: center;
}
.select-message {
    width: 24px;
}
.select-message > div {
    float: right;
    margin-right: 2px;
    height: 16px;
    width: 16px;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
}
.message-row:hover .select-message div {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCA4IDgiPgogIDxwYXRoIGQ9Ik0wIDB2MWg4di0xaC04em0wIDJ2MWg2di0xaC02em0wIDJ2MWg4di0xaC04em0wIDJ2MWg2di0xaC02eiIgLz4KPC9zdmc+), none;
    filter: var(--icon-filter);
    border-color: #ccc; /* Fallback value */
    border-color: var(--icon-highlight);
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
}
.select-message:hover div {
    background-color: #ccc; /* Fallback value */
    background-color: var(--icon-highlight);
    cursor: pointer;
}
/* Message tables - these MUST NOT be combined together because otherwise
   dynamically altering them based on visible log level is not possible. */
.trace-message {
    display: table;
}
.debug-message {
    display: table;
}
.metadata {
    width: 100%;
    border-spacing: 0.2em;
}
.metadata th {
    width: 12em;
    vertical-align: top;
    text-align: left;
}
.metadata td {
    vertical-align: top;
}
.keyword-metadata {
    font-size: 0.9em;
}
/* Custom styles for statistics */
#total-stats tr:hover, #tag-stats tr:hover {
    cursor: default;
}
/* Target highlight */
@keyframes highlight {
    0% {
        background: var(--primary-color)
    }
    100% {
        background: var(--target-color);
    }
}
:target {
    background: var(--target-color);
    transition: background 0.3s;
    animation: highlight 4s;
}
