@define-color clocks_go_color_a #7fc141;
@define-color clocks_go_color_b #8fc95d;
@define-color clocks_stop_color_a #f44848;
@define-color clocks_stop_color_b #ff6565;

.clocks-toolbar.toolbar {
    border-style: solid;
    border-width: 0 0 1px 0;
    border-radius: 0;
}

.clocks-toolbar.selection-mode.toolbar {
    border-width: 1px 0;
}

.clocks-go {
    background-image: linear-gradient(to bottom,
                                      @clocks_go_color_a,
                                      darker(@clocks_go_color_a) 70%
                                      );
    color: #ffffff;
    border-image: url("button-border-go.svg") 3 3 4 3 / 3 3 4 3 stretch;
    border-radius: 3px;
    border-width: 1px 1px 2px 1px;
    border-style: solid;
    border-color: transparent;
}

.clocks-go:hover {
    background-image: linear-gradient(to bottom,
                                      @clocks_go_color_b,
                                      darker(@clocks_go_color_b) 70%
                                      );
}

.clocks-go:active {
    background-image: linear-gradient(to bottom,
                                      darker(@clocks_go_color_a),
                                      @clocks_go_color_a
                                      );
    border-image: url("button-border-go-active.svg") 3 3 4 3 / 3 3 4 3 stretch;
}

.clocks-stop {
    background-image: linear-gradient(to bottom,
                                      @clocks_stop_color_a,
                                      darker(@clocks_stop_color_a) 70%
                                      );
    color: #ffffff;
    border-image: url("button-border-stop.svg") 3 3 4 3 / 3 3 4 3 stretch;
    border-radius: 3px;
    border-width: 1px 1px 2px 1px;
    border-style: solid;
    border-color: transparent;
}

.clocks-stop:hover {
    background-image: linear-gradient(to bottom,
                                      @clocks_stop_color_b,
                                      darker(@clocks_stop_color_b) 70%
                                      );
}

.clocks-stop:active {
    background-image: linear-gradient(to bottom,
                                      darker(@clocks_stop_color_a),
                                      @clocks_stop_color_a
                                      );
    border-image: url("button-border-stop-active.svg") 3 3 4 3 / 3 3 4 3 stretch;
}
