.menu-btn{
background:transparent;
border:none;
cursor:pointer;
width:var(--icx);
height:var(--icx);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5px;
border-radius:50%;
user-select:none;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
@media(hover:hover){
.menu-btn:hover{
background:var(--sh3);
}
}
.menu-btn.active{
background:var(--sh3);
}
.menu-btn.pressed{
background:rgba(128,128,128,0.3);
}
.menu-btn span{
display:block;
width:var(--dot);
height:var(--dot);
border-radius:50%;
background:var(--cl1);
}
.menu-hamburger{
display:none;
width:60%;
height:60%;
color:var(--cl1);
}
.menu-dropdown{
position:absolute;
top:calc(100% + 8px);
right:0;
min-width:190px;
border-radius:10px;
border:var(--bt2) solid var(--bd3);
opacity:0;
visibility:hidden;
transform:translateY(-8px);
z-index:100;
user-select:none;
background:var(--bg3);
}
.menu-dropdown.open{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.menu-dropdown a{
display:block;
padding:14px 20px;
text-decoration:none;
font-size:var(--fz1);
letter-spacing:var(--ls1);
font-weight:500;
user-select:none;
touch-action:manipulation;
color:var(--cl1);
}
.menu-dropdown a:first-child{
border-radius:8px 8px 0 0;
}
.menu-dropdown a:hover{
background:var(--sh5);
}
.theme-switch-wrapper{
display:flex;
align-items:center;
justify-content:center;
padding:14px 20px;
border-top:var(--bt2) solid var(--bd4);
border-radius:0 0 8px 8px;
user-select:none;
}
.theme-switch{
position:relative;
display:inline-block;
width:78px;
height:34px;
user-select:none;
}
.theme-switch-input{
opacity:0;
width:0;
height:0;
position:absolute;
}
.theme-switch-slider{
position:absolute;
cursor:pointer;
inset:0;
border-radius:34px;
transition:background-color 0.2s;
display:flex;
align-items:center;
padding:0 8px;
touch-action:manipulation;
background:var(--sh4);
}
.theme-switch-slider::before{
position:absolute;
content:"";
height:26px;
width:26px;
left:4px;
bottom:4px;
border-radius:50%;
transition:transform 0.2s;
z-index:2;
background:var(--cl1);
}
.theme-switch-text{
position:absolute;
font-size:var(--fz1);
font-weight:500;
pointer-events:none;
user-select:none;
transition:all 0.2s;
z-index:1;
transform:translateX(-50%);
color:var(--cl1);
}
[data-theme="dark"] .theme-switch-text{
left:51px;
}
[data-theme="light"] .theme-switch-text{
left:27px;
}
[data-theme="light"] .menu-dropdown{
box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.theme-switch-input:checked + .theme-switch-slider::before{
transform:translateX(44px);
}
.theme-switch-input:focus-visible + .theme-switch-slider{
outline:2px solid var(--cl3);
outline-offset:2px;
}