/* ROOT 开始 */
img.myf-preview, img.myf-preview-blank {
    cursor: zoom-in;
}

/* ROOT 结束 */

/* star 开始 */
.myf-star-group {
    display: inline-flex;
    /*--fill-color: gold;*/
    /*--stroke-color: darkgoldenrod;*/
    --fill-color: #f5b501;
    --stroke-color: #f5b501;
}

.myf-star-group .star-group-item {
    cursor: pointer;
    transition: all 0.3s ease;
}

.myf-star-group[data-star-readonly] .star-group-item {
    cursor: auto;
}

.myf-star-group[data-star-readonly='false'] .star-group-item {
    cursor: pointer;
}


.myf-star-group .star-group-item svg {
    width: 1em;
    height: 1em;
    transition: all 0.3s ease;
}

/* 默认状态 */
.myf-star-group .star-group-item .half {
    display: none;
    fill: none;
}

.myf-star-group .star-group-item .inside {
    fill: transparent;
    stroke: none;
    stroke-width: 2;
}

.myf-star-group .star-group-item .outside {
    --star-opacity: 1;
    fill: var(--fill-color);
    opacity: var(--star-opacity);
}

.myf-star-group[data-star-readonly] .star-group-item .outside {
    --star-opacity: 0.8;
}

.myf-star-group[data-star-readonly='false'] .star-group-item .outside {
    --star-opacity: 1;
}

/* 活跃状态 */
.myf-star-group .star-group-item.active .half {
    display: inline-block;
}

.myf-star-group .star-group-item.active-half .half {
    fill: var(--fill-color);
    stroke: var(--stroke-color);
}

.myf-star-group .star-group-item.active.active-half .inside {
    fill: none;
    stroke: none;
}

.myf-star-group .star-group-item.active:not(.active-half) .inside {
    fill: var(--fill-color);
    stroke: var(--stroke-color);
}

.myf-star-group .star-group-item.active .outside {
    fill: var(--stroke-color);
}

/* 悬停状态 - 从前往后亮起 */
.myf-star-group .star-group-item.hover .half {
    fill: none;
    stroke: none;
}

.myf-star-group .star-group-item.hover .inside {
    fill: var(--fill-color) !important;
    stroke: var(--stroke-color);
    animation: glow 0.3s ease-in-out forwards;
}

.myf-star-group .star-group-item.hover .outside {
    fill: var(--stroke-color);
    animation: glow 0.3s ease-in-out forwards;
}

/* 悬停状态 - 从前往后亮起 */
.myf-star-group .star-group-item.no-hover .inside {
    fill: none;
}

.myf-star-group .star-group-item.no-hover .outside {
    fill: var(--stroke-color);
}

.myf-star-group:not[data-star-readonly] .star-group-item:hover {
    animation: pulse 0.5s ease-in-out;
}


/* 动画效果 */
@keyframes glow {
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* star 结束 */