.o_progressbar {
    .o_progress {
        width: 100px;
        height: 15px;
        border: 1px solid $o-gray-300;
        background-color: $o-view-background-color;
    }

    .o_progressbar_value input {
        // Prevent the input to grow and deteriorate the visibility
        width: 45px;
        min-width: 45px;
        transition: width .2s;
    }
}

.o_form_view {
    .o_progressbar_value input {
        &:focus-within {
            // To improve the edition of the value, the
            // input grows to the full available width
            width: 100%;
        }
    }
}

.o_list_view {
    .o_progressbar_cell .o_list_number_th {
        text-align: left !important;
    }

    .o_data_cell {
        .o_progressbar {
            // Force progress bars to respect table's layout
            display: table-row;
            justify-content: start;
            .o_rtl & {
                justify-content: flex-end;
                text-align: right;
            }
            .o_progressbar_value {
                span {
                    min-width: 1.5rem;
                    text-align: end;
                }
                span:last-child{
                    text-align: start;
                }
            }
        }
    }
}

.o_kanban_renderer {
    .o_progressbar:not(:hover):not(:focus-within) {
        input {
            border-color: transparent;
        }
    }
}