/* =====================================================================
 * 昼夜切换图标（Uiverse.io · ArturCodeCraft 改版）
 * 尺寸 28px（由 32px 按 0.875 等比缩放），过渡 .3s（原 .4s）。
 * 顶部导航栏按钮 + 右侧浮动按钮共用；hover 触发「太阳縮小 / 月亮遮罩」形变。
 * 太阳背景 rgb(255,204,0)，月亮遮罩 #212121 —— 亮 / 暗主题下均清晰可见。
 * 后台「明暗过渡 → 全局设置 → 启用新昼夜图标样式」控制开关。
 * ===================================================================== */

/* —— reset —— */
button.theme__icon,
a.theme__icon {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: 0;
}

/* —— 容器 —— */
.theme__icon {
    width: 28px;
    height: 28px;
    padding: 3px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/* —— 去掉父主题 .toggle-radius 给导航栏/浮动按钮切换按钮的深色圆形背景（黑圈） —— */
a.toggle-theme.toggle-radius,
.navbar .toggle-theme.toggle-radius,
.header .toggle-theme.toggle-radius,
.pull-right .toggle-theme.toggle-radius {
    background: transparent !important;
    --this-bg: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* —— 右侧浮动按钮：去掉内联深色 --this-bg 背景（黑圈），仅留 hover 底色 —— */
.float-btn.toggle-theme {
    background: transparent !important;
    --this-bg: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.float-btn.toggle-theme:hover {
    background: rgba(170, 170, 170, 0.12) !important;
}

/* 太阳圆盘（默认态） */
.theme__icon > :nth-child(1) {
    width: 12px;
    height: 12px;
    border-radius: 24px;
    border: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(255, 204, 0);
    transition: width .3s, height .3s, background-color .3s;
    z-index: 10;
}

/* hover：太阳放大并转为浅色，露出月亮 */
.theme__icon:hover > :nth-child(1),
.float-btn.toggle-theme:hover .theme__icon > :nth-child(1) {
    width: 21px;
    height: 21px;
    border: none;
    background-color: rgb(245, 245, 247);
}

/* 太阳光芒（4 根条）容器 */
.theme__icon > :nth-child(2) {
    width: 21px;
    height: 21px;
    border-radius: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .3s;
}

.theme__icon:hover > :nth-child(2),
.float-btn.toggle-theme:hover .theme__icon > :nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg) scale(.8);
}

.theme__icon > :nth-child(2) > :nth-child(1) {
    display: block;
    width: 2px;
    height: 21px;
    border-radius: 2px;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(255, 204, 0);
}
.theme__icon > :nth-child(2) > :nth-child(2) {
    display: block;
    width: 21px;
    height: 2px;
    border-radius: 2px;
    position: relative;
    top: -54%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(255, 204, 0);
}
.theme__icon > :nth-child(2) > :nth-child(3) {
    display: block;
    width: 21px;
    height: 2px;
    border-radius: 2px;
    position: relative;
    top: -60%;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    background-color: rgb(255, 204, 0);
}
.theme__icon > :nth-child(2) > :nth-child(4) {
    display: block;
    width: 21px;
    height: 2px;
    border-radius: 2px;
    position: relative;
    top: -70%;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
    background-color: rgb(255, 204, 0);
}

/* 月亮遮罩（默认藏在右侧外，hover 滑入形成月牙） */
.theme__icon > :nth-child(3) {
    width: 18px;
    height: 18px;
    border-radius: 24px;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    background-color: #212121;
    transition: top .3s, left .3s;
    transition-delay: .15s;
    z-index: 20;
}

.theme__icon:hover > :nth-child(3),
.float-btn.toggle-theme:hover .theme__icon > :nth-child(3) {
    top: 35%;
    left: 40%;
}

/* —— 父主题导航栏内对齐（PC + 移动端） —— */
.navbar .toggle-theme .theme__icon,
.header .toggle-theme .theme__icon,
.pull-right .toggle-theme .theme__icon {
    margin: 0 2px;
    vertical-align: middle;
}

/* —— 子主题自定义顶栏对齐 —— */
.top-bar .theme__icon {
    margin: 0 4px;
}

/* —— 右侧浮动按钮：图标居中 —— */
.float-btn.toggle-theme {
    display: flex;
    align-items: center;
    justify-content: center;
}