/* DLBunny 设置功能样式 - 复刻savemp3.net */

/* ===== CSS变量 ===== */
:root {
    --clr-background: #f4f7f9;
    --clr-brand-primary: #00c084;
    --clr-card: #fdfdfe;
    --clr-border: #dbdbdb;
    --clr-social-bg: #fdfdfe;
    --clr-social-bg-hover: #f4f7f9;
    --clr-social-icon: #364364;
    --radius: 6px;
    --text: #364364;
    --text-dark: #000;
}

/* ===== 简洁模式样式 ===== */
[data-mode="compact"] .compact-hide,
body.compact-mode .compact-hide {
    display: none !important;
}

/* ===== 设置按钮容器 ===== */
.settings {
    position: relative;
}

/* ===== 页头导航项垂直居中 ===== */
.nav-item {
    display: flex !important;
    align-items: center !important;
}

/* ===== 设置按钮 ===== */
.settings--init {
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}

.settings--init:hover {
    background-color: transparent !important;
}

.settings--init svg {
    transition: transform 0.25s ease-in-out;
}

.settings--init:hover svg {
    transform: rotate(30deg);
}

/* ===== 设置菜单 ===== */
.settings--menu {
    background-color: var(--clr-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    flex-direction: column;
    gap: 0;
    width: 280px;
    padding: 0;
    list-style: none;
    margin: 0;
    transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    transform: translateY(-10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.settings.is-active .settings--menu,
.settings--init:focus + .settings--menu,
.settings--menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 点击按钮时显示菜单 */
.settings.show .settings--menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ===== 菜单标题 ===== */
.menu--label {
    border-bottom: 1px solid var(--clr-border);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    color: var(--text-dark);
    background-color: #fff;
    padding: 12px 18px 14px;
    font-size: 1.125rem;
    font-weight: 600;
    display: block;
    margin: 0;
}

/* ===== 菜单项 ===== */
.settings--item {
    border-radius: var(--radius);
    cursor: pointer;
    align-items: center;
    gap: 1rem;
    margin: 0 0.75rem;
    padding: 0.75rem 1rem;
    transition: all 0.25s ease-in-out;
    display: flex;
}

.settings--item:hover {
    background-color: var(--clr-background);
    color: var(--text-dark);
    transition: all 0.25s ease-in-out;
}

.settings--item svg {
    --icon-size: 1.125rem;
    width: var(--icon-size);
    height: var(--icon-size);
    fill: var(--text);
    flex-shrink: 0;
}

.settings--item .text {
    margin-right: auto;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

/* ===== Toggle开关 ===== */
.toggle--switch {
    --clr-toggle-on: var(--clr-brand-primary);
    --clr-toggle-off: #e65757;
    --toggle-width: 44px;
    --toggle-height: 24px;
    cursor: pointer;
    height: var(--toggle-height);
    perspective: 50px;
    width: var(--toggle-width);
    border-radius: 50px;
    display: block;
    position: relative;
}

.toggle--switch input {
    opacity: 0;
    width: 1px;
    height: 1px;
    position: absolute;
}

.toggle--switch label {
    appearance: none;
    border-radius: inherit;
    box-shadow: none;
    cursor: pointer;
    height: var(--toggle-height);
    transform-style: preserve-3d;
    width: var(--toggle-width);
    background: transparent;
    border: 0;
    outline: none;
    margin: 0;
    display: block;
    position: relative;
}

.toggle--switch label:before,
.toggle--switch label:after {
    backface-visibility: hidden;
    border-radius: inherit;
    content: "";
    height: inherit;
    text-align: center;
    width: inherit;
    position: absolute;
    top: 0;
    left: 0;
}

.toggle--switch label:before {
    background: var(--clr-toggle-off, #e65757);
    z-index: 2;
    transform: rotateY(0);
}

.toggle--switch label:after {
    background: var(--clr-toggle-on);
    transform: rotateY(180deg);
}

.toggle--switch input:checked + label {
    animation: check 0.6s ease-out;
    transform: rotateY(180deg);
}

/* Toggle文字样式 */
.toggle--switch.toggle--text label:before,
.toggle--switch.toggle--text label:after {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: var(--toggle-height);
}

.toggle--switch.toggle--text label:before {
    content: "OFF";
}

.toggle--switch.toggle--text label:after {
    content: "ON";
}

/* Toggle动画 */
@keyframes check {
    0% {
        transform: rotateY(0);
    }
    50% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(180deg);
    }
}

@keyframes uncheck {
    0% {
        transform: rotateY(180deg);
    }
    50% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(0);
    }
}

/* ===== 响应式 ===== */
@media only screen and (max-width: 767px) {
    .settings--menu {
        width: 100%;
        position: fixed;
        top: 100%;
        left: 0;
        right: 0;
    }
}