$list-projection-active-bg: #5eba23 !default;

.list-projection {
   display: flex;
   justify-content: flex-end;
   margin-left: auto;

   label {
      padding-left: 60px;
   }

   .title {
      position: relative;
      top: 1px;
   }

   .custom-control-indicator {
      background: $border-color;
      border: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 52px;
      height: 28px;
      border-radius: 14px;
      transition: all $transition-speed;

      &::before {
         content: "";
         position: absolute;
         background-color: $white;
         border-radius: 50%;
         width: 22px;
         height: 22px;
         top: 3px;
         left: 3px;
         transition: all $transition-speed;
      }
   }

   .custom-control-input:not(.custom-control-hidden) {
      &:checked ~ .custom-control-indicator {
         background-color: $list-projection-active-bg;

         &::before {
            content: "";
            left: calc(100% - 14px);
         }
      }
   }

   @media screen and (max-width: $md - 1) {
      justify-content: flex-start;
      font-size: $font-size-smaller;
   }
}
