.json-mode-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:4px;
height:var(--face);
padding:0 14px;
background-color:var(--bg3);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
color:var(--tx2);
font-family:var(--ff2);
font-size:16px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
cursor:pointer;
box-sizing:border-box;
transition:60ms;
}
.json-mode-btn:hover{
background-color:var(--hv1);
border-color:var(--cl1);
color:var(--cl1);
}
.json-mode-btn.active{
background-color:var(--cl1);
border-color:var(--cl1);
color:var(--blk);
}
.json-mode-btn.pressed{
transform:translateY(2px) scale(0.97);
}
.json-indent-control{
display:inline-flex;
align-items:center;
gap:2px;
height:var(--face);
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:calc(var(--face) / 2);
padding:3px;
box-sizing:border-box;
transition:opacity .15s;
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
}
@media(max-width:900px){
.json-indent-control{
position:static;
transform:none;
}
}
.json-indent-btn{
display:flex;
align-items:center;
justify-content:center;
width:calc(var(--face) - 8px);
height:calc(var(--face) - 8px);
padding:0;
font-family:var(--ff2);
font-size:13px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0;
color:var(--tx3);
background:none;
border:none;
border-radius:50%;
cursor:pointer;
box-sizing:border-box;
flex-shrink:0;
}
.json-indent-btn:hover:not(.active){
color:var(--tx2);
background-color:var(--hv1);
}
.json-indent-btn.active{
background-color:var(--cl1);
color:var(--blk);
}