Horizontal scrolling breadcrumb gradient placing

I've styled our existing breadcrumb nav to show a gradient on the left and right sides of the container to indicate that scrollable content exists.

Using this example I was able to implement what was required however, because the content direction is set to 'rtl' the gradient renders on the right side of the container when the page loads however, rendering it on the left on load is desirable functionality.

I've spent a lot of time trying to reverse engineer how to have it function identically to how it does now but with the gradient appearing on the left side on load instead of the right. I found some success in adjusting the background-size and background-position properties but ran into issues with when the gradient hides/shows when scrolling.

The code example can be found here.

<section class="breadcrumb">
 <div class="container-fluid">
  <div class="breadcrumb__content">
   <span>this link 1</span> / 
   <span>that link 2</span> / 
   <span>some link 3</span> / 
   <span>other link 4</span> / 
   <span>second last link 5</span> / 
   <a href="/foo">foofoofoo</a> / 
   <b class="breadcrumb__content--js-replace">barbarbar</b>
  </div>
 </div>
</section>

.breadcrumb {
 border-top: 1px solid #e5e5e5;
 display: block;
 padding: 0;
 border-bottom: 1px solid #e5e5e5;
 background-color: #f1f1f1;
 color: #4d5056;
 width: 320px;
}

.container-fluid {
 margin: 0 auto;
 max-width: 1000px;
 padding: 0 32px;
}

.container-fluid:after,
.container-fluid:before {
 content: "";
 display: table;
}

.breadcrumb__content {
 font-size: 10px;
 margin: 0 auto;
 height: 50px;
 width: 320px;
 min-width: 100%;
 line-height: 50px;
 text-transform: uppercase;
 letter-spacing: .1em;
 white-space: nowrap;
 text-overflow: clip;
 overflow: hidden;
 direction: rtl;
 text-align: left;
 overflow-x: scroll;
 background: linear-gradient(90deg, #f1f1f1 30%, hsla(0, 0%, 100%, 0)), linear-gradient(-90deg, hsla(0, 0%, 100%, 0), #f1f1f1 70%) 0 100%, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .2), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), transparent) 0 100%;
 background-repeat: no-repeat;
 background-color: #f1f1f1;
 background-size: 30px 100%, 40px 100%, 14px 100%, 14px 100%;
 background-position: 0 0, 100%, 0 0, 100%;
 background-attachment: local, local, scroll, scroll;
}

.breadcrumb__content::-webkit-scrollbar {
 display: none;
}

.breadcrumb__content {
 -ms-overflow-style: none;
 overflow: -moz-scrollbars-none;
}