How to add small, transparent background box behind product carousel arrows?

Site URL: https://y35mag.com/y35magazine/p/y35-mag-issue-no-13

Does anyone know how to do this? I cannot figure out how to accomplish this. I've attached an example of what I'm looking for for reference. This is the custom CSS I currently have:

// product preview arrows //
.ProductItem-gallery-carousel-controls *:after {
    border-color: #bdc2be !important;
}
.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control:after {
    border-width: 5px 5px 0 0;    
}

Any help is very much appreciated!!

9 hours ago, tuanphan said:

Try adding this to Design > Custom CSS

.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control {
    background-color: rgba(205, 205, 205,0.5);
}
.ProductItem .product-item-gallery-carousel-control::after {
    width: 2vw;
    height: 2vw;
    position: relative;
    left: -1vw;
}
[aria-label="Previous"]::after {
    left: unset !important;
    right: -1vw;
}

 

Wow, this worked perfectly. Thank you so much, @tuanphan !