:root {
    --icon-color-default: #000000;
    --icon-color-focus: #7560d9;
}

/* 网站图标使用各自预设的默认色与选中态颜色，不受用户全局主题影响。 */
.site-icon-colors {
    --icon-color-default: var(--site-icon-default, #000000);
    --icon-color-focus: var(--site-icon-focus, #7560d9);
}

.svg-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    overflow: visible;
    color: var(--icon-color-default);
    fill: currentColor;
    vertical-align: -0.125em;
    flex: 0 0 auto;
    transition: color 0.18s ease;
}

.svg-icon-1 { width: 1em; height: 1em; }
.svg-icon-1-5 { width: 1.25em; height: 1.25em; }
.svg-icon-2 { width: 1.5em; height: 1.5em; }
.svg-icon-3 { width: 2em; height: 2em; }
.svg-icon-4 { width: 3em; height: 3em; }

.uploaded-svg-icon {
    display: inline-block;
    color: var(--icon-color-default);
    background-color: currentColor;
    mask-image: var(--icon-source);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: var(--icon-source);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    transition: color 0.18s ease;
}

.mygray,
.letter-icon,
.letter-preview {
    color: var(--icon-color-default);
    transition: color 0.18s ease;
}

.item_side_active .svg-icon,
.item_side:hover .svg-icon,
.item_meun:hover .svg-icon,
.de_select:hover .svg-icon,
.button:hover .svg-icon,
.page_item:hover .svg-icon,
.select_item:hover .svg-icon,
.select_item:hover .uploaded-svg-icon,
.web_item:hover .svg-icon,
.web_item:hover .uploaded-svg-icon,
.web_item:active .svg-icon,
.web_item:active .uploaded-svg-icon,
.shortcut-slot:hover .svg-icon,
.shortcut-slot:hover .uploaded-svg-icon,
.shortcut-slot:focus-within .svg-icon,
.shortcut-slot:focus-within .uploaded-svg-icon,
.available-preset:hover .svg-icon,
.available-preset:hover .uploaded-svg-icon,
.available-preset:focus-within .svg-icon,
.available-preset:focus-within .uploaded-svg-icon,
.preset-row:hover .svg-icon,
.preset-row:hover .uploaded-svg-icon,
.preset-row:focus-within .svg-icon,
.preset-row:focus-within .uploaded-svg-icon,
.wallpaper-action-icon:hover .svg-icon,
.icon-button:hover .svg-icon,
a:focus-visible .svg-icon,
button:focus-visible .svg-icon {
    color: var(--icon-color-focus);
}

.selected-search-engine .svg-icon,
.selected-search-engine .uploaded-svg-icon,
.selected-search-engine .letter-icon {
    color: var(--icon-color-focus);
}

/* 壁纸上的系统控件固定继承白色，确保任何背景下都有足够对比度。 */
.head .svg-icon,
.page_item .svg-icon,
.head a:focus-visible .svg-icon,
.page_item:focus-visible .svg-icon,
.page_item:hover .svg-icon {
    color: inherit;
}

.modal_close,
.modal_header a:focus-visible .modal_close {
    color: #fff;
}