$filter-list-projection-size: 30px !default;
$filter-list-projection-icon-size: 16px !default;
$filter-list-projection-active-bg: $body-bg-alt !default;
$filter-list-projection-icon-color: $text-dark !default;

.filter-list-projection {
   margin-left: 30px;
   margin-right: 15px;
   display: flex;
   align-items: center;
   flex: 1;
   justify-content: flex-end;

   p {
      margin-bottom: 0;
      margin-right: 15px;
   }

   .btn-group {
      display: flex;
      align-items: center;
      gap: 4px;
   }

   label {
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: $filter-list-projection-size;
      height: $filter-list-projection-size;
      margin: 0;
      transition: all $transition-speed;

      i {
         color: $filter-list-projection-icon-color;
         font-size: $filter-list-projection-icon-size;
      }

      &:hover {
         background: $filter-list-projection-active-bg;
      }
   }

   input {
      position: absolute;
      opacity: 0;
      pointer-events: none;

      &:checked + label {
         pointer-events: none;
         border: 1px solid $brand-primary;
         border-radius: 3px;
         cursor: default;
         background: $filter-list-projection-active-bg;
      }
   }

   @media screen and (max-width: $lg - 1) {
      display: none;
   }
}
