#pf2e-toolbelt-identify-tracker {
    --actor-size: calc(3.8em + var(--inner-offset));
    --border: 1px solid #ffffff12;
    --inner-offset: 0.4em;
    --item-size: calc(2.6em + var(--inner-offset));
    --margin: 0.5em;

    --color-fail: #e33939;
    --color-success: #3c8f3c;

    .window-content {
        padding: 0;
    }

    .content {
        position: relative;
        display: grid;
        grid-template-columns:
            var(--item-size)
            15em
            repeat(var(--nb-actors), var(--actor-size))
            var(--margin);
        overflow: hidden;
        margin: 0 0 var(--margin) var(--margin);
    }

    .actors,
    .items {
        display: grid;
        grid-template-columns: subgrid;
    }

    .actor,
    .item-img {
        display: grid;
        justify-items: center;
        align-items: center;

        img {
            border: none;
            grid-area: 1 / 1;
        }
    }

    .buttons,
    .actor {
        border-bottom: var(--border);
        border-right: var(--border);
    }

    .buttons {
        grid-column: 1 / 3;
        border-left: var(--border);

        button {
            border: none;
            border-radius: 0;

            &:hover {
                box-shadow: none;
            }
        }

        .top {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            border-bottom: var(--border);

            button {
                &:not(:last-child) {
                    border-right: var(--border);
                }
            }
        }

        .bottom {
            display: grid;
            grid-template-columns: 1fr auto 1fr;

            .clock {
                border-left: var(--border);
                border-right: var(--border);
            }
        }
    }

    .actors {
        grid-column: 3 / -1;

        .actor {
            height: var(--actor-size);

            img {
                height: calc(var(--actor-size) - 5px);
            }
        }
    }

    .items {
        grid-column: 1 / -1;
        overflow: hidden auto;

        .item-group {
            grid-column: 1 / -2;
            background: #0000003d;
            padding-block: 0.2em;
            text-align: center;
        }

        .item-details,
        .item-actor,
        .item-img {
            border-right: var(--border);
            border-bottom: var(--border);

            &.first-item {
                border-top: var(--border);
            }
        }

        .identified {
            position: relative;
            background: #d6f1fb17;
        }

        .locked {
            position: relative;
            filter: blur(2px);

            &::after {
                content: "";
                position: absolute;
                inset: 0 -1px -1px 0;
                background: #000000cc;
                cursor: cell;
            }
        }

        .item-img {
            border-left: var(--border);
            height: var(--item-size);

            img {
                border-radius: 0;
                height: calc(var(--item-size) - 5px);
            }
        }

        .item-details {
            display: flex;
            flex-direction: column;
            padding-inline: 0.3em;
            justify-content: space-evenly;

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

            .item-controls {
                display: grid;
                grid-template-columns: repeat(5, 1.6em);
                justify-items: center;
            }
        }

        .item-actor {
            .fail {
                color: var(--color-fail);
            }

            .success {
                color: var(--color-success);
            }

            .info,
            .update {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
            }

            .info {
                i {
                    font-size: 1.6em;
                }

                &:not(:hover) {
                    .question {
                        display: none;
                    }
                }
            }

            .update {
                font-size: 2em;
            }

            &.identified:not(.last-cell) {
                border-right: none;
            }

            &.toggleable {
                cursor: pointer;

                &:hover {
                    text-shadow: 0 0 8px var(--color-shadow-primary);
                }
            }

            &:not([data-update]) {
                .update {
                    display: none;
                }
            }

            &[data-update] {
                .info {
                    display: none;
                }
            }

            &[data-update="success"] {
                .update .fail {
                    display: none;
                }
            }

            &[data-update="fail"] {
                .update .success {
                    display: none;
                }
            }
        }
    }

    .highlight.highlighted:not(.identified) {
        background: #ffffff0a;
    }

    .cover {
        position: absolute;
        inset: 0;
        background: #000000ba;
        display: flex;
        justify-content: center;
        align-items: center;

        .loader {
            border: 1em solid var(--color-text-primary);
            border-top-color: var(--color-text-dark-primary);
            border-radius: 50%;
            height: min(25%, 8em);
            aspect-ratio: 1/1;
            animation: spin 2s linear infinite;
            margin-top: -10px;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    }

    &:not(.loading) {
        .cover {
            display: none;
        }
    }
}

.application.pf2e-toolbelt-identify-request {
    .requested {
        display: flex;
        align-items: center;
        gap: 0.5em;

        .img {
            height: 100%;
            display: flex;
            flex: 0 0 3.6em;

            img {
                border: 1px solid var(--color-border);
                border-radius: 4px;
            }
        }

        .hint {
            flex: 1;
        }
    }
}

#tooltip[role="tooltip"] {
    &.pf2e-toolbelt-identify {
        h3 {
            font-size: revert;
            margin-bottom: 0.5em;
        }

        .grid {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 0.2em 0.5em;
        }
    }
}