:root {
    --icon-scout: url('inline://images/scout.svg');
    --icon-soldier: url('inline://images/soldier.svg');
    --icon-pyro: url('inline://images/pyro.svg');
    --icon-demo: url('inline://images/demo.svg');
    --icon-heavy: url('inline://images/heavy.svg');
    --icon-engineer: url('inline://images/engineer.svg');
    --icon-medic: url('inline://images/medic.svg');
    --icon-sniper: url('inline://images/sniper.svg');
    --icon-spy: url('inline://images/spy.svg');
}

.class.scout {
    mask-image: var(--icon-scout);
}
.class.soldier {
    mask-image: var(--icon-soldier);
}
.class.pyro {
    mask-image: var(--icon-pyro);
}
.class.demoman {
    mask-image: var(--icon-demo);
}
.class.heavyweapons {
    mask-image: var(--icon-heavy);
}
.class.engineer {
    mask-image: var(--icon-engineer);
}
.class.medic {
    mask-image: var(--icon-medic);
}
.class.sniper {
    mask-image: var(--icon-sniper);
}
.class.spy {
    mask-image: var(--icon-spy);
}

.red.class {
    background: #a75d50;
}
.blue.class {
    background: #5b818f;
}
.class {
    mask-origin: content-box;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    filter: brightness(60%);
}