@import '../styles/variables';

$progress-background-color: #d9d9d9;

.progress {
    width: 100%;
    height: 5px;
    border-radius: 50px;
    background-color: $progress-background-color;
    display: flex;

    progress {
        width: 0;
    }

    .progress-bar {
        background-color: $duda-orange;
        border-radius: 10px;
        transition: width 0.3s;
        width: 100%;
        overflow: hidden;
    }

    [dir='rtl'] & {
        transform: rotateY(180deg);
    }
}