div.damage-class {
    display: inline-block;
	line-height: 20px;
	height: 20px;
	padding: 0px;
	margin: 6px 0px;
	font-weight: bold;
	font-family: monospace;
	text-shadow: 1px 1px 2px black;
	border-radius: 3px;

    /* width: 74px; */ 
    flex-shrink: 1; 
    padding: 0 2px;    

    text-align: center;

    &::before {
        content: '';
        position: relative;
        display: block;
        margin-top: 2px;
        background-size: contain;
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        filter: drop-shadow(2px 2px 2px rgba(0,0,0,.4));
    }
    
    &[data-damage-id="1"] {
        background-color: #828282;
        color: #FFFFFF;
        border-color: #6D6662;
        &::before {
            background-size: 14px;
            background-position-x: 1px;
            background-position-y: 1px;
            background-image: url(../../../res/damage-class-status.png);
        }
    }
    &[data-damage-id="2"] {
        background-color: #EB5628;
        color: #FFF064;
        border-color: #EB1414;
        &::before {
            background-size: 18px;
            background-position-x: -1px;
            background-position-y: -1px;
            background-image: url(../../../res/damage-class-physical.svg);
        }
    }
    &[data-damage-id="3"] {
        background-color: #4A68D3;
        color: #91E1E1;
        border-color: #2350AF;
        &::before{
            background-size: 14px;
            background-position-x: 1px;
            background-position-y: 1px;
            background-image: url(../../../res/damage-class-special.svg);
        }
    }

}