.settings-bar{
position:absolute;
top:170px;
left:50%;
transform:translateX(-50%);

display:flex;
align-items:center;
gap:16px;

background:var(--panel);
padding:10px 18px;
border-radius:12px;

font-size:14px;
color:var(--muted);

box-shadow:0 6px 18px rgba(0,0,0,.35);
}



/* options */

.option{
display:flex;
align-items:center;
gap:6px;
cursor:pointer;
opacity:.75;
transition:.15s;
}

.option:hover{
color:var(--text);
opacity:1;
}

.option.active{
color:var(--accent);
opacity:1;
}



/* time group */

.time-group{
display:flex;
gap:12px;
}

.time{
cursor:pointer;
opacity:.75;
transition:.15s;
}

.time:hover{
color:var(--text);
opacity:1;
}

.time.active{
color:var(--accent);
opacity:1;
}



/* separators */

.divider{
width:1px;
height:18px;
background:var(--border);
}



/* buttons */

.menu-btn,
.expand-btn,
.close-btn{
cursor:pointer;
font-size:15px;
opacity:.8;
transition:.15s;
}

.menu-btn:hover,
.expand-btn:hover,
.close-btn:hover{
color:var(--text);
opacity:1;
}



/* collapsed state */

.settings-bar.collapsed{
padding:10px 14px;
gap:12px;
}

.settings-bar.collapsed .option,
.settings-bar.collapsed .divider,
.settings-bar.collapsed .time-group,
.settings-bar.collapsed .close-btn{
display:none;
}



/* hide arrow when menu is open */

.menu-open .expand-btn{
display:none;
}



/* default state */

.expand-btn{
display:none;
}



/* collapsed state */

.settings-bar.collapsed .expand-btn{
display:block;
}

.settings-bar.collapsed .option,
.settings-bar.collapsed .divider,
.settings-bar.collapsed .time-group,
.settings-bar.collapsed .close-btn{
display:none;
}



/* kana options */

#kana-options{
display:flex;
gap:26px;
align-items:flex-start;
}

#kana-options .option{
font-size:15px;
}



/* kana groups */

.kana-group{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

cursor:pointer;

opacity:.35;
transition:.15s;

min-width:28px;
}

.kana-group .kana{
font-size:20px;
line-height:20px;
}

.kana-group .label{
font-size:12px;
margin-top:4px;
}

.kana-group.active{
opacity:1;
color:var(--accent);
}

.kana-group:hover{
opacity:.8;
}