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

.combat-values {
    margin-top: variables.$margin-sm;
    .combat-value-with-formula {
        $size: 60px;
        display: grid;
        place-items: center;
        row-gap: variables.$margin-sm;
        .combat-value {
            $combat-values-icons-path: "#{variables.$official-icons-path}/combat-values";
            @include mixins.centered-content;
            height: $size;
            width: $size;
            flex: 0 0 auto;
            background-size: contain;
            font-size: 1.5em;
            &.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");
            }
        }

        .combat-value-formula {
            width: $size;
            text-align: center;
            span {
                line-height: variables.$default-input-height;
            }
        }
    }
}