/* i18n.css - 国际化相关样式 */

/* 页面加载状态 */
[data-i18n-loading="true"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

[data-i18n-loading="true"] .language-switcher {
    opacity: 1;
    visibility: visible;
}

/* 页面内容显示 */
html:not([data-i18n-loading]) {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* 语言切换按钮样式 */
.language-switcher {
    display: flex;
    gap: 8px;
    padding: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
}

.language-switcher button {
    padding: 6px 12px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.language-switcher button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.language-switcher button.active {
    background: rgba(255, 255, 255, 0.2);
}

.language-switcher button.is-loading {
    opacity: 0.7;
    cursor: not-allowed;
}

/* 占位符文本样式 */
[data-i18n]:empty::before {
    content: attr(data-i18n);
    opacity: 0.5;
    font-style: italic;
}