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;

  &__value {
    $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");
    }
  }

  &__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;
  }
}