.chat-message.message .pf2e-hud-rk {
    @mixin table($nbColumns) {
        --nb-rows: 1;
        --row-height: 1.8em;

        position: relative;
        padding-inline: 8px;
        display: grid;
        column-gap: 6px;
        font-size: var(--font-size-12);
        align-items: center;
        background: repeating-linear-gradient(
            #ddd 0 var(--row-height),
            transparent var(--row-height) calc(var(--row-height) * 2)
        );
        grid-template-columns: repeat($nbColumns, auto);
        grid-template-rows: repeat(var(--nb-rows), var(--row-height));

        .header {
            z-index: 1;
            color: var(--text-dark);
            font-weight: bold;
        }

        :not(:nth-child(#{$nbColumns}n + 1)) {
            text-align: center;
        }

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

    .rk {
        @include table(4);

        &::before {
            content: "";
            position: absolute;
            background: #0000002e;
            top: 0;
            left: 0;
            right: 0;
            height: var(--row-height);
        }
    }

    .rk-skills {
        @include table(6);

        sup {
            padding-left: 2px;
        }
    }

    .rk-lores {
        @include table(7);
    }

    .rk-lores-rolls {
        @include table(4);
    }

    .success {
        &.\30 {
            color: red;
        }

        &.\33 {
            color: green;
        }
    }
}

@mixin gridRows($nbColumns) {
    .name {
        padding-left: 0.3em;
        display: flex;
        align-items: center;
        overflow: hidden;

        span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
        }
    }

    .rows {
        display: grid;
        grid-template-columns: 1fr repeat($nbColumns - 1, auto);

        > * {
            $double: $nbColumns * 2;

            padding-block: 0.1em;

            @for $i from ($nbColumns + 1) through $double {
                &:nth-child(#{$double}n + #{$i}) {
                    background: rgba(0, 0, 0, 0.102);
                }
            }

            &:nth-child(#{$nbColumns}n) {
                padding-right: 0.3em;
            }

            &:not(.name) {
                padding-left: 0.3rem;
            }
        }
    }
}

.chat-message.message .pf2e-hud-random {
    @include gridRows(2);

    .targeted {
        color: red;
    }
}

.chat-message.message .pf2e-hud-perceptions {
    --color-rank-0: #424242;
    --color-rank-1: #171f69;
    --color-rank-2: #3c005e;
    --color-rank-3: #664400;
    --color-rank-4: #5e0000;

    @include gridRows(3);

    .title {
        font-weight: bold;
        font-size: 1.2em;
    }

    .proficiency {
        .tag {
            border: 1px solid rgba(0, 0, 0, 0.5);
            border-radius: 2px;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
            color: var(--text-light);
            padding-inline: 0.3em;
            opacity: 0.8;
            text-align: center;
            font-size: 0.95em;
            display: inline-block;
            width: 100%;

            &.\30 {
                background: var(--color-rank-0);
            }

            &.\31 {
                background: var(--color-rank-1);
            }

            &.\32 {
                background: var(--color-rank-2);
            }

            &.\33 {
                background: var(--color-rank-3);
            }

            &.\34 {
                background: var(--color-rank-4);
            }
        }
    }

    .roll {
        text-align: end;
        font-weight: bold;
        font-size: 1.05em;

        &.failure {
            color: var(--color-pf-text-critical-failure);
        }

        &.success {
            color: var(--color-pf-text-critical-success);
        }
    }
}