#pf2e-toolbelt-roll-tracker,
[id="pf2e-toolbelt.rollsTracker.clear.dialog"] {
    input[type="date"] {
        &::-webkit-calendar-picker-indicator {
            display: block;
            cursor: pointer;
            font-size: 1.1em;
            filter: invert(0.7);
        }
    }
}

[id="pf2e-toolbelt.rollsTracker.clear.dialog"] {
    input[type="date"] {
        width: min-content;
        margin-top: 0.5em;
    }
}

#pf2e-toolbelt-roll-tracker {
    --select-0: #470b0b;
    --select-1: #06344f;
    --select-2: #0a4e09;
    --select-3: #77520e;
    --select-4: #5a1a5a;

    --list-highlight: #ffffff17;
    --columns-background: #ffffff01;
    --column-highlight: #ffffff05;

    @for $i from 0 through 4 {
        .select-#{$i} {
            background: var(--select-#{$i});
        }
    }

    .window-content {
        flex-direction: row;
        padding: 0;
    }

    .sidebar {
        border-right: 1px solid var(--color-border);

        flex: 0 0 240px;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .options {
            border-bottom: 1px solid var(--color-border);

            padding: 3px;
            display: flex;
            flex-direction: column;
            gap: 3px;

            label {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
                padding-left: 6px;

                input {
                    flex: 0 0 75%;
                    height: 25px;
                }
            }

            select {
                flex: 0 0 25px;
            }

            select,
            input {
                &:focus {
                    outline: none;
                    box-shadow: inset 0 0 2px var(--color-shadow-primary);
                }

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

        .list {
            flex: 1;
            overflow: auto;

            .user,
            .actor {
                padding: 4px 8px;
                cursor: pointer;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                &:hover:not(.selected) {
                    background: var(--list-highlight);
                }
            }

            .actor {
                padding-left: 16px;
            }
        }

        .controls,
        .info {
            border-top: 1px solid var(--color-border);
            padding: 3px;
        }

        .controls {
            display: flex;
            gap: 3px;

            button {
                height: 25px;

                &:nth-child(2) {
                    flex: 1;
                }
            }
        }

        .info {
            font-size: 1.1em;
            text-align: center;
        }
    }

    .body {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 1em;
        gap: 2em;

        .stats {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: calc((100% - 8em) / 5);
            gap: 2em;
            font-size: 1.1em;
            letter-spacing: 0.2px;
            padding-inline: 1em;

            .stats-entry {
                padding: 2px 6px;
                border-radius: 4px;

                .entry {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 0.5em;

                    .name,
                    .value {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .name {
                        text-align: center;
                        width: 100%;
                    }
                }
            }
        }

        .graph {
            flex: 1;
            width: 100%;
            display: grid;
            grid-template-rows: 1fr auto auto;
            grid-template-columns: auto auto 1fr;

            .left,
            .bottom {
                text-align: center;
                font-size: 1.2em;
                letter-spacing: 1px;
            }

            .left {
                grid-row: 1;
                grid-column: 1;
                writing-mode: vertical-lr;
                transform: scale(-1);
                margin-right: 6px;
            }

            .bottom {
                grid-row: 3;
                grid-column: 3;
                margin-top: 6px;
                display: grid;
                grid-auto-flow: column;
                grid-auto-columns: 1fr;
            }

            .yAbsis,
            .grid {
                display: grid;
                grid-template-rows: repeat(var(--rows), 1fr);
            }

            .yAbsis {
                grid-row: 1;
                grid-column: 2;
                position: relative;

                .section {
                    border-right: 1px solid var(--color-border);

                    position: relative;
                    display: flex;
                    justify-content: flex-end;
                    padding-right: 10px;

                    .value {
                        transform: translateY(-50%);
                        position: absolute;
                    }

                    .fake {
                        opacity: 0;
                    }

                    &.zero {
                        position: absolute;
                        bottom: 0;
                        right: 0;
                    }

                    &::after {
                        border-top: 1px solid var(--color-border);

                        position: absolute;
                        content: "";
                        top: 0;
                        right: 0;
                        width: 4px;
                    }
                }
            }

            .center,
            .xAbsis {
                display: grid;
                grid-template-columns: repeat(var(--columns), 1fr);
            }

            .grid,
            .center {
                grid-row: 1;
                grid-column: 3;
            }

            .grid,
            .center,
            .xAbsis,
            .bottom {
                margin-left: -1px;
            }

            .grid {
                .section {
                    border-top: 1px solid var(--color-border);

                    opacity: 0.3;
                }
            }

            .center {
                z-index: 1;

                .section {
                    position: relative;
                    display: grid;
                    align-items: flex-end;
                    grid-template-columns: repeat(var(--entries), 1fr);
                    background: var(--columns-background);

                    .value {
                        height: var(--value);

                        &:hover {
                            filter: brightness(1.6);
                        }
                    }

                    &:hover {
                        background: var(--column-highlight);
                    }

                    &::before {
                        border-right: 1px solid var(--color-border);

                        position: absolute;
                        content: "";
                        top: 0;
                        bottom: 0;
                        right: 0;
                        opacity: 0.5;
                    }
                }
            }

            .xAbsis {
                grid-row: 2;
                grid-column: 3;

                .section {
                    border-top: 1px solid var(--color-border);

                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .value {
                        text-align: center;
                    }

                    &::after {
                        border-right: 1px solid var(--color-border);

                        position: absolute;
                        content: "";
                        top: 0;
                        left: 0;
                        height: 4px;
                    }

                    &.marker {
                        &:after {
                            height: 400px;
                        }
                    }
                }
            }
        }
    }
}

body.theme-light {
    #pf2e-toolbelt-roll-tracker,
    [id="pf2e-toolbelt.rollsTracker.clear.dialog"] {
        input[type="date"] {
            &::-webkit-calendar-picker-indicator {
                filter: revert;
            }
        }
    }

    #pf2e-toolbelt-roll-tracker {
        --select-0: #d94141;
        --select-1: #2192d5;
        --select-2: #1b9b1a;
        --select-3: #c99a44;
        --select-4: #d040d0;

        --list-highlight: #00000029;
        --columns-background: #0000000a;
        --column-highlight: #0000001c;

        .body .graph .center .section .value:hover {
            filter: brightness(0.7);
        }
    }
}