.icon-group {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.icon-wrapper {
    width: 103px;
    height: 110px;
    position: relative;
    background-color: var(--empty-color);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    overflow: hidden;
    cursor: pointer;
}
.icon-wrapper {
  --fill-duration: 0.4s;
  --reset-duration: 0.4s;
}
.icon-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--fill-color);
    transform: translateY(100%);
    transition: transform var(--fill-duration) ease-in-out;
}

/* Fully filled icons */
.icon-wrapper.filled::before {
    transform: translateY(0);
}

/* Partially filled icons */
.icon-wrapper.partial::before {
    transform: translateY(var(--partial-fill));
}

/* Hover animation only for unfilled icons */
.icon-wrapper:not(.filled):hover::before {
    transform: translateY(0);
}

.icon-wrapper.reset::before {
    transform: translateY(100%);
    transition: transform var(--reset-duration) ease-in-out;
}