
#home-screen {
    align: center middle;
    background: $surface;
    color: $primary;
    /* border: round $primary 50%;
    border-top: none; */
}

#home-screen-container{
    background: $surface;

}

#state_label {
    align: center middle;
    width: 100%;
    /* background: $panel; */
    padding: 1 2;
    color: $primary;
    text-align: center;
}

#state_label.-working {
    background: $success 10%;
    color: $success;
}

#state_label.-break {
    background: $error 20%;
    color: $error 100%;
}


* {
    &:focus{
        background-tint: transparent;
    }
}

Toast {
    background: $surface-lighten-1;
    border-right: none;

}
#clock {
    width: auto;
    border: round $primary 20%;
    height: auto;
    /* background: $surface-lighten-1; */

    /* background: $panel; */
    padding: 1 7;
}

#progress_bar{
    width: auto;
    /* background: $surface-lighten-1; */

    .bar--bar{
        color: $primary 100%;
        background: $primary 20%;
    }
    .bar--indeterminate{
        color:red;
    }
}

#add_button{
    align-horizontal: right;
    margin: 1 1;

}
GetDuration {
    align: center middle;
}
.button{
    margin: 0 2;
}

GetDuration > Container {
    width: 80%;
    height: 80%;
    background: $surface;

    border: round $surface-lighten-2;
    color: $primary;

    #button-container{
        /* width: auto; */
        align: center middle;
        /* background: $surface-lighten-1; */

        Button{
            /* padding: 1 1; */
            margin: 2 2;
        }
    }

}
#home-screen-controls-horizontal{
    align: center middle;
    width: 100%;
    /* background: $panel; */
    padding: 1 2;
    
}

#header {
    align: center middle;
    text-align: center;
    width: 100%;
    /* background:gray; */
    padding: 1 2;
}
GetDuration > Container > Horizontal{
    /* width: auto;
    height: auto; */
    /* padding: 2 2; */
    background: $surface;

     Label {
        /* margin: 0 3; */
        padding: 0 0 1 8; 
        /* text-align: center; */
        /* align: center middle; */
        /* background: $surface;  */
        }
    MaskedInput {
        /* margin: 0 4; */
        /* width: 80%;  */
        background: $surface-lighten-2;
        color: $primary-lighten-2;
    }

    .maskinput-container{
        /* background: $surface-lighten-1; */
        /* padding: 1 1; */
        margin: 1 1 3 1;
        border: round $surface-lighten-2;
    }
}
