/* 外部 SVG 图标（mask 着色，跟随 currentColor） */
.icon,
.btn-icon-svg,
.page-btn-icon,
.item-storage-icon {
    display: inline-block;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: var(--icon-src);
    mask-image: var(--icon-src);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.icon--12 { width: 12px; height: 12px; }
.icon--16 { width: 16px; height: 16px; }
.icon--17 { width: 17px; height: 17px; }
.icon--18 { width: 18px; height: 18px; }
.icon--20 { width: 20px; height: 20px; }
.icon--32 { width: 32px; height: 32px; }

.icon--flip {
    transform: scaleX(-1);
}

.btn-icon-svg,
.item-storage-icon {
    width: 16px;
    height: 16px;
}

.page-btn-icon {
    width: 18px;
    height: 18px;
}

.page-btn-icon--next {
    transform: scaleX(-1);
}

.search-icon.icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.gamepad-badge .icon {
    width: 58%;
    height: 58%;
}

.oss-sync-icon.icon {
    width: 18px;
    height: 18px;
}

.logo-preview .icon,
.avatar-preview .icon {
    opacity: 0.55;
}

.topbar-brand-mark .icon {
    width: 18px;
    height: 18px;
}

.item-edit-back-icon.icon {
    width: 16px;
    height: 16px;
}