­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ .cbw-progress { display: flex; justify-content: space-between; align-items: center; margin: 28px 0 15px; &__bar { flex: 1 1 auto; width: 100%; height: 14px; border-radius: 7px; background: $color__accent-lighter; } &__done { height: 14px; border-radius: 7px; min-width: 14px; max-width: 100%; background: $color__accent; box-shadow: 0 1px 4px rgba(35, 40, 45, 0.24); } &__value { flex: 0 0 60px; max-width: 60px; font-weight: 500; font-size: 18px; line-height: 27px; color: $color__accent; text-align: getValueByDirection(right, left); } } .cbw-progress-alt { &__bar { width: 100%; height: 14px; border-radius: 7px; background: $color__accent-lighter; } &__done { height: 14px; border-radius: 7px; min-width: 14px; max-width: 100%; background: $color__accent; box-shadow: 0 1px 4px rgba(35, 40, 45, 0.24); .cbw-progress-alt--complete & { background: $color__success; } } }