@import "../../../common.scss";

DamageNumber {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.15s ease;

    div {
        font-size: 108px;
        font-family: $font-family;
        background-color: rgba(black, 0.3);
        border: 2px solid rgba(black, 0.3);
        border-radius: 12px;
        padding: 4px 20px;
        text-shadow: 2px 2px 2px rgba(black, 0.75);
        text-stroke: 4px black;
        margin: 2px 0;

        &.heal {
            color: limegreen;
        }

        &.damage {
            color: red;
        }
    }

    &:outro {
        opacity: 0;
    }
}