/******************************************************************************
 * Which Is Bigger? — Timer testing controls — Version 0.2.11 Alpha
 ******************************************************************************/

#round-timer{
    position:relative;
}

#pause-timer-button{
    position:absolute;
    left:calc(100% + 10px);
    top:50%;
    transform:translateY(-50%);
    min-width:72px;
    padding:7px 10px;
    border-radius:10px;
    font-size:.72rem;
    line-height:1;
    white-space:nowrap;
    background:var(--color-surface-light);
    color:var(--color-text);
    border:1px solid var(--color-border);
}

#pause-timer-button:hover{
    background:var(--color-primary);
    transform:translateY(-50%);
}

#pause-timer-button:disabled{
    opacity:.45;
    cursor:default;
}

#pause-timer-button[aria-pressed="true"]{
    background:var(--color-warning);
    color:#111827;
}

@media(max-width:700px){
    #pause-timer-button{
        left:calc(100% + 6px);
        min-width:62px;
        padding:6px 7px;
        font-size:.64rem;
    }
}