.dice {
    position: relative;
    height: 2rem;
    aspect-ratio: 1;
    font-size: 1rem;
    paint-order: stroke fill;
    -webkit-text-stroke: 2px black;
    z-index: 1;

    &.xxs {
        height: 1rem;
        font-size: 0.5rem;
        -webkit-text-stroke: 1px black;
    }

    &.xs {
        height: 1.5rem;
        font-size: 0.75rem;
    }

    &.lg {
        height: 2.5rem;
        font-size: 1.25rem;
    }

    &.xl {
        height: 3rem;
        font-size: 1.5rem;
    }

    &.discarded {
        opacity: 0.5;
    }

    &:before {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        mask: var(--svg-die) no-repeat center;
        mask-size: contain;
        background: linear-gradient(139.01deg, #efe6d8 3.51%, #372e1f 96.49%);
    }

    &.d4:before {
        --svg-die: url(../assets/icons/dice/default/d4.svg);
    }
    &.d6:before {
        --svg-die: url(../assets/icons/dice/default/d6.svg);
    }
    &.d8:before {
        --svg-die: url(../assets/icons/dice/default/d8.svg);
    }
    &.d10:before {
        --svg-die: url(../assets/icons/dice/default/d10.svg);
    }
    &.d12:before {
        --svg-die: url('../assets/icons/dice/default/d12.svg');
    }
    &.d20:before {
        --svg-die: url(../assets/icons/dice/default/d20.svg);
    }

    &.color-hope:before {
        background: linear-gradient(139.01deg, #f3c267 3.51%, #4c3407 96.49%);
    }

    &.color-fear:before {
        background: linear-gradient(151.21deg, #352ab2 7.21%, #18162e 92.79%);
    }

    &.color-adv:before {
        background: linear-gradient(139.01deg, #40a640 3.51%, #011b01 96.49%);
    }

    &.color-dis:before {
        background: linear-gradient(139.01deg, #e54e4e 3.51%, #3c0000 82.19%);
    }

    &.coin:before {
        border-radius: 50%;
    }
}