/**
 * zikao-tool 主题切换器 UI
 *
 * 浮动按钮 + 弹出菜单，三态：auto / light / dark
 * 默认 display:none（由 theme-switcher.js 就绪后显示，避免 FOUC）
 * 位置由 data-position 属性控制：bottom-right | bottom-left | top-right | top-left
 */

.zikao-theme-switcher {
    position: fixed;
    z-index: 99990; /* 低于 toast(99999) 和 modal(1050) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---------- 位置 ---------- */
.zikao-theme-switcher[data-position="bottom-right"] { right: 20px; bottom: 20px; }
.zikao-theme-switcher[data-position="bottom-left"]  { left: 20px;  bottom: 20px; }
.zikao-theme-switcher[data-position="top-right"]    { right: 20px; top: 80px; }
.zikao-theme-switcher[data-position="top-left"]     { left: 20px;  top: 80px; }

/* ---------- 切换按钮 ---------- */
.zikao-theme-switcher__toggle {
    width: 40px;
    height: 40px;
    border-radius: var(--zikao-radius-pill, 999px);
    border: 1px solid var(--zikao-border, #ebeef5);
    background: var(--zikao-bg-1, #fff);
    color: var(--zikao-text-2, #606266);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--zikao-shadow-2, 0 2px 8px rgba(0,0,0,0.06));
    transition: all var(--zikao-duration, 200ms) var(--zikao-easing, ease);
    padding: 0;
}

.zikao-theme-switcher__toggle:hover {
    color: var(--zikao-primary, #4a90d9);
    border-color: var(--zikao-primary, #4a90d9);
    transform: scale(1.05);
    box-shadow: var(--zikao-shadow-3, 0 4px 16px rgba(0,0,0,0.08));
}

.zikao-theme-switcher__toggle:focus-visible {
    outline: 2px solid var(--zikao-primary, #4a90d9);
    outline-offset: 2px;
}

/* ---------- 按钮图标（按当前态显示） ---------- */
.zikao-theme-switcher__toggle .zk-ts-icon { display: none; }
.zikao-theme-switcher__toggle.is-auto  .zk-ts-icon--auto  { display: block; }
.zikao-theme-switcher__toggle.is-light .zk-ts-icon--sun   { display: block; }
.zikao-theme-switcher__toggle.is-dark  .zk-ts-icon--moon  { display: block; }

/* ---------- 弹出菜单 ---------- */
.zikao-theme-switcher__menu {
    position: absolute;
    bottom: 48px;
    right: 0;
    min-width: 140px;
    background: var(--zikao-bg-1, #fff);
    border: 1px solid var(--zikao-border, #ebeef5);
    border-radius: var(--zikao-radius, 8px);
    box-shadow: var(--zikao-shadow-3, 0 4px 16px rgba(0,0,0,0.08));
    padding: 4px;
    animation: zkTsMenuIn var(--zikao-duration, 200ms) var(--zikao-easing-out, ease);
}

.zikao-theme-switcher[data-position="top-right"] .zikao-theme-switcher__menu,
.zikao-theme-switcher[data-position="top-left"] .zikao-theme-switcher__menu {
    bottom: auto;
    top: 48px;
}

.zikao-theme-switcher[data-position="bottom-left"] .zikao-theme-switcher__menu,
.zikao-theme-switcher[data-position="top-left"] .zikao-theme-switcher__menu {
    right: auto;
    left: 0;
}

@keyframes zkTsMenuIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 菜单项 ---------- */
.zikao-theme-switcher__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--zikao-text-2, #606266);
    font-size: var(--zikao-fs-base, 14px);
    cursor: pointer;
    border-radius: var(--zikao-radius-sm, 4px);
    transition: background var(--zikao-duration-fast, 150ms);
    text-align: left;
}

.zikao-theme-switcher__item:hover {
    background: var(--zikao-bg-3, #f5f7fa);
    color: var(--zikao-text-1, #303133);
}

.zikao-theme-switcher__item.is-active {
    color: var(--zikao-primary, #4a90d9);
    background: var(--zikao-primary-light, #ecf5ff);
    font-weight: 500;
}

.zikao-theme-switcher__item svg {
    flex-shrink: 0;
}

/* ---------- 响应式 ---------- */
@media (max-width: 480px) {
    .zikao-theme-switcher[data-position="bottom-right"] { right: 12px; bottom: 12px; }
    .zikao-theme-switcher[data-position="bottom-left"]  { left: 12px;  bottom: 12px; }
    .zikao-theme-switcher__toggle { width: 36px; height: 36px; }
    .zikao-theme-switcher__menu { bottom: 44px; min-width: 120px; }
}

/* ---------- 无障碍 ---------- */
@media (prefers-reduced-motion: reduce) {
    .zikao-theme-switcher__toggle,
    .zikao-theme-switcher__menu {
        transition: none;
        animation: none;
    }
}