ds4/scss/components/actor/_combat_value.scss

/*
 * SPDX-FileCopyrightText: 2021 Johannes Loher
 *
 * SPDX-License-Identifier: MIT
 */

@use "../../utils/mixins";
@use "../../utils/variables";

.ds4-combat-value {
    $size: 3.75rem;

    display: grid;
    place-items: center;
    row-gap: 0.125em;

    &__total {
        $combat-values-icons-path: "#{variables.$official-icons-path}/combat-values";
        @include mixins.centered-content;

        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        font-size: 1.5em;
        height: $size;
        width: $size;

        &--hitPoints {
            background-image: url("#{$combat-values-icons-path}/hit-points.png");
        }
        &--defense {
            background-image: url("#{$combat-values-icons-path}/defense.png");
        }
        &--initiative {
            background-image: url("#{$combat-values-icons-path}/initiative.png");
        }
        &--movement {
            background-image: url("#{$combat-values-icons-path}/movement-rate.png");
        }
        &--meleeAttack {
            background-image: url("#{$combat-values-icons-path}/melee-attack.png");
        }
        &--rangedAttack {
            background-image: url("#{$combat-values-icons-path}/ranged-attack.png");
        }
        &--spellcasting {
            background-image: url("#{$combat-values-icons-path}/spellcasting.png");
        }
        &--targetedSpellcasting {
            background-image: url("#{$combat-values-icons-path}/targeted-spellcasting.png");
        }
        &--mana {
            background-image: url("#{$combat-values-icons-path}/mana.png");
        }
    }

    &__label {
        @include mixins.font-heading-upper;
        font-size: 1.2em;
        white-space: nowrap;
    }

    &__formula {
        align-items: center;
        justify-content: space-between;
        display: flex;
        gap: 0.15em;
        text-align: center;
        width: $size;
    }

    &__formula-base,
    &__formula-modifier {
        flex: 1 1 4em;
    }
}