Change Carousel / Slider Arrow Color From Black To White

The following code is placed at the bottom of base.css, and moves the arrows to the images (from below the images) on the left and right sides.

I am able to change the rgb background color, but appreciate help in how to change the arrow on top of the background from black to white (currently it is black)

Many thanks in advance


.collection .slider-button.slider-button–prev {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-150%);
z-index: 20
}

.collection .slider-counter.caption {
visibility: hidden; !important
}

.collection .slider-button.slider-button–next {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-150%);
z-index: 20
}
.grid__item.slider__slide:first-child {
margin: 0 !important
}

.collection slider-component {
margin: auto 5vw !important
}
.collection .slider-button {
background: rgba(255, 255, 255, 0.7) !important;