html, body {
    font-size: 3.5mm;
}

html {
    &[data-level="info"] {
        table tr[data-level="debug"] {
            display: none !important;
        }
    }
    &[data-level="warn"] {
        table tr[data-level="debug"],
        table tr[data-level="info"] {
            display: none !important;
        }
    }
    &[data-level="error"] {
        table tr[data-level="debug"],
        table tr[data-level="info"],
        table tr[data-level="warn"] {
            display: none !important;
        }
    }
}

header {
    flex-wrap: wrap;

    .count {
        font-variant: tabular-nums;
        font-weight: 600;
        font-size: 0.7em;
        margin: 0 0.6em;
        color: #fffd;
    }

    .buttons {
        .std.button {
            font-size: 0.65em;
            padding: 0.2em 0.8em !important;
        }
    }
}

#content {
    align-items: flex-start;
    padding: 0.2rem;
    overflow-y: auto;
    scroll-snap-type: y proximity;

    table.logs {
        width: 100%;
        border-collapse: collapse;

        tr {
            > *:first-child {
                /* https://bugs.chromium.org/p/chromium/issues/detail?id=411624 */
                margin-top: auto;  /* Shift to bottom when unscrolled */
            }

            &:last-child {
                scroll-snap-align: end;
                scroll-margin-block-end: 1rem;
                border-bottom: 1px dashed #fff4;

                td {
                    padding-bottom: 0.5em;
                }
            }

            &:nth-child(odd) {
                background-color: #ffffff05;
            }

            &[data-level="debug"] {
                opacity: 0.8;
            }
            &[data-level="info"] {
            }
            &[data-level="warn"] {
                background-color: #f4c81187;

                &:nth-child(odd) {
                    background-color: #f4c81167;
                }
            }
            &[data-level="error"] {
                background-color: #e6242491;

                &:nth-child(odd) {
                    background-color: #e62424a0;
                }
            }

            &:hover td {
                background-color: #fff2;
            }
        }

        td {
            white-space: nowrap;
            vertical-align: top;
            padding: 0.3em;
            -webkit-user-select: text;
            user-select: text;

            &.time {
                font-size: 0.9em;
            }

            &.level {
                font-weight: bold;
                font-size: 0.9em;
                text-align: right;
            }

            &.message {
                font-size: 0.92em;
                font-family: monospace;
                white-space: pre-wrap;
                padding-top: 0.45em;
                width: 100%;
                position: relative;

                .hi {
                    background: #ffd60065;
                }
            }

            &.file {
                text-align: right;
                padding-right: 0.8em; // scrollbar
            }
        }
    }
}

