TimerWidget {
    layout: horizontal;
    height: 5;
    background: $panel-darken-1;
    border: tall $panel-darken-2;
    margin: 1;
    padding: 0 1;
    transition: background 300ms linear;
}

TimerWidget.started {   
    text-style: bold;
    background: $success;
    color: $text-success;
    border: tall $success-darken-2;
}


TimeDisplay {
    content-align: center middle;
    opacity: 60%;
    height: 3;
}

TimerWidget.started TimeDisplay {
    opacity: 100%;
}

Button {
    width: 16;    
}

#start {
    dock: left;
}


TimerWidget.started #start {
    display: none
}

TimerWidget.started #stop {
    display: block
}

TimerWidget.started #reset {
    visibility: hidden
}

#stop {
    dock: left;
    display: none;
}

#reset {
    dock: right;
}