Why on disabled Pseudo class background color of icon button is not changing

Question

Carousel is working fine. But the issue is when there is no card on left the js function add disabled class to the left-arrow but on disabled i want the background color of icon to be dim and disabled. Don't know how can I fix it. Is there a way to change the bg color on disabled.

html:

   <div class="left-arrow" id="left-arrow-rtl">
              <div class="arrow" >
                 <i class="fas fa-arrow-left"></i>
              </div>
   </div>

Css:

.left-arrow :disabled{
  background-color: grey;
}

.left-arrow {

  width: 36px;
  height: 36px;
  background-color: #ACBBD1;
  border-radius: 60px;
  color: white;
  position: relative;
  cursor: pointer;

}

Answer 1

Pseudo class disabled only works on input fields , buttons and select. By adding the background color to disabled class it works.

.disabled {
  background: #ACBBD1;
  opacity: 0.5;
}