/******************************************************************************
 * Which Is Bigger? — Sound control — Version 0.2.17 Alpha
 ******************************************************************************/

#game-board{
    position:relative;
}

#sound-toggle-button{
    position:absolute;
    left:50%;
    top:var(--card-size);
    width:clamp(42px,3.45vw,51px);
    height:clamp(42px,3.45vw,51px);
    min-width:0;
    padding:0;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:var(--color-surface);
    color:var(--color-text-muted);
    border:1px solid var(--color-border);
    box-shadow:0 5px 14px rgba(0,0,0,.22);
    transform:translateX(-50%);
    z-index:2;
}

#sound-toggle-button:hover{
    background:var(--color-surface-light);
    color:var(--color-text);
    transform:translateX(-50%);
}

#sound-toggle-button:active{
    transform:translateX(-50%) scale(.94);
}

#sound-toggle-button[aria-pressed="true"]{
    color:var(--color-text-muted);
    opacity:.72;
}

#sound-toggle-button svg{
    width:58%;
    height:58%;
    display:block;
}

#sound-toggle-button svg[hidden]{
    display:none;
}

@media(max-width:700px){
    #sound-toggle-button{
        top:calc(var(--card-size) + 9px);
        width:39px;
        height:39px;
        border-radius:9px;
    }
}