#pf2e-hud-sidebar[data-type="actions"] {
    --min-width: 16em;
    --max-column-width: 19.5em;

    --category-width: 1.2em;

    --attack-background: #171f693d;
    --attack-border-color: #353d83;

    --damage-background: #5e000052;
    --damage-border-color: #5d3232;

    --select-font-size: var(--font-size-13);

    --variant-font-size: var(--font-size-11);
    --variant-background: #372e20;
    --variant-light-background: #372e2042;

    --strike-name-font-size: var(--font-size-15);

    a.disabled {
        color: var(--color-disabled);
    }

    header {
        &.blasts {
            .controls {
                inset: 0 0 0 auto;
                align-items: normal;
                gap: 0;

                > span {
                    width: 2.2ch;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    &:not(.selected) {
                        cursor: pointer;
                        background: var(--variant-background);
                    }

                    &.selected {
                        cursor: revert;
                        background: var(--variant-background-selected);
                        color: var(--variant-color-selected);
                        box-shadow: var(--variant-box-shadow-selected);
                    }
                }
            }
        }

        &.strikes {
            .controls {
                a:not(.active) {
                    color: var(--color-disabled);
                }
            }
        }
    }

    .item {
        a.active {
            color: var(--color-active);
        }

        .controls {
            [data-action="use-action"],
            [data-action="reset-action"],
            [data-action="toggle-stance"],
            [data-action="toggle-exploration"] {
                margin-top: 2px;
            }

            a.active {
                color: var(--color-active);
            }

            [data-action="toggle-stance"],
            [data-action="toggle-exploration"] {
                font-size: 1.1em;
            }

            [data-action="toggle-stance"] {
                &.disabled {
                    cursor: default;
                }
            }
        }

        .category {
            display: flex;
            width: var(--category-width);
            justify-content: center;

            img {
                filter: invert(0.8);
                border: none;
                height: 1.35em;
                margin-bottom: -0.2em;

                &.auto-fire {
                    height: 1em;
                    margin-right: 0.1em;
                }
            }

            i {
                font-size: 0.95em;
            }
        }

        .variants {
            &.controls,
            &.versatiles,
            &.reload {
                margin-left: calc(var(--category-width) + var(--variant-gap));
            }

            &.controls {
                .ammo {
                    padding: 0;
                }

                .reload {
                    gap: 0.5em;
                }
            }

            &.reload {
                .variant {
                    --variant-background: var(--variant-light-background);

                    flex: 1 100%;
                    width: 100%;
                    padding: 0;

                    img {
                        border: none;
                        width: 1.25rem;
                        height: 1.25rem;
                        object-fit: cover;
                    }

                    .ammo-name {
                        flex: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-size: 0.9em;
                    }

                    input {
                        line-height: 1;
                    }

                    &.active {
                        .ammo-name {
                            pointer-events: none;
                        }
                    }

                    &:not(.active) {
                        opacity: 0.6;
                        filter: grayscale(1);
                    }
                }
            }
        }

        .variant {
            select {
                font-size: var(--select-font-size);
                width: max-content;
                height: 100%;

                @supports (-moz-appearance: none) {
                    padding-inline: 3px;
                }
            }

            &.attack {
                background: var(--attack-background);
                border-color: var(--attack-border-color);

                &[data-disabled="true"] {
                    opacity: 0.3;
                    cursor: not-allowed;
                }
            }

            &.auxiliary {
                &:has(select) {
                    padding-block: 0;
                    padding-right: 0;

                    span:first-child {
                        padding-top: 2px;
                    }
                }
            }

            &.damage {
                background: var(--damage-background);
                border-color: var(--damage-border-color);
            }

            &.info {
                cursor: help;
            }

            &.trait {
                background: var(--variant-background-hover);
            }
        }

        &.attack {
            flex-direction: column;

            .name {
                display: flex;
                align-items: center;
                gap: 0.3em;
                padding-left: 0;
                border-radius: 2px;
                border: 1px solid #0000008f;

                img {
                    height: var(--action-image-height);
                }

                a {
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }

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

                .name {
                    color: var(--color-disabled);
                    text-decoration: line-through;
                }
            }
        }
    }

    &:not(.pf2e-hud-fadeout) {
        .item {
            .controls {
                [data-action="toggle-stance"] {
                    &.disabled {
                        pointer-events: all;
                    }
                }
            }
        }
    }
}