#pf2e-hud-persistent [data-panel="shortcuts"] {
    --shortcut-width: calc((var(--row-3fr) - var(--panel-gap)) / 2);

    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    gap: var(--panel-gap);
    background: none;
    border: none;
    padding: 0;
    justify-self: start;

    .shortcut {
        cursor: pointer;
        position: relative;
        border: var(--outer-border);
        border-radius: var(--outer-border-radius);
        width: var(--shortcut-width);
        background: rgb(0 0 0 / 37%);

        > * {
            position: absolute;
            pointer-events: none;
        }

        i {
            width: min-content;
        }

        .image,
        .overlay {
            inset: 0;
            border-radius: var(--inner-border-radius);
        }

        .image {
            background-size: cover;
        }

        .boxed {
            background: #000000a3;
            padding: 0 0.2em;
            border-radius: 4px;
            display: flex;
            line-height: 1.1;
        }

        .cost {
            top: -4px;
            left: -2px;

            &.glyph {
                font-size: 0.8em;
            }
        }

        .counter {
            bottom: -2px;
            right: -2px;

            span {
                font-size: 0.95em;
            }
        }

        .label {
            right: -2px;
            min-width: 2ch;
            text-align: center;

            &.rank {
                top: -3px;
                font-size: 0.8em;
            }

            &.attack {
                top: -4px;
                font-size: 0.9em;
            }
        }

        .icon {
            bottom: -3px;
            left: -2px;
            font-size: 0.85em;
            min-width: 2ch;
            text-align: center;

            .fa-solid.fa-play {
                font-size: 1.1em;
            }

            .fa-reply-all {
                transform: rotateY(180deg);
                left: 0;
            }
        }

        .checkbox {
            bottom: -6px;
            right: -2px;
            text-shadow: none;

            i {
                font-size: 1.3em;

                &:last-child {
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0.6;
                    color: black;
                }
            }
        }

        &[data-type="stance"] {
            .icon {
                font-size: 1em;
            }
        }

        &[data-type="blastCost"] {
            .overlay {
                display: flex;
                align-items: center;
                justify-content: center;

                span {
                    font-size: 2em;
                    font-weight: bold;
                    color: var(--color-reversed);
                    text-shadow:
                        0 0 3px white,
                        0 0 3px white,
                        0 0 3px white;
                }
            }
        }

        &.dragging {
            .image {
                scale: 0.8;
            }

            > *:not(.image) {
                display: none;
            }
        }

        &:hover {
            .image {
                filter: brightness(1.5);
            }
        }

        &.inactive,
        &.greyed {
            .image {
                filter: grayscale(1) contrast(0.7);
            }
        }

        &.greyed {
            &:hover {
                .image {
                    filter: grayscale(1) contrast(0.7) brightness(1.5);
                }
            }
        }

        &.inactive {
            cursor: default;

            > *:not(.image):not(.icon) {
                display: none;
            }
        }

        &.empty {
            border-style: dashed;
            cursor: default;
        }
    }
}

#tooltip.pf2e-hud-shortcut-tooltip {
    margin-bottom: 5em;
    background: none;
    max-width: 40em;
    min-width: 30em;
    box-shadow: none;
    overflow: visible;
    transition: none;

    .content {
        position: relative;

        .header {
            display: grid;
            grid-template-columns: calc(3.2em - 1px) 1fr;
            grid-template-rows: repeat(2, 1.6em);
            padding: 0.7em 1em;
            border-radius: 4px 0 0 4px;
            background: linear-gradient(
                90deg,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 0.8) 20%,
                rgba(0, 0, 0, 0.6) 50%,
                rgba(0, 0, 0, 0.4) 80%,
                rgba(0, 0, 0, 0) 100%
            );
            column-gap: 0.5em;
            align-items: center;

            .title,
            .subtitle {
                display: flex;
                gap: 0.3em;
            }

            .title {
                font-size: 1.3em;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                line-height: 1.4;
            }

            .subtitle {
                .action-glyph {
                    font-size: 0.9em;
                }
            }

            .image {
                grid-column: 1;
                grid-row: 1 / -1;
                height: 100%;
                background-size: contain;
                background-repeat: no-repeat;
                border-radius: 4px;
                border: 2px solid #ffd70026;
                position: relative;

                > * {
                    position: absolute;
                    background: rgb(0 0 0 / 61%);
                    padding-inline: 0.3em;
                    white-space: nowrap;
                    line-height: 1;
                }

                .uses {
                    bottom: -2px;
                    right: -2px;
                }
            }

            &.disabled,
            &.greyed {
                .image {
                    filter: grayscale(1) contrast(0.7);
                }
            }
        }

        .details {
            position: absolute;
            font-size: 0.8em;
            line-height: 1.2;
            white-space: nowrap;
            top: calc(100% - 0.5em);
            color: #ffffff;

            &.left {
                left: 0.3em;
            }

            &.right {
                right: 1em;
                text-align: end;
            }
        }
    }

    &.active {
        transition: opacity 500ms;
    }
}

#pf2e-hud-radial-panel {
    --row-height: 1.7em;

    z-index: calc(var(--z-index-tooltip) + 1);
    pointer-events: all;
    position: absolute;
    transform: translateY(0.5em);
    background: var(--outer-background);
    border: var(--outer-border);
    border-radius: var(--outer-border-radius);
    box-shadow: var(--outer-box-shadow);
    padding-bottom: 1px;
    min-height: calc(var(--row-height) * 2);
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    cursor: default;

    .section {
        display: flex;
        flex-direction: column;
        min-width: 7em;

        .title,
        .option {
            height: var(--row-height);
            padding-inline: 0.5em;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.2em;
        }

        .title {
            border-bottom: var(--header-border);
            background: var(--header-background);
        }

        .option {
            min-width: 7em;

            > * {
                pointer-events: none;
            }

            &:not(:last-child) {
                border-bottom: var(--header-border);
            }

            &:not(.selected) {
                cursor: pointer;

                &:hover {
                    background: #ffffff12;
                    color: white;
                }
            }

            &.selected {
                background: #75000033;
                color: #efb3b3;
            }
        }

        + .section {
            border-left: var(--header-border);
        }
    }
}