$filter-color-size: 25px;
$filter-color-multi: url("/static/images/color-multi.jpg") !default;

.filter-row .filter-param-color {
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   margin-right: 12px;
   margin-bottom: 14px;
   padding: 0;
   width: $filter-color-size;

   @media screen and (min-width: $sm) {
      &:nth-child(8n) {
         margin-right: 0;
      }
   }

   input {
      opacity: 0;
      position: absolute;
      z-index: -1;
   }

   span {
      background: $filter-color-multi;
      border-radius: 50%;
      width: $filter-color-size;
      height: $filter-color-size;
      display: block;
      position: relative;

      &::before {
         @include fonticon;

         color: $white;
         content: $icons_check;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         opacity: 0;
         transition: opacity $transition-speed;
      }
   }

   &:hover span::before,
   input:checked + span::before {
      opacity: 1;
   }

   [style="background: #ffffff;"] {
      outline: 1px solid $border-color;
      outline-offset: -1px;

      &::before {
         color: $text-muted;
      }
   }
}
