.slider-btn {
   cursor: pointer;
   width: 32px;
   height: 32px;
   background-color: cl("accent");
   border-radius: 4px;
   position: relative;
   transition: background-color 0.1s ease-in-out;

   &.disabled {
      background-color: #000000;
      cursor: not-allowed;

      &:hover {
         background-color: #000000;
      }
   }

   &:hover {
      background-color: cl("accent-hover");
   }

   @include _Tablet {
      width: 40px;
      height: 40px;
   }

   @include _HDesktop {
      width: 48px;
      height: 48px;
   }

   &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 14px;
      height: 11px;
      background-repeat: no-repeat;
      background-size: contain;
      background-image: url("../../../icons/arrow.svg");

      @include _Tablet {
         width: 16px;
         height: 14px;
      }

      @include _HDesktop {
         width: 21px;
         height: 16px;
      }
   }

   &--prev {
      transform: rotate(180deg);
   }
}
